techyWorldAi/techyWORLDAI

We help modern businesses in Kenya and beyond make the AI transition — through intelligent websites, workflow automation, AI integrations, and hands-on training. VIEW SERVICES # TechyWorldAI > Bridging the AI Gap for Modern Businesses — Work Smarter, Scale Faster. Built with **React 18 + TypeScript + Vite + Tailwind CSS**, backed by **Supabase** for the hidden CMS. --- ## ⚡ Quick Start ```bash # 1. Install dependencies npm install # 2. Start dev server (opens at localhost) npm run dev # 3. Build for production npm run build # 4. Preview production build npm run preview ``` --- ## 🗂️ Project Structure ``` techyworldai/ ├── index.html ← Vite entry HTML ├── vite.config.ts ← Vite config ├── tailwind.config.js ├── postcss.config.js ├── tsconfig.json ├── tsconfig.node.json ├── package.json └── src/ ├── main.tsx ← React entry point ├── App.tsx ← Root component ├── types.ts ← TypeScript interfaces ├── constants.ts ← Services data, pricing, colours, PIN ├── styles/ │ └── index.css ← Tailwind + global styles + animations ├── hooks/ │ ├── useInView.ts ← Intersection Observer (scroll animations) │ └── useSupabase.ts ← All Supabase API functions └── components/ ├── Logo.tsx ← SVG hexagon logo mark ├── Navbar.tsx ← Fixed top nav (scroll-aware) ├── Hero.tsx ← Full-screen dark hero section ├── Services.tsx ← 4 services + KES pricing grid ├── WorkedWith.tsx ← CMS-driven companies section ├── Stories.tsx ← CMS-driven success stories ├── Contact.tsx ← Contact form ├── Footer.tsx ← Footer + hidden admin trigger └── AdminPanel.tsx ← PIN-protected CMS panel ``` --- ## 🔐 Hidden CMS Three ways to open the admin panel: | Method | How | |--------|-----| | Keyboard | `Ctrl + Shift + A` | | Footer | Click the faint `···` bottom-right of the footer | **Default PIN:** `tw2024` To change it, edit `ADMIN_PIN` in `src/constants.ts`. --- ## 🗄️ Supabase Setup ### 1. Create a project Sign up at supabase.com → New Project. …