UNWRAPPED Data DAO - Join Page

A modern, responsive landing page for UNWRAPPED Data DAO built with Next.js, TypeScript, and Tailwind CSS.

Features

• 🎨 Modern, responsive design with dark theme
• ⚡ Built with Next.js 14 and TypeScript
• 🎯 Tailwind CSS for styling
• 📱 Mobile-first responsive design
• ✨ Smooth animations and transitions
• 🔧 Easy to customize and extend

Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Font: Inter (Google Fonts)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd spotify_app

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 with your browser to see the result.

Project Structure

spotify_app/
├── app/
│   ├── globals.css          # Global styles and Tailwind imports
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Main page component
├── public/                  # Static assets
├── package.json             # Dependencies and scripts
├── tailwind.config.js       # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
└── README.md               # Project documentation

Customization

Colors

The color scheme can be customized in tailwind.config.js. The current theme uses:

• Primary colors: Blue gradient (primary-400 to primary-600)
• Dark theme: Various shades of dark gray (dark-50 to dark-900)

Content

Update the content in app/page.tsx to match your needs:

• Hero section text and messaging
• Features and benefits
• Contact information
• Navigation links

Styling

Custom styles are defined in app/globals.css using Tailwind's @layer directive:

• Button styles (.btn-primary, .btn-secondary)
• Card styles (.card)
• Gradient text (.gradient-text)
• Glass effect (.glass-effect)

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform.

Check out the Next.js deployment documentation for more details.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Design inspired by modern SaaS landing pages
• Icons from Lucide React
• Font from Google Fonts