SGGS Institute of Engineering & Technology - Website

A modern, responsive educational institute website built with React + Vite, featuring beautiful UI and smooth animations.

🌟 Features

• ✅ Fully Responsive Design - Works seamlessly on mobile, tablet, and desktop
• ✅ Modern UI - Clean, professional design with card-based layouts
• ✅ Smooth Animations - Framer Motion powered animations
• ✅ 3 Complete Pages - Home, About, and Contact pages
• ✅ Shared Components - Reusable Navbar, Footer, and BackToTop button
• ✅ Form Validation - React Hook Form for contact form with validation
• ✅ Sticky Navigation - Navbar that sticks on scroll
• ✅ Accessibility - ARIA labels and keyboard navigation
• ✅ SEO Optimized - Meta tags and semantic HTML

🛠️ Tech Stack

• Framework: React 18 + Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Routing: React Router DOM
• Icons: React Icons
• Form Handling: React Hook Form
• Animations Observer: React Intersection Observer

📦 Installation

1. Navigate to the project directory:

cd sggs-website

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The website will be available at http://localhost:3000

🏗️ Project Structure

sggs-website/
├── public/
├── src/
│   ├── components/
│   │   ├── home/
│   │   │   ├── HeroCarousel.jsx
│   │   │   ├── StatsCounter.jsx
│   │   │   ├── AboutSection.jsx
│   │   │   ├── Programs.jsx
│   │   │   ├── Announcements.jsx
│   │   │   ├── ExamNotices.jsx
│   │   │   ├── NewsEvents.jsx
│   │   │   ├── Facilities.jsx
│   │   │   ├── AlumniSpotlight.jsx
│   │   │   └── GalleryPreview.jsx
│   │   ├── Navbar.jsx
│   │   ├── Footer.jsx
│   │   └── BackToTop.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── About.jsx
│   │   └── Contact.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── vite.config.js

🎨 Pages Overview

1. Homepage

• Hero Carousel - Auto-rotating slides with CTA buttons
• Stats Counter - Animated counters for key metrics
• About Section - Brief institute overview
• Programs - UG, PG, and PhD programs
• Announcements - Timeline-based announcements
• Exam Notices - Important exam notifications
• News & Events - Latest happenings
• Facilities - 8 key facilities grid
• Alumni Spotlight - Carousel featuring successful alumni
• Gallery Preview - Campus life photo grid

2. About Us Page

• Institute overview with detailed history
• Director's message
• Accreditations & recognitions (NAAC, NBA, NIRF, ISO)
• Campus facilities list
• Achievements showcase

3. Contact Us Page

• Contact form with validation
• Contact information (address, phone, email, hours)
• Department-specific contacts
• Quick links (Grievance, Feedback, Alumni)
• Google Maps integration

🎨 Design Details

Colors

• Primary Blue: #1e3a8a
• Secondary Orange: #f97316
• Backgrounds: White and light gray shades

Typography

• Headings: Poppins (400, 500, 600, 700, 800)
• Body: Inter (300, 400, 500, 600, 700)

Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Build for Production

npm run build

This will create an optimized production build in the dist/ folder.

To preview the production build locally:

npm run preview

📱 Features Breakdown

Navbar

• Sticky on scroll
• Hamburger menu for mobile
• Language toggle (EN/मराठी)
• Active link highlighting
• Smooth transitions

Footer

• 4-column layout
• Social media links
• Quick links to important pages
• Contact information
• Copyright notice

Homepage Sections

1. Hero Carousel - 4 slides, auto-rotate every 5 seconds
2. Stats Counter - Animated numbers on scroll
3. About Section - 2-column layout with image
4. Programs - 3 cards with icons and features
5. Announcements - Timeline with 4 items
6. Exam Notices - 3 notice cards with download buttons
7. News & Events - 3-card grid with images
8. Facilities - 8 icon boxes in grid
9. Alumni Spotlight - Carousel with 3 profiles
10. Gallery Preview - 6 image placeholders

Form Features

• Real-time validation
• Required field indicators
• Error messages
• Email format validation
• Phone number validation (10 digits)
• Success message on submission

Animations

• Fade-in on scroll
• Hover effects
• Counter animation
• Carousel transitions
• Smooth page transitions

🔧 Customization

Changing Colors

Edit tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: '#1e3a8a', // Change this
      secondary: '#f97316', // Change this
    },
  },
}

Adding Images

Replace gradient placeholders in components with actual images:

<img src="/path/to/image.jpg" alt="Description" />

Updating Content

All content is directly in the component files. Edit the respective component to update text, stats, or other information.

📄 License

This project is created for SGGS Institute of Engineering & Technology.

👨‍💻 Development

• Built with modern React practices
• Component-based architecture
• Reusable and maintainable code
• Responsive and accessible design
• SEO optimized
• Performance optimized

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📞 Support

For any issues or questions, please contact:

• Email: info@sggs.ac.in
• Phone: 02462-269234

---

Made with ❤️ for SGGS Institute of Engineering & Technology