[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Plus_Jakarta_Sans } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const plusJakarta = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700", "800"] }); export const metadata: Metadata = { title: 'FasoBoost - Votre diplôme est votre garantie', description: 'Plateforme de micro-financement solidaire pour jeunes diplômés burkinabè. Financements de 200.000 F à 10.000.000 F CFA sans caution immobilière.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); /* FasoBoost - Couleurs du Burkina Faso */ /* Rouge: #DC2626, Vert: #16A34A, Jaune/Or: #EAB308 */ :root { --background: #0c1220; --foreground: #ffffff; --card: rgba(22, 33, 54, 0.8); --card-foreground: #ffffff; --popover: #162136; --popover-foreground: #ffffff; --primary: #16A34A; --primary-foreground: #ffffff; --secondary: #162136; --secondary-foreground: #ffffff; --muted: #1e3a5f; --muted-foreground: #cbd5e1; --accent: #EAB308; --accent-foreground: #0c1220; --destructive: #DC2626; --destructive-foreground: #ffffff; --border: rgba(255, 255, 255, 0.15); --input: rgba(255, 255, 255, 0.1); --ring: #16A34A; --chart-1: #16A34A; --chart-2: #EAB308; --chart-3: #DC2626; --chart-4: #3b82f6; --chart-5: #f97316; --radius: 0.75rem; --sidebar: #0c1220; --sidebar-foreground: #ffffff; --sidebar-primary: #16A34A; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #162136; --sidebar-accent-foreground: #ffffff; --sidebar-border: rgba(255, 255, 255, 0.15); --sidebar-ring: #16A34A; /* Burkina Faso Flag Colors */ --bf-green: #16A34A; --bf-red: #DC2626; --bf-yellow: #EAB308; } @theme inline { --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Geist Mono', monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/fasoboost/concept-section.tsx" isMerged="true" import { GraduationCap, Building2, CheckCircle2, XCircle } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" export function ConceptSection() { return (

{/* Background decoration with Burkina colors */}

{/* Section Header */}

Le Concept

Un systeme base sur le merite professionnel

FasoBoost revolutionne l'acces au financement en valorisant votre formation et vos competences, pas vos biens immobiliers.

{/* Comparison Cards with Burkina colors */}

{/* Traditional Banking */}

Systeme bancaire classique

{[ "Exige une garantie immobiliere", "Taux d'interet eleves (15-20%)", "Processus long et complexe", "Refuse les jeunes sans patrimoine", ].map((item, index) => (

{item}

))} {/* FasoBoost */}

FasoBoost

{[ "Votre diplome = votre garantie", "Taux solidaire de 8% uniquement", "A partir de 200.000 F CFA", "Concu pour les jeunes diplomes", ].map((item, index) => (

{item}

))}

{/* Image section with Burkina flag accent */}

Groupe de jeunes entrepreneurs burkinabe

Rejoignez la communaute

Des dizaines de jeunes comme vous ont deja lance leur activite

{/* Eligible Professions */}

Metiers eligibles

