# Dartle

Dartle is an AI-powered, all-in-one soccer academy management platform. This repository contains the public-facing marketing and support website, built as a single-page React application using Vite, TypeScript, Tailwind CSS, and shadcn-ui. The site presents product information, features, integrations, blog content, careers, registration, and customer support (including an Azure OpenAI-powered chat widget).

## Project Setup & Configuration

- [README.md](README.md): Project overview, Lovable platform info, and local development setup steps.
- [package.json](package.json): Dependencies (React 18, React Router, Radix UI, shadcn, Tailwind, Framer Motion, etc.) and npm scripts (`dev`, `build`, `lint`, `preview`).
- [vite.config.ts](vite.config.ts): Vite configuration including dev server port (8080), `/api` proxy to localhost:9090, and `@` path alias to `src/`.
- [tsconfig.json](tsconfig.json) / [tsconfig.app.json](tsconfig.app.json) / [tsconfig.node.json](tsconfig.node.json): TypeScript compiler configurations.
- [tailwind.config.ts](tailwind.config.ts): Tailwind CSS theme, colors, plugins (typography, animate, scrollbar-hide).
- [postcss.config.js](postcss.config.js): PostCSS config wiring Tailwind and autoprefixer.
- [eslint.config.js](eslint.config.js): ESLint rules for TS + React.
- [components.json](components.json): shadcn-ui CLI configuration (component aliases and styling).
- [index.html](index.html): HTML entry point with meta tags and the `gptengineer.js` Lovable script.

## Application Entry Points

- [src/main.tsx](src/main.tsx): React DOM root creation, BrowserRouter setup, Suspense fallback loader, and top-level error UI.
- [src/App.tsx](src/App.tsx): Root `App` component with `ErrorBoundary`, `Suspense`, route rendering loop, and Sonner `Toaster`.
- [src/App.css](src/App.css) / [src/index.css](src/index.css): Global styles and Tailwind layer directives.
- [src/vite-env.d.ts](src/vite-env.d.ts): Vite client type references.

## Routing

- [src/routes/index.ts](src/routes/index.ts): Central route table mapping URL paths to page components (home, about, features, FAQ, blog, support, registration, careers, integrations, etc.).
- [src/routes/staticPaths.ts](src/routes/staticPaths.ts): Static path list consumed by the sitemap generator.
- [generate-sitemap.ts](generate-sitemap.ts): Node script that generates `public/sitemap.xml` from static paths + blog post slugs.

## Pages

- [src/pages/Index.tsx](src/pages/Index.tsx): Home page composing Hero, HowDartleWorks, ProductDemo, CaseStudies, Contact, etc.
- [src/pages/About.tsx](src/pages/About.tsx): About page (company/team info).
- [src/pages/Features.tsx](src/pages/Features.tsx): Product features page.
- [src/pages/AcademyGuides.tsx](src/pages/AcademyGuides.tsx): Guides for academies.
- [src/pages/FAQ.tsx](src/pages/FAQ.tsx): FAQ page with search and accordion.
- [src/pages/Blog.tsx](src/pages/Blog.tsx): Blog listing page.
- [src/pages/BlogPost.tsx](src/pages/BlogPost.tsx): Dynamic blog post detail page (`/blog/:slug`).
- [src/pages/Support.tsx](src/pages/Support.tsx): Customer support hub (chat widget, categories, contact form).
- [src/pages/Registration.tsx](src/pages/Registration.tsx): Registration / signup flow.
- [src/pages/Careers.tsx](src/pages/Careers.tsx): Careers page with `JobApplicationForm`.
- [src/pages/Integrations.tsx](src/pages/Integrations.tsx): Partner integrations page.
- [src/pages/ComingSoon.tsx](src/pages/ComingSoon.tsx): Placeholder for unfinished routes.
- [src/pages/CreateAcademy.tsx](src/pages/CreateAcademy.tsx): Academy onboarding/creation page.
- [src/pages/SLKSummerCamp.tsx](src/pages/SLKSummerCamp.tsx): SLK Summer Camp landing page.
- [src/pages/NotFound.tsx](src/pages/NotFound.tsx): 404 catch-all route.
- [src/pages/Fallback.tsx](src/pages/Fallback.tsx): Suspense / ErrorBoundary fallback UI.

## Feature Components

