A modern and responsive React + Vite frontend for a fictional IELTS Institute.
Designed with Tailwind CSS (v3.4.17) for clean, professional, and mobile-friendly UI.
ielts-institute/
├── public/ # Static assets (logo, hero banner, etc.)
├── src/
│ ├── assets/ # Images and icons
│ ├── components/ # Reusable UI components (Navbar, Hero, Features, etc.)
│ ├── pages/ # Page-level views (Home.jsx)
│ ├── App.jsx # Root app
│ ├── main.jsx # Entry point
│ └── index.css # Tailwind styles
├── index.html
├── package.json
└── tailwind.config.js
- Clone the repo
git clone https://github.com/your-username/ielts-institute.git cd ielts-institute - Install dependencies
npm install3.Run the dev server
npm run devOpen http://localhost:5173 in your browser.
4.Build for production
npm run build-
Color Palette
Used the Beach Sunset palette from Coolors for a warm, inviting, and motivating feel.- Deep Blue (#1b4965) → trust, stability (headings & accents)
- Sky Blue (#62b6cb) → freshness, optimism (hover states & highlights)
- Soft Beige & Coral tones → subtle backgrounds and accents for warmth
-
Modern & Professional Look
Rounded sections, subtle shadows, and a clean palette to reflect trust and professionalism. -
Responsive First
Navbar adapts with a dropdown menu for mobile devices. Sections stack vertically on small screens and expand into grids on larger screens. -
Reusable Components
FeatureCardandTestimonialCardkeep the code modular and maintainable.Navbarincludes an animated mobile dropdown for smooth UX.
-
Visual Hierarchy
- Hero section immediately draws attention with a bold headline and CTA button.
- Features highlight the institute’s strengths with simple icons.
- Testimonials add social proof.
- Footer provides quick links and contact info.
-
Animations & Interactions
Small hover effects and a slide-down animation on the mobile dropdown make the page feel dynamic without being overwhelming.
- React
- Vite
- Tailwind CSS v3.4.17