{["Mecanique", "Couture", "Soudure", "Numerique", "Electricite", "Menuiserie", "Coiffure", "Restauration"].map( (metier, index) => ( {metier} ) )} + bien d'autres

) } [V0_FILE]typescriptreact:file="components/fasoboost/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" export function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const navLinks = [ { href: "#concept", label: "Le Concept" }, { href: "#solidarite", label: "Solidarité" }, { href: "#tarifs", label: "Tarifs" }, { href: "#candidature", label: "Candidature" }, ] return (

{/* Logo with Burkina flag colors */}

FasoBoost {/* Desktop Navigation */} {/* CTA Button */}

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/fasoboost/stats-bar.tsx" isMerged="true" import { ShieldCheck, Percent, Briefcase, Banknote } from "lucide-react" const stats = [ { icon: ShieldCheck, value: "0", suffix: "%", label: "Garantie immobiliere", color: "#16A34A", bgColor: "bg-[#16A34A]/15", borderColor: "border-[#16A34A]/40", }, { icon: Banknote, value: "200", suffix: "K", label: "Financement de base", color: "#EAB308", bgColor: "bg-[#EAB308]/15", borderColor: "border-[#EAB308]/40", }, { icon: Percent, value: "8", suffix: "%", label: "Taux solidaire unique", color: "#DC2626", bgColor: "bg-[#DC2626]/15", borderColor: "border-[#DC2626]/40", }, { icon: Briefcase, value: "100", suffix: "+", label: "Metiers eligibles", color: "#16A34A", bgColor: "bg-[#16A34A]/10", borderColor: "border-[#16A34A]/30", }, ] export function StatsBar() { return (

{stats.map((stat, index) => (

{stat.value}{stat.suffix}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/fasoboost/hero-section.tsx" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ArrowRight, Shield, Sparkles, Zap } from "lucide-react" import Link from "next/link" import Image from "next/image" export function HeroSection() { return (

{/* Background with Burkina colors gradient */}

{/* Animated gradient orbs with Burkina flag colors */}

{/* Left Content */}

{/* Badges with Burkina colors */}

ZERO Garantie Financement rapide

{/* Main Headline with Burkina flag gradient */}

Votre diplome est{" "} votre garantie

{/* Subheadline */}

Plateforme de micro-financement solidaire pour jeunes diplomes burkinabe. Lancez votre activite professionnelle sans caution immobiliere.

{/* Amount Display with Burkina colors */}

Financement de base

200.000

F CFA

Jusqu'a

10,000,000

F CFA

{/* Taux solidaire with Burkina gradient */}

Taux solidaire unique : 8% pour aider les suivants

{/* CTA Buttons with Burkina colors */}

{/* Right Content - Image Grid */}

{/* Main Image with Burkina flag border accent */}

Jeune entrepreneur burkinabe souriant devant son atelier

{/* Overlay gradient */}

{/* Floating stat card */}

Rejoignez la communaute

Des centaines de jeunes entrepreneurs deja finances

{/* Floating secondary image */}

{/* Decorative elements with Burkina colors */}

{/* Trust Indicators with Burkina flag */}

Propulse par des professionnels engages du

{/* Mini Burkina flag */}

Burkina Faso

Micro-Finance Solidaire

) } [V0_FILE]typescriptreact:file="components/fasoboost/solidarity-section.tsx" isMerged="true" import { ArrowRight, Heart, RefreshCw, Users } from "lucide-react" export function SolidaritySection() { return (

{/* Background decoration with Burkina colors */}

{/* Section Header */}

Solidarite

Le 8% qui change tout

Votre remboursement ne finance pas des actionnaires, mais la prochaine generation d'entrepreneurs burkinabe.

{/* Circular Model Visualization with Burkina colors */}

{/* Main Card */}

{/* Step 1 - Green */}

Vous recevez

Un financement de 200.000 F a 10M F CFA

{/* Arrow - Yellow */}

{/* Step 2 - Yellow */}

Vous remboursez

Capital + 8% qui alimente le fonds solidaire

{/* Arrow down - Red heart */}

{/* Result */}

Un autre jeune peut lancer son projet

Votre reussite devient le tremplin de la reussite d'un autre. C'est ca, la solidarite FasoBoost.

{/* Key Benefits with Burkina colors */}

{[ { title: "Pas de profit", description: "Les 8% ne servent qu'a financer d'autres projets", color: "#16A34A", }, { title: "Modele circulaire", description: "L'argent reste dans la communaute des entrepreneurs", color: "#EAB308", }, { title: "Impact mesurable", description: "Chaque remboursement cree une nouvelle opportunite", color: "#DC2626", }, ].map((benefit, index) => (

{benefit.title}

{benefit.description}

))}

) } [V0_FILE]typescriptreact:file="components/fasoboost/pricing-section.tsx" isMerged="true" import { Check, CreditCard, Calendar, Banknote } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" export function PricingSection() { return (

{/* Background decoration with Burkina colors */}

{/* Section Header */}

Tarification

Des frais transparents et accessibles

Aucun frais cache. Vous savez exactement ce que vous payez et pourquoi.

{/* Financing highlight with Burkina gradient */}

Financement de base : 200.000 F CFA

Jusqu'a 10.000.000 F CFA selon votre projet et votre profil

{/* Pricing Cards with Burkina colors */}

{/* Adhesion Fee - Green */}

Unique

Frais d'adhesion Paye une seule fois a l'inscription

15.000 F CFA

{feature}

{/* Monthly Coaching - Yellow */}

Mensuel

Mensualite coaching Accompagnement continu pour votre reussite

5.000 F CFA / mois

{feature}

{/* Important Note */}

Note : Ces frais sont distincts du remboursement de votre financement. Le taux solidaire de 8% s'applique uniquement sur le montant finance.

) } [V0_FILE]typescriptreact:file="components/fasoboost/application-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Send, MessageCircle, CheckCircle2 } from "lucide-react" const specialites = [ "Mécanique automobile", "Couture / Mode", "Soudure / Métallurgie", "Développement numérique", "Électricité / Électronique", "Menuiserie / Ébénisterie", "Coiffure / Esthétique", "Restauration / Cuisine", "Agriculture / Élevage", "Autre", ] const budgets = [ "200,000 - 500,000 F CFA", "500,000 - 1,000,000 F CFA", "1,000,000 - 3,000,000 F CFA", "3,000,000 - 5,000,000 F CFA", "5,000,000 - 10,000,000 F CFA", ] export function ApplicationForm() { const [formData, setFormData] = useState({ nom: "", specialite: "", budget: "", projet: "", }) const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Generate WhatsApp message const message = encodeURIComponent( `*Nouvelle candidature FasoBoost*\n\n` + `*Nom complet:* ${formData.nom}\n` + `*Spécialité:* ${formData.specialite}\n` + `*Budget demandé:* ${formData.budget}\n\n` + `*Description du projet:*\n${formData.projet}` ) // Open WhatsApp with pre-filled message window.open(`https://wa.me/22656630463?text=${message}`, "_blank") setIsSubmitted(true) } const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } if (isSubmitted) { return (