- [src/components/Header.tsx](src/components/Header.tsx) / [src/components/Footer.tsx](src/components/Footer.tsx): Site chrome.
- [src/components/Hero.tsx](src/components/Hero.tsx) / [src/components/HeroParticles.tsx](src/components/HeroParticles.tsx) / [src/components/GridHero.tsx](src/components/GridHero.tsx): Hero variants.
- [src/components/HowDartleWorks.tsx](src/components/HowDartleWorks.tsx): "How it works" section.
- [src/components/ProblemSolutionSection.tsx](src/components/ProblemSolutionSection.tsx) / [src/components/Solutions.tsx](src/components/Solutions.tsx): Problem/solution narrative.
- [src/components/FeaturesGrid.tsx](src/components/FeaturesGrid.tsx) / [src/components/FeatureCard.tsx](src/components/FeatureCard.tsx): Feature grid + card.
- [src/components/AIDifferentiator.tsx](src/components/AIDifferentiator.tsx) / [src/components/WhyDartleSection.tsx](src/components/WhyDartleSection.tsx): Positioning sections.
- [src/components/ProductDemo.tsx](src/components/ProductDemo.tsx) / [src/components/CommunityVideo.tsx](src/components/CommunityVideo.tsx) / [src/components/TeamVideo.tsx](src/components/TeamVideo.tsx) / [src/components/ParallaxVideo.tsx](src/components/ParallaxVideo.tsx): Media sections.
- [src/components/StatsDashboard.tsx](src/components/StatsDashboard.tsx) / [src/components/StatsDashboardLite.tsx](src/components/StatsDashboardLite.tsx) / [src/components/StatsDashboardMobile.tsx](src/components/StatsDashboardMobile.tsx) / [src/components/MobileDashboards.tsx](src/components/MobileDashboards.tsx) / [src/components/SolutionMobileDashboards.tsx](src/components/SolutionMobileDashboards.tsx) / [src/components/ScoutingDashboard.tsx](src/components/ScoutingDashboard.tsx) / [src/components/MobileScoutDashboard.tsx](src/components/MobileScoutDashboard.tsx) / [src/components/SessionManagementDashboard.tsx](src/components/SessionManagementDashboard.tsx) / [src/components/SummaryDashboard.tsx](src/components/SummaryDashboard.tsx) / [src/components/FeeDashboard.tsx](src/components/FeeDashboard.tsx): Product dashboard previews.
- [src/components/ProofOfImpact.tsx](src/components/ProofOfImpact.tsx) / [src/components/CaseStudies.tsx](src/components/CaseStudies.tsx) / [src/components/ClientLogos.tsx](src/components/ClientLogos.tsx): Social proof.
- [src/components/PartnerIntegrations.tsx](src/components/PartnerIntegrations.tsx) / [src/components/PartnerCard.tsx](src/components/PartnerCard.tsx): Partner integrations.
- [src/components/TeamCard.tsx](src/components/TeamCard.tsx) / [src/components/TransformAcademySection.tsx](src/components/TransformAcademySection.tsx) / [src/components/WhiteTransitionSection.tsx](src/components/WhiteTransitionSection.tsx): Misc sections.
- [src/components/FAQSection.tsx](src/components/FAQSection.tsx) / [src/components/FAQSearch.tsx](src/components/FAQSearch.tsx) / [src/components/FAQIllustration.tsx](src/components/FAQIllustration.tsx): FAQ-specific UI.
- [src/components/Contact.tsx](src/components/Contact.tsx): Contact CTA with Zoho integration.
- [src/components/JobApplicationForm.tsx](src/components/JobApplicationForm.tsx): Careers application form.
- [src/components/CTAButton.tsx](src/components/CTAButton.tsx) / [src/components/AnimatedText.tsx](src/components/AnimatedText.tsx): Shared UI primitives.

## Support Module

- [src/components/support/SupportHero.tsx](src/components/support/SupportHero.tsx): Support page hero banner.
- [src/components/support/SupportCategories.tsx](src/components/support/SupportCategories.tsx): Category tiles linking to help topics.
- [src/components/support/PopularArticles.tsx](src/components/support/PopularArticles.tsx): List of popular help articles.
- [src/components/support/ContactForm.tsx](src/components/support/ContactForm.tsx): Support contact form.
- [src/components/support/ChatWidget.tsx](src/components/support/ChatWidget.tsx): AI-powered support chat using Azure OpenAI.

## UI Primitives (shadcn-ui)

- [src/components/ui/](src/components/ui/): Re-usable Radix-based primitives — accordion, alert, button, card, dialog, drawer, dropdown-menu, form, input, popover, select, sheet, sonner, table, tabs, toast, tooltip, and more. Generated/extended via shadcn-ui config in [components.json](components.json).

## Hooks, Services & Utilities

- [src/services/azureOpenAI.ts](src/services/azureOpenAI.ts): Client for Azure OpenAI chat completions used by the support `ChatWidget`. NOTE: contains an inline API key — should be moved to env vars.
- [src/hooks/use-job-application.ts](src/hooks/use-job-application.ts): Hook posting careers applications to an Azure Logic App webhook.
- [src/hooks/use-toast.ts](src/hooks/use-toast.ts): Toast notification hook (shadcn).
- [src/hooks/use-mobile.tsx](src/hooks/use-mobile.tsx): Viewport-based mobile breakpoint detection.
- [src/lib/utils.ts](src/lib/utils.ts): `cn()` Tailwind class-merge utility.

## Data & Types

- [src/data.ts](src/data.ts): Blog post content, case studies, and other static content powering the site.
- [src/data/academyFeatures.config.tsx](src/data/academyFeatures.config.tsx): Feature definitions shown to academies on the home page.
- [src/data/parentFeatures.config.tsx](src/data/parentFeatures.config.tsx): Feature definitions shown to parents on the home page.
- [src/types/features.ts](src/types/features.ts): `Feature` type shared by feature grids.
- [src/types/razorpay.d.ts](src/types/razorpay.d.ts): Type declarations for the Razorpay payment SDK global.

## Static Assets & Legal

- [public/sitemap.xml](public/sitemap.xml): Generated sitemap (output of `generate-sitemap.ts`).
- [public/privacy-policy.html](public/privacy-policy.html): Privacy policy.
- [public/terms-and-conditions.html](public/terms-and-conditions.html): Terms and conditions.
- [public/refund-policy.html](public/refund-policy.html): Refund policy.
- [public/lovable-uploads/](public/lovable-uploads/): User/media uploads referenced by blog and marketing pages.
- [particlesjs-config.ts](particlesjs-config.ts): tsparticles configuration powering hero particle backgrounds.

## External References

- Lovable project: https://lovable.dev/projects/42756feb-6fd5-4bd0-8959-13275f38379c
- Production site: https://dartle.app
- shadcn-ui docs: https://ui.shadcn.com
- Vite docs: https://vitejs.dev
- React Router docs: https://reactrouter.com
- Tailwind CSS docs: https://tailwindcss.com/docs