Annai College of Engineering & Technology — Website

Official website for Annai College of Engineering & Technology, Kovilacheri, Kumbakonam — built with Next.js 14 (App Router), Tailwind CSS, Framer Motion, GSAP, and Anime.js.

---

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Styling	Tailwind CSS + Custom CSS Variables
Animations	Framer Motion · GSAP ScrollTrigger · Anime.js 4
Charts	Recharts
Icons	Lucide React
Email	Nodemailer (SMTP)
Fonts	Google Fonts — Inter + Poppins

---

Getting Started (Local Development)

Prerequisites

• Node.js v18 or later — download
• npm v9+ (comes with Node.js)

1. Clone the repository

git clone https://github.com/your-org/annai_full_site.git
cd annai_full_site

2. Install dependencies

npm install

3. Set up environment variables

Copy the example and fill in your credentials (see SMTP Setup below):

# Windows PowerShell
Copy-Item .env.local.example .env.local

# Or create manually

Edit .env.local:

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your.gmail@gmail.com
SMTP_PASS=xxxx xxxx xxxx xxxx
MAIL_TO=admissions@annaiengineering.edu.in

⚠️ Never commit .env.local — it is already listed in .gitignore.

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

---

Project Structure

annai_full_site/
├── app/
│   ├── layout.js               # Root layout (Navbar, Footer, Popup, GSAP)
│   ├── globals.css             # Design tokens & global styles
│   ├── page.js                 # Home page
│   ├── about/page.js
│   ├── academics/page.js
│   ├── admissions/page.js
│   ├── campus-life/page.js
│   ├── contact/page.js
│   ├── placements/page.js
│   └── api/
│       └── contact/route.js    # Email API route (Nodemailer)
├── components/
│   ├── Navbar.js
│   ├── Footer.js
│   ├── PageHero.js
│   ├── StatsBar.js             # Animated stat counters (Anime.js)
│   ├── StoryCarousel.js        # Testimonial carousel
│   ├── AdmissionPopup.js       # Admission Open modal
│   └── GSAPProvider.js         # Global scroll-reveal animations
├── hooks/
│   └── useAnimations.js        # Reusable animation hooks
├── public/
│   └── img/
│       ├── logo.png
│       ├── main-banner.png
│       └── p1.png
├── .env.local                  # ← your secrets (not committed)
├── .gitignore
└── package.json

---

SMTP / Email Setup

The contact form at /contact sends emails via the /api/contact API route using Nodemailer.

Option A — Gmail (Recommended, Free)

Gmail requires an App Password (not your normal login password).

Step 1: Enable 2-Step Verification on your Google account

1. Go to myaccount.google.com
2. Click Security → 2-Step Verification → Enable it

Step 2: Generate an App Password

1. Go to Security → App passwords (only visible after 2FA is on)
2. Select app: Mail → Select device: Other → name it Annai Website
3. Click Generate — copy the 16-character code shown

Step 3: Fill in .env.local

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your.gmail@gmail.com     # Gmail account used to send
SMTP_PASS=abcd efgh ijkl mnop      # 16-char App Password (spaces are OK)
MAIL_TO=admissions@annaiengineering.edu.in

Step 4: Test it

Start the dev server (npm run dev), go to /contact, fill the form and submit. Check:

• The MAIL_TO inbox for the styled enquiry email
• The enquirer's inbox for the auto-reply confirmation

---

Option B — Custom SMTP / Institutional Email

If your college has its own mail server:

SMTP_HOST=mail.annaiengineering.edu.in   # your SMTP server
SMTP_PORT=465                             # 465 for SSL, 587 for TLS
SMTP_SECURE=true                          # true for port 465
SMTP_USER=no-reply@annaiengineering.edu.in
SMTP_PASS=your_email_password
MAIL_TO=admissions@annaiengineering.edu.in

---

Building for Production

npm run build

This creates an optimised production build in .next/. Check the output for any errors before deploying.

---

Deployment

Option A — Vercel (Recommended)

Vercel is the easiest zero-config deployment for Next.js.

1. Push to GitHub

git add .
git commit -m "initial commit"
git push origin main

2. Import on Vercel

1. Go to vercel.com → Add New Project
2. Import your GitHub repository
3. Framework preset: Next.js (auto-detected)
4. Click Deploy

3. Add Environment Variables on Vercel

In your Vercel project → Settings → Environment Variables, add each key from .env.local:

Key	Value
SMTP_HOST	smtp.gmail.com
SMTP_PORT	587
SMTP_SECURE	false
SMTP_USER	your Gmail address
SMTP_PASS	your App Password
MAIL_TO	admissions email

✅ Vercel auto-deploys on every git push to main.

---

Option B — Self-Hosted / VPS (Ubuntu)

# 1. Build
npm run build

# 2. Start production server
npm start
# Runs on http://localhost:3000 by default

# 3. (Optional) Use PM2 to keep it alive
npm install -g pm2
pm2 start npm --name "annai-site" -- start
pm2 save
pm2 startup

Then point Nginx or Apache as a reverse proxy to localhost:3000.

Sample Nginx config:

server {
    listen 80;
    server_name annaiengineering.edu.in www.annaiengineering.edu.in;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

---

Key Features

• 🎓 8 UG + 2 PG programme listings (Anna University affiliated, AICTE approved)
• 📬 Contact form with real email delivery + auto-reply (Nodemailer)
• 🎞️ Testimonial carousel — auto-advance, swipe/drag, 3-card layout
• 📊 Placement charts — bar + pie (Recharts)
• 🏛️ Admission popup — appears on every load, year auto-updates
• ✨ Scroll animations — GSAP ScrollTrigger + Anime.js counters
• 📍 Google Maps embed — precise college location (lat/lng)
• 📱 Responsive — mobile-first across all 8 pages

---

Contacts & Admission

TNEA Counselling Code	3849
Affiliation	Anna University
Approval	AICTE
Address	Kovilacheri, Kumbakonam – 621 503, Tamil Nadu
Phone	+91 70920 38384 · +91 88070 53849 · +91 94884 88241
Email	admissions@annaiengineering.edu.in

---

License

© 2026–present Annai College of Engineering & Technology. All rights reserved.