Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redaezziani/animation-landing-page
landing page implemented using Next.js, Tailwind CSS, and Framer Motion
https://github.com/redaezziani/animation-landing-page
framer-motion nextjs nextjs-routing tailwindcss typescript
Last synced: about 2 months ago
JSON representation
landing page implemented using Next.js, Tailwind CSS, and Framer Motion
- Host: GitHub
- URL: https://github.com/redaezziani/animation-landing-page
- Owner: redaezziani
- Created: 2023-11-27T16:48:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-23T17:18:29.000Z (9 months ago)
- Last Synced: 2024-04-23T19:22:45.911Z (9 months ago)
- Topics: framer-motion, nextjs, nextjs-routing, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 6.36 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
markdown
# Animation Landing Page
## Description
This project is a landing page implemented using Next.js, Tailwind CSS, and Framer Motion. It serves as a clone for the Apple website, focusing on animations and modern web design techniques.
## Features
- Responsive design for various screen sizes.
- Smooth animations created with Framer Motion.
- Next.js for efficient and fast web development.
- Tailwind CSS for easy styling and customization.
## Project Structure
```plaintext
animation-landing-page/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── ...
├── src/
│ ├── components/
│ │ └── NavBar.tsx
│ ├── pages/
│ │ ├── api/...
├── │ ├── _app.tsx
│ │ ├── index.tsx
│ │ └── _document.tsx
│ └── styles/
│ └── global.css
│
│
├── .gitignore
├── next.config.js
├── package.json
├── tsconfig.json
├── README.md
└── tailwind.css
``````
## Installation
Before you start, make sure you have Node.js and npm installed on your machine.
1. Clone the repository:
```bash
git clone https://github.com/redaezziani/animation-landing-page.git
Change into the project directory:
bash
cd animation-landing-page
Install dependencies:
bash
npm install
Run the development server:
bash
npm run dev
The project will be accessible at http://localhost:3000.
```
Usage
Feel free to explore, modify, and extend the project as needed. Customize the content, colors, and animations to suit your preferences and requirements.
Contributing
If you'd like to contribute to this project, please follow the standard GitHub Fork and Pull Request workflow.
License
This project is licensed under the MIT License.
Acknowledgments
Next.js
Tailwind CSS
Framer Motion
Happy coding! 🚀