A modern and appealing landing page for the AL-khaliq music app, built with Next.js, React, and Tailwind CSS.

• Features
• Tech Stack
• Getting Started
• Project Structure
• Customization
• Formspree Setup
• Deployment
• Screenshots

• Modern and appealing design: A beautiful and engaging user interface with a purple theme.
• Interactive elements: Smooth animations, hover effects, and interactive cards.
• Floating music notes: An animated background with floating musical notes to create a magical atmosphere.
• Contact form: A fully functional contact form with validation and email submission via Formspree.
• Responsive design: The landing page is fully responsive and looks great on all devices.

• Next.js - A React framework for building server-rendered applications.
• React - A JavaScript library for building user interfaces.
• Tailwind CSS - A utility-first CSS framework for rapid UI development.
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
• lucide-react - A library of beautiful and consistent icons.
• Formspree - A form backend for developers.

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

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

The project is structured as follows:

• src/app/: Contains the main application logic, including pages and layouts.
• src/app/components/: Contains the React components used in the application.
• src/app/hooks/: Contains custom React hooks.
• src/app/types/: Contains TypeScript type definitions.
• src/app/lib/: Contains utility functions.
• public/: Contains static assets like images and fonts.

The brand colors are defined in tailwind.config.ts. You can modify them to change the color scheme of the landing page.

The content of the landing page is located in the components within src/app/components/. You can edit these files to change the text and images.

The contact form in this project uses Formspree to handle submissions. To make it work, you need to create a new form in Formspree and get your form ID.

1. Go to formspree.io and create a new form.
2. You will get a unique URL for your form, which looks like https://formspree.io/f/your_form_id.
3. In src/app/components/ContactForm.tsx, replace the placeholder URL in the handleSubmit function with your actual Formspree form URL.