Shopping Vila Bella - Modern Landing Page

ReactTypescriptTailwindCSSFramer Motion

Code Live

---

About the project

This is a landing page for a fictional shopping mall

🚀 Technologies Used

• React - JavaScript library for building user interfaces
• TypeScript - Typed JavaScript superset
• Vite - Build tool and development server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide React - Icon set
• React Intersection Observer - Hook for detecting elements in viewport

📋 Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

🔧 Installation

1. Clone the repository:

git clone https://github.com/nixoletas/site-shopping-villa-bella.git

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

🛠️ Available Scripts

• npm run dev - Starts the development server
• npm run build - Creates the production build
• npm run lint - Runs the linter
• npm run preview - Previews the production build

📁 Project Structure

├── src/               # Source code
├── public/            # Static files
├── .gitignore         # Git ignored files
├── index.html         # Main page
├── package.json       # Dependencies and scripts
├── tsconfig.json      # TypeScript configuration
├── vite.config.ts     # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── postcss.config.js  # PostCSS configuration

🤝 Contributing

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

✨ Acknowledgments

• Vite for providing a fast development experience
• React for being an amazing library for building interfaces
• Tailwind CSS for simplifying style development