A modern, full-stack web application for a professional landscaping business. Built with React and designed with a focus on user experience, responsive design, and stunning visual effects.
EverSquirrel is a comprehensive landscaping business website featuring:
- Interactive hero slideshow with smooth transitions
- Responsive mobile-first design
- Advanced hamburger menu with glassmorphism effects
- Service showcase sections
- Contact form integration
- Modern UI/UX with gradient accents
- React 19.2.0 - Modern React with hooks and functional components
- Tailwind CSS - Utility-first CSS framework via CDN
- Responsive Design - Mobile-first approach with breakpoints for all devices
- Advanced Animations - Smooth transitions, blur effects, and hover states
- Glassmorphism UI - Modern frosted glass aesthetic
- Interactive Components - Dynamic slideshow, animated menu, smooth scrolling
- 🎨 Orange & Emerald gradient color scheme
- 📱 Fully responsive navigation with premium mobile menu
- 🖼️ Auto-advancing image slideshow with manual controls
- 💳 Card-based service sections with hover effects
- 📝 Professional contact form
- 🎯 Smooth section transitions
Frontend:
- React 19.2.0
- React DOM 19.2.0
- Tailwind CSS (CDN)
Development:
- React Scripts 5.0.1
- Node.js
- Git & GitHub
Future Additions (Planned):
- Backend API (Node.js/Express)
- Database integration (MongoDB/PostgreSQL)
- Form submission handling
- Email notifications
- Admin dashboard
- CMS integration
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/Programmer-stevenson/EverSquirrel.git
cd EverSquirrel- Install dependencies:
npm install- Add your images:
Place your images in the
public/images/folder:
courtyard.jpgmower.jpgwheel-barrell.jpgaerial-landscape.jpg
- Start the development server:
npm start- Open your browser: Navigate to http://localhost:3000
EverSquirrel/
├── public/
│ ├── index.html
│ ├── favicon.png
│ └── images/
│ ├── courtyard.jpg
│ ├── mower.jpg
│ ├── wheel-barrell.jpg
│ └── aerial-landscape.jpg
├── src/
│ ├── components/
│ │ └── HeroSlideshow.jsx
│ ├── App.js
│ ├── index.js
│ └── index.css
├── .gitignore
├── package.json
└── README.md
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App (one-way operation)
The color scheme uses gradients between orange and emerald. To customize:
- Edit the Tailwind config in
public/index.html - Modify gradient classes in component files
- Services: Edit service cards in
HeroSlideshow.jsx - Contact Info: Update contact details in the Contact section
- Images: Replace images in
public/images/
npm run build- Connect your GitHub repository
- Set build command:
npm run build - Set publish directory:
build - Deploy!
- Backend API development
- Database integration
- Contact form submission handling
- Email notification system
- User authentication
- Admin dashboard
- Blog/Portfolio section
- Testimonials section
- Service booking system
- Payment integration
This is a personal project, but suggestions and feedback are welcome! Feel free to:
- Fork the repository
- Create a feature branch
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Brandon Stevenson
- GitHub: @Programmer-stevenson
- Design inspiration from modern landscaping websites
- Tailwind CSS for the utility-first approach
- React community for excellent documentation
For questions or collaboration opportunities:
- Email: info@eversquirrel.com
- Phone: (555) 123-4567
- Location: Los Angeles, CA
⭐ Star this repository if you find it helpful!
Status: 🟢 Active Development | Last Updated: October 2025