FocusHub - Next.js Application

This is the Next.js version of the FocusHub website, converted from vanilla JavaScript.

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install
# or
yarn install

2. Set up environment variables: Create a .env.local file in the root directory:

GROQ_API_KEY=your_groq_api_key_here

3. Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• /app - Next.js App Router pages and layouts
• /components - React components
• /hooks - Custom React hooks
• /lib - Utility functions and Firebase configuration
• /public - Static assets (images, etc.)

Key Features Converted

• ✅ Main homepage with all sections
• ✅ Header with navigation and search
• ✅ Theme switching (dark/light mode)
• ✅ Firebase authentication integration
• ✅ API route for Groq API proxy
• ✅ Consent banner
• ✅ Image slider
• ✅ Countdown timer

Remaining Pages to Convert

The following pages still need to be converted from HTML to Next.js:

• Dashboard (/dashboard)
• Editor (/editor)
• Login (/login)
• Register (/register)
• Settings (/settings)
• Other static pages (about, pricing, terms, privacy, etc.)

Deployment

The site is configured for Vercel deployment. Make sure to:

1. Add GROQ_API_KEY to your Vercel environment variables
2. Deploy using Vercel CLI or connect your GitHub repository

Notes

• All CSS has been moved to app/globals.css
• Firebase configuration is in lib/firebase.js
• API routes use Next.js App Router format (app/api/)