A responsive and modern landing page built with React and styled using Tailwind CSS. This project demonstrates the use of reusable components, custom Tailwind configurations, and responsive design principles.
- Responsive Design: Fully responsive layout for mobile, tablet, and desktop devices.
- Custom Tailwind CSS Configuration: Includes custom colors, spacing, fonts, and utilities.
- Reusable Components: Modular and reusable React components for scalability.
- Smooth Scrolling: Enhanced user experience with smooth scrolling.
- Dark Mode Ready: Configured with a dark color scheme.
- React: Frontend library for building user interfaces.
- React Router: For routing and navigation.
- Tailwind CSS: Utility-first CSS framework for styling.
- Vite: Fast build tool for modern web projects.
- Google Fonts: Custom fonts integrated via Google Fonts.
react-landing/
├── src/
│ ├── assets/ # Static assets (images, SVGs, etc.)
│ ├── components/ # Reusable React components
│ ├── constants/ # Static data (e.g., navigation links)
│ ├── context/ # Global state management
│ ├── design/ # Design-specific components
│ ├── pages/ # Page components
│ ├── [App.jsx](http://_vscodecontentref_/0) # Main application component
│ ├── main.jsx # Entry point for the React app
│ └── index.css # Tailwind CSS and global styles
├── public/ # Public assets
├── [tailwind.config.js] # Tailwind CSS configuration
├── [vite.config.js] # Vite configuration
├── [package.json] # Project dependencies and scripts
└── [README.md] # Project documentation- Clone the repository:
https://github.com/Relayyl6/react_landing_page.git
cd react-landing- Install dependencies:
npm install- Start the development server:
npm run devOpen your browser and navigate to:
http://localhost:5173
Tailwind CSS Configuration The tailwind.config.js file includes custom configurations for colors, spacing, fonts, and more. You can modify it to suit your design needs.
Fonts Custom fonts are imported in src/index.css:
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
This project is licensed under the MIT License.
For any inquiries or feedback, feel free to reach out:
- **Email**: [Leonard](oseghaleleonard39@gmail.com)
- **GitHub**: [Relayyl6](https://github.com/Relayyl6)