tonnieglobal/trova-africa

# Trova Africa - Advertising Agency Website A modern, responsive advertising agency website built with React, TypeScript, Tailwind CSS, and Supabase backend. ## Features - **Modern React Stack**: Built with React 18, TypeScript, and Vite - **Responsive Design**: Mobile-first design using Tailwind CSS - **Multi-language Support**: English, French, Swahili, and Spanish - **Supabase Backend**: Contact form submissions stored in Supabase database - **Drone Footage Video**: Homepage features aerial billboard footage - **Portfolio Showcase**: Dynamic project gallery with filtering - **Contact Form**: Fully functional form with validation ## Tech Stack - **Frontend**: React 18, TypeScript, Tailwind CSS - **UI Components**: shadcn/ui, Radix UI primitives - **Backend**: Supabase (PostgreSQL + Auth) - **Build Tool**: Vite - **Icons**: Lucide React - **Routing**: React Router v7 ## Getting Started ### Prerequisites - Node.js 18+ - npm or pnpm - Supabase account (for backend features) ### Installation 1. Clone the repository: ```bash git clone github.com cd trova-africa ``` 2. Install dependencies: ```bash npm install ``` 3. Set up environment variables: ```bash cp .env.example .env ``` Edit `.env` with your Supabase credentials: ``` VITE_SUPABASE_URL=your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key ``` 4. Set up Supabase database: - Run the SQL in `supabase/schema.sql` in your Supabase SQL Editor 5. Start the development server: ```bash npm run dev ``` 6. Open localhost in your browser ### Building for Production ```bash npm run build ``` The built files will be in the `dist/` directory. ## Project Structure ``` src/ ├── app/ │ ├── components/ # React components │ ├── context/ # Language context │ ├── pages/ # Page components │ ├── App.tsx │ └── routes.tsx ├── lib/ │ └── supabase.ts # Supabase client ├── styles/ # CSS files └── main.tsx …