Edenbridge → Futuristic Edition

A modern, AI-first school website featuring autonomous learning journeys powered by proprietary AI mentors. Built with Next.js, TypeScript, Tailwind CSS, and Framer Motion.

🚀 Features

• Futuristic Design: Vibrant gradients, animated SVGs, parallax effects
• AI-First Content: Showcase of AI learning companions and teacherless education
• Fully Responsive: Optimized for mobile, tablet, desktop, car infotainment, and TV screens
• High Interactivity: Scroll-driven animations, hover effects, interactive diagrams
• Accessibility: WCAG AA compliant, keyboard navigation, semantic HTML
• Dark Mode: System-aware theme toggle with smooth transitions
• Performance Optimized: Next.js 15, image optimization, lazy loading

📋 Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

🛠️ Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to view the site.

📁 Project Structure

edenbridge-futuristic/
├── app/                    # Next.js app router pages
│   ├── layout.tsx         # Root layout with navigation
│   ├── page.tsx           # Homepage
│   ├── about/             # About page
│   ├── curriculum/        # Curriculum page
│   ├── admissions/        # Admissions page
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── Hero.tsx          # Animated hero section
│   ├── Navigation.tsx    # Responsive navigation
│   ├── AIBotsShowcase.tsx # AI mentors grid
│   ├── EthosDiagram.tsx  # Interactive SVG diagram
│   ├── ContentGrid.tsx   # Reusable content grid
│   ├── ChatBubble.tsx    # AI assistant chat
│   └── ...               # Other components
├── public/               # Static assets
│   ├── images/          # Images and graphics
│   ├── animations/      # Lottie JSON files
│   └── downloads/       # Downloadable resources
├── tailwind.config.ts   # Tailwind configuration
├── next.config.ts       # Next.js configuration
└── package.json         # Dependencies

🎨 Design System

Colors

• Primary: #0EA5C9 (Electric Cerulean)
• Accent Coral: #FF6B8A
• Accent Lime: #C7F464
• Neutral Dark: #111827
• Neutral Light: #E6EEF7

Typography

Fluid typography using clamp() for responsive sizing:

• text-fluid-xs to text-fluid-5xl

Animations

• Framer Motion for complex animations
• CSS keyframes for simple effects
• Respects prefers-reduced-motion

🧩 Key Components

Hero

Full-screen animated hero with Lottie animations and gradient backgrounds.

EthosDiagram

Interactive SVG diagram with hover tooltips and keyboard navigation.

AIJourneyCard

Showcase individual AI bot personalities with hover effects.

EnrollmentWizard

Multi-step form with validation, file uploads, and progress saving.

ContentGrid

Reusable grid with filtering, search, and lazy loading.

📱 Responsive Breakpoints

• xs: 475px
• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• car: 800px (car infotainment)
• tv: 1920px (TV screens)

♿ Accessibility

• WCAG AA color contrast ratios
• Keyboard navigation for all interactive elements
• ARIA labels and roles
• Skip to content link
• Focus visible indicators
• Screen reader friendly

🚢 Deployment

Vercel (Recommended)

1. Push code to GitHub
2. Import project in Vercel
3. Deploy automatically

# Or use Vercel CLI
npm i -g vercel
vercel

Netlify

1. Connect GitHub repository
2. Build command: npm run build
3. Publish directory: .next

Manual Deployment

npm run build
npm start

🧪 Testing

# Run Cypress E2E tests
npm run test

# Run in headless mode
npm run test:e2e

📊 Performance Checklist

• Lighthouse Performance ≥70
• Lighthouse Accessibility ≥90
• Lighthouse SEO ≥80
• Images optimized (WebP/AVIF)
• Fonts preloaded
• Critical CSS inlined
• Lazy loading implemented
• Code splitting enabled

🔧 Configuration

Environment Variables

Create .env.local:

NEXT_PUBLIC_SITE_URL=https://edenbridge.edu
NEXT_PUBLIC_API_URL=https://api.edenbridge.edu
RECAPTCHA_SITE_KEY=your_key_here
RECAPTCHA_SECRET_KEY=your_secret_here

CMS Integration

The site is designed to work with headless CMS (Sanity/Strapi/Contentful). Content structure is defined in /content directory.

📝 Content Management

Adding AI Bots

Edit components/AIBotsShowcase.tsx to add new bot personalities.

Updating Diagrams

SVG diagrams are in components/EthosDiagram.tsx. Modify nodes and connections arrays.

Adding Pages

Create new pages in app/ directory following Next.js app router conventions.

🎯 QA Checklist

• All pages load without errors
• Navigation works on all devices
• Forms validate and submit correctly
• Images load and are optimized
• Animations respect reduced motion
• Dark mode works correctly
• Keyboard navigation functional
• Screen reader compatible
• Mobile responsive
• TV/car navigation tested

📚 Documentation

• Next.js Docs
• Tailwind CSS
• Framer Motion
• React Hook Form

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is proprietary and confidential.

🆘 Support

For questions or issues, contact the development team or open an issue in the repository.

---

Built with ❤️ for the future of education