Candidature envoyée !

Votre demande a été transmise via WhatsApp. Notre équipe vous contactera dans les plus brefs délais.

) } return (

{/* Background decoration with Burkina colors */}

{/* Section Header */}

Candidature

Lancez votre projet aujourd'hui

Remplissez le formulaire ci-dessous et notre equipe vous contactera pour evaluer votre dossier.

Financement de base : 200.000 F CFA

{/* Form */}

Formulaire de candidature Vos informations seront envoyees directement via WhatsApp

{/* Name */}

Nom complet * handleInputChange("nom", e.target.value)} required className="bg-input border-border text-foreground placeholder:text-muted-foreground focus:ring-primary" />

{/* Specialty */}

Spécialité / Métier *

{/* Budget */}

Budget demandé *

{/* Project Description */}

Décrivez votre projet *

handleInputChange("projet", e.target.value)}
                    required
                    rows={5}
                    className="bg-input border-border text-foreground placeholder:text-muted-foreground focus:ring-primary resize-none"
                  />
                </div>

{/* Submit Button */}
                <Button
                  type="submit"
                  size="lg"
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-6 text-lg group"
                  disabled={!formData.nom || !formData.specialite || !formData.budget || !formData.projet}
                >
                  <Send className="mr-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
                  Envoyer via WhatsApp
                </Button>

{/* WhatsApp Note */}
                <p className="text-center text-muted-foreground text-sm">
                  En cliquant sur ce bouton, WhatsApp s'ouvrira avec votre candidature pré-remplie.
                </p>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Header } from "@/components/fasoboost/header"
import { HeroSection } from "@/components/fasoboost/hero-section"
import { StatsBar } from "@/components/fasoboost/stats-bar"
import { ConceptSection } from "@/components/fasoboost/concept-section"
import { SolidaritySection } from "@/components/fasoboost/solidarity-section"
import { PricingSection } from "@/components/fasoboost/pricing-section"
import { ApplicationForm } from "@/components/fasoboost/application-form"
import { Footer } from "@/components/fasoboost/footer"

export default function FasoBoostPage() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main>
        <HeroSection />
        <StatsBar />
        <ConceptSection />
        <SolidaritySection />
        <PricingSection />
        <ApplicationForm />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]jpg:file="public/images/entrepreneurs-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/entrepreneurs-group-hH3LTJYsFVhjRbarjIg8TapcaH9WB9.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/hero-entrepreneur.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/hero-entrepreneur-kZgOHEBU9xIeAov4GE7OY2W4AAL1A6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/success-story.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/success-story-LXYAU9fo6gO3EKxT7wlPHBtGsAd6FN.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/fasoboost/footer.tsx"
import Link from "next/link"
import { Phone, MapPin, Mail } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-gradient-to-t from-[#080d17] to-[#0c1220] border-t border-white/10 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-3 gap-8 mb-8">
          {/* Brand with Burkina flag logo */}
          <div>
            <Link href="/" className="flex items-center gap-2 mb-4">
              <div className="relative w-10 h-10 rounded-xl overflow-hidden shadow-lg">
                <div className="absolute inset-0 bg-gradient-to-b from-[#DC2626] via-[#DC2626] to-[#16A34A]" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <span className="text-[#EAB308] font-bold text-xl drop-shadow-lg">F</span>
                </div>
              </div>
              <span className="text-xl font-bold text-white">
                Faso<span className="text-[#16A34A]">Boost</span>
              </span>
            </Link>
            <p className="text-gray-300 text-sm leading-relaxed">
              Plateforme de micro-financement solidaire pour jeunes diplomes burkinabe. 
              Votre diplome est votre garantie.
            </p>
            <div className="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#16A34A]/20 border border-[#16A34A]/40">
              <span className="text-gray-300 text-xs">Financement de base :</span>
              <span className="text-[#4ade80] font-bold text-sm">200.000 F</span>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h4 className="text-white font-semibold mb-4">Liens rapides</h4>
            <nav className="flex flex-col gap-2">
              <Link href="#concept" className="text-gray-300 hover:text-[#EAB308] text-sm transition-colors">
                Le Concept
              </Link>
              <Link href="#solidarite" className="text-gray-300 hover:text-[#EAB308] text-sm transition-colors">
                Solidarite
              </Link>
              <Link href="#tarifs" className="text-gray-300 hover:text-[#EAB308] text-sm transition-colors">
                Tarifs
              </Link>
              <Link href="#candidature" className="text-gray-300 hover:text-[#EAB308] text-sm transition-colors">
                Candidature
              </Link>
            </nav>
          </div>

{/* Contact with Burkina colors */}
          <div>
            <h4 className="text-white font-semibold mb-4">Contact</h4>
            <div className="space-y-3">
              <div className="flex items-center gap-3 text-gray-300 text-sm">
                <Phone className="w-4 h-4 text-[#16A34A]" />
                <span>+226 56 63 04 63</span>
              </div>
              <div className="flex items-center gap-3 text-gray-300 text-sm">
                <Mail className="w-4 h-4 text-[#EAB308]" />
                <span>fabocontact226@gmail.com</span>
              </div>
              <div className="flex items-center gap-3 text-gray-300 text-sm">
                <MapPin className="w-4 h-4 text-[#DC2626]" />
                <span>Bobo-Dioulasso, Burkina Faso</span>
              </div>
            </div>
          </div>
        </div>

{/* Bottom Bar with mini flag */}
        <div className="pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-gray-400 text-sm text-center sm:text-left">
            2026 FasoBoost. Tous droits reserves.
          </p>
          <div className="flex items-center gap-3">
            <span className="text-gray-400 text-sm">Fait avec coeur au</span>
            {/* Mini Burkina flag */}
            <div className="flex items-center gap-1">
              <div className="w-4 h-3 rounded-sm bg-[#DC2626]" />
              <div className="w-4 h-3 rounded-sm bg-[#16A34A]" />
            </div>
            <span className="text-white font-semibold">Burkina Faso</span>
          </div>
        </div>
      </div>
    </footer>
  )
}</article></body></html>