80 lines
1.8 KiB
Markdown
80 lines
1.8 KiB
Markdown
# Family Business Website
|
|
|
|
A beautiful, responsive website for a family business with summer sunset vibes. This project is built with Next.js, React, TypeScript, Tailwind CSS, and Framer Motion.
|
|
|
|
## Features
|
|
|
|
- Modern, responsive design with summer sunset color palette
|
|
- Smooth animations and transitions with Framer Motion
|
|
- Fully responsive for all device sizes
|
|
- Contact form with validation
|
|
- Optimized images and performance
|
|
|
|
## Tech Stack
|
|
|
|
- **Next.js**: React framework for production
|
|
- **React**: JavaScript library for building user interfaces
|
|
- **TypeScript**: Typed JavaScript
|
|
- **Tailwind CSS**: Utility-first CSS framework
|
|
- **Framer Motion**: Animation library for React
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 14.0 or later
|
|
- npm or yarn
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository
|
|
```bash
|
|
git clone https://github.com/yourusername/family-business.git
|
|
cd family-business
|
|
```
|
|
|
|
2. Install dependencies
|
|
```bash
|
|
npm install
|
|
# or
|
|
yarn install
|
|
```
|
|
|
|
3. Run the development server
|
|
```bash
|
|
npm run dev
|
|
# or
|
|
yarn dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
|
|
## Project Structure
|
|
|
|
- `src/app`: Next.js App Router pages
|
|
- `src/components`: Reusable React components
|
|
- `public`: Static assets
|
|
- `tailwind.config.js`: Tailwind CSS configuration
|
|
|
|
## Color Palette
|
|
|
|
The website uses a summer sunset-inspired color palette:
|
|
|
|
- Sunset Orange: `#FF7B54`
|
|
- Sunset Pink: `#FFB26B`
|
|
- Sunset Yellow: `#FFD56F`
|
|
- Sunset Purple: `#939B62`
|
|
- Evening Blue: `#1A5F7A`
|
|
- Night Blue: `#002B5B`
|
|
- Warm White: `#FFF8EA`
|
|
- Sand: `#E1D7C6`
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
|
|
## Acknowledgments
|
|
|
|
- Design inspiration from [Dribbble](https://dribbble.com/shots/25718593-Coolest-Meme-Coin-Website)
|
|
- Images from [PlaceKitten](https://placekitten.com/)
|