shileodebode/digitalloop-manus-website

A modern SaaS-style marketing website for Digital Loop Int'l Limited, an African AI education and consulting company. Features 7 pages, conversion-focused design, integrations with Tally, Paystack, Stripe, Calendly, Tidio, and MailerLite, plus SEO optimization and mobile-first responsiveness. · Built with Manus # Digital Loop Int'l Limited - Marketing Website A production-quality marketing website for Digital Loop, an African AI education and consulting company. Built with React 19, TypeScript, Tailwind CSS 4, and Express.js. ## 🚀 Quick Start ### Development ```bash pnpm install pnpm dev ``` The dev server runs on `localhost` ### Build & Deploy ```bash pnpm build pnpm start ``` --- ## 📋 Project Structure ``` client/ ├── src/ │ ├── pages/ # 7 main pages (Home, Academy, Business, Projects, Masterclass, About, Contact) │ ├── components/ # Reusable components (Navigation, Footer, CTAs, Forms, etc.) │ ├── contexts/ # React contexts │ ├── lib/ # tRPC client setup │ ├── App.tsx # Main app with routing │ └── index.css # Global styles with brand colors ├── public/ # Static assets (favicon, robots.txt) └── index.html # HTML template with Plausible analytics server/ ├── routers.ts # tRPC procedures ├── db.ts # Database queries └── _core/ # Framework plumbing (OAuth, context, etc.) shared/ ├── constants.ts # Brand colors, navigation links, content └── integrations.ts # Third-party service credentials drizzle/ └── schema.ts # Database schema --- ## 🎨 Design System ### Brand Colors - **Primary**: #F15A29 (Orange) - **Secondary**: #1C8ACB (Blue) - **Accent/Dark**: #0B2545 (Dark Blue) - **Background**: #FFFFFF & #F5F7FA (Light Gray) ### Typography - **Headings**: Space Grotesk - **Body**: Inter ### Components - Rounded corners: 8–12px - Soft shadows throughout - Generous white space - Subtle scroll animations (Framer Motion) --- ## 📄 Pages Overview ### 1. Home (`/`) - Hero section with primary CTA - Trust bar with client logos - "The Shift" market opportunity section - Three paths (Academy, Business, Projects) - Featured program card - Projects grid preview (6 cards) - How it works (4-step process) - Testimonials …