[V0_FILE]typescriptreact:file="components/logo.tsx" import { LogoIcon } from "./logo-icon" interface LogoProps { className?: string } export function Logo({ className = "" }: LogoProps) { return (

Atoll Project

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" import type { ReactNode } from "react" interface DashboardHeaderProps { heading: string text?: string children?: ReactNode } export function DashboardHeader({ heading, text, children }: DashboardHeaderProps) { return (

{heading}

{text &&

{text}

}

{children}

) } [V0_FILE]typescriptreact:file="components/marketing-budget-calculator.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Card, CardContent } from "@/components/ui/card" import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "@/components/ui/chart" export function MarketingBudgetCalculator() { const [totalBudget, setTotalBudget] = useState(5000) const [allocations, setAllocations] = useState({ socialMedia: 30, contentMarketing: 25, emailMarketing: 15, paidAdvertising: 20, seo: 10, }) const handleAllocationChange = (key: keyof typeof allocations, value: number[]) => { setAllocations({ ...allocations, [key]: value[0], }) } const calculateAmount = (percentage: number) => { return Math.round((percentage / 100) * totalBudget) } const data = [ { name: "Social Media", value: allocations.socialMedia }, { name: "Content Marketing", value: allocations.contentMarketing }, { name: "Email Marketing", value: allocations.emailMarketing }, { name: "Paid Advertising", value: allocations.paidAdvertising }, { name: "SEO", value: allocations.seo }, ] const COLORS = ["#22c55e", "#16a34a", "#15803d", "#166534", "#14532d"] return (

Total Monthly Budget ($) setTotalBudget(Number(e.target.value))} />

Social Media ${calculateAmount(allocations.socialMedia)}

handleAllocationChange("socialMedia", value)} />

Content Marketing ${calculateAmount(allocations.contentMarketing)}

handleAllocationChange("contentMarketing", value)} />

Email Marketing ${calculateAmount(allocations.emailMarketing)}

handleAllocationChange("emailMarketing", value)} />

Paid Advertising ${calculateAmount(allocations.paidAdvertising)}

handleAllocationChange("paidAdvertising", value)} />

SEO ${calculateAmount(allocations.seo)}

handleAllocationChange("seo", value)} />

`${name} ${(percent * 100).toFixed(0)}%`} > {data.map((entry, index) => ( ))} `$${calculateAmount(Number(value))}`} />

) } [V0_FILE]typescriptreact:file="components/team-recommendations.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" export function TeamRecommendations() { const teamRoles = [ { title: "Marketing Coordinator", description: "Oversees all marketing activities and coordinates between different channels.", skills: ["Project Management", "Marketing Strategy", "Analytics"], priority: "High", salary: "$3,000 - $4,000/month", type: "Full-time", }, { title: "Content Creator", description: "Creates engaging content for social media, blog posts, and email campaigns.", skills: ["Copywriting", "Graphic Design", "Social Media"], priority: "High", salary: "$25 - $35/hour", type: "Part-time/Freelance", }, { title: "Digital Ads Specialist", description: "Manages paid advertising campaigns across different platforms.", skills: ["PPC", "Facebook Ads", "Google Ads"], priority: "Medium", salary: "$30 - $50/hour", type: "Freelance", }, ] return (

AI-Recommended Team Structure

Based on your budget of $5,000/month and marketing goals, we recommend the following team structure:

{teamRoles.map((role, index) => (

{role.title} {role.type}

{role.priority} Priority

{role.description}

Budget: {role.salary}

{role.skills.map((skill, skillIndex) => ( {skill} ))}

))}

Alternative Options

Marketing Agency Outsource to a specialized agency

For the same budget, you could hire a small marketing agency to handle all your marketing needs.

Estimated Cost: $4,000 - $5,000/month

Pros: Full-service, experienced team

Cons: Less control, potential higher costs long-term

AI-Powered Marketing Tools Leverage technology with minimal human resources

Invest in AI marketing tools and platforms with a minimal team to oversee operations.

Estimated Cost: $2,000 - $3,000/month

Pros: Cost-effective, scalable

Cons: Requires technical knowledge, less personalized

) } [V0_FILE]typescriptreact:file="components/marketing-strategies.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" export function MarketingStrategies() { const strategies = { socialMedia: { title: "Social Media Strategy", description: "Focus on organic growth and community building with targeted content.", channels: ["Instagram", "LinkedIn", "TikTok"], budget: 1500, tasks: [ { name: "Content Calendar Creation", status: "In Progress", completion: 65 }, { name: "Audience Research", status: "Completed", completion: 100 }, { name: "Engagement Strategy", status: "Not Started", completion: 0 }, { name: "Analytics Setup", status: "In Progress", completion: 40 }, ], kpis: ["Follower Growth", "Engagement Rate", "Click-through Rate"], }, contentMarketing: { title: "Content Marketing Strategy", description: "Create valuable content that attracts and retains a clearly defined audience.", channels: ["Blog", "YouTube", "Podcast"], budget: 1250, tasks: [ { name: "Content Audit", status: "Completed", completion: 100 }, { name: "Keyword Research", status: "Completed", completion: 100 }, { name: "Content Creation", status: "In Progress", completion: 30 }, { name: "Distribution Plan", status: "Not Started", completion: 0 }, ], kpis: ["Organic Traffic", "Time on Page", "Conversion Rate"], }, emailMarketing: { title: "Email Marketing Strategy", description: "Build relationships with subscribers through personalized email campaigns.", channels: ["Newsletter", "Automated Sequences", "Promotional Emails"], budget: 750, tasks: [ { name: "Email Template Design", status: "In Progress", completion: 80 }, { name: "Subscriber Segmentation", status: "In Progress", completion: 50 }, { name: "Automation Setup", status: "Not Started", completion: 0 }, { name: "A/B Testing Plan", status: "Not Started", completion: 0 }, ], kpis: ["Open Rate", "Click Rate", "Conversion Rate"], }, paidAdvertising: { title: "Paid Advertising Strategy", description: "Target specific audiences with paid ads across multiple platforms.", channels: ["Google Ads", "Facebook Ads", "LinkedIn Ads"], budget: 1000, tasks: [ { name: "Campaign Structure", status: "In Progress", completion: 70 }, { name: "Ad Creative Development", status: "In Progress", completion: 40 }, { name: "Audience Targeting", status: "Completed", completion: 100 }, { name: "Budget Allocation", status: "In Progress", completion: 60 }, ], kpis: ["Cost per Click", "Conversion Rate", "Return on Ad Spend"], }, } const renderStrategy = (strategy: any) => (

{strategy.title}

${strategy.budget}/month

{strategy.description}

Channels

{strategy.channels.map((channel: string, index: number) => ( {channel} ))}

Implementation Tasks

{strategy.tasks.map((task: any, index: number) => (

{task.name} {task.status}

))}

Key Performance Indicators

{kpi}

) return (

Social Media Content Email Paid Ads {renderStrategy(strategies.socialMedia)} {renderStrategy(strategies.contentMarketing)} {renderStrategy(strategies.emailMarketing)} {renderStrategy(strategies.paidAdvertising)} AI Strategy Recommendations Based on your business goals and budget constraints, our AI suggests the following adjustments:

✓ Increase content marketing budget by 10% and reduce paid advertising by 5% for better long-term ROI.
✓ Focus on Instagram and TikTok for social media as they show higher engagement rates for your target audience.
✓ Implement email automation sequences to reduce manual work while maintaining personalization.

) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" import type React from "react" export const PieChart = ({ children }: { children: React.ReactNode }) => { return

{children}

} export const Pie = ({ data, cx, cy, outerRadius, fill, dataKey, label, children, }: { data: any[] cx: string cy: string outerRadius: number fill: string dataKey: string label: any children?: React.ReactNode }) => { return {children} } export const Cell = ({ fill }: { fill: string }) => { return } export const ResponsiveContainer = ({ width, height, children, }: { width: string; height: string; children: React.ReactNode }) => { return

{children}

} export const Legend = () => { return

Legend

} export const Tooltip = ({ formatter }: { formatter: (value: number) => string }) => { return

Tooltip

} [V0_FILE]plaintext:file="public/images/dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture%20d%E2%80%99%C3%A9cran%202025-04-04%20184213-HTFQHbIhByhOUIfC0PqcJMZ5fxSfuw.png" [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { MarketingBudgetCalculator } from "@/components/marketing-budget-calculator" import { TeamRecommendations } from "@/components/team-recommendations" import { MarketingStrategies } from "@/components/marketing-strategies" import { DashboardHeader } from "@/components/dashboard-header" import { DashboardShell } from "@/components/dashboard-shell" export default function DashboardPage() { return (

Total Budget

$5,000

Monthly allocation

Team Members

Recommended size

Active Campaigns

Across 2 channels

ROI Forecast

+24%

Estimated return

Budget Allocation Team Structure Marketing Strategies Budget Allocation Optimize your marketing budget with AI recommendations. Team Recommendations AI-suggested team structure based on your budget and goals. Marketing Strategies AI-generated marketing strategies tailored to your business. ) } [V0_FILE]typescriptreact:file="app/mentions-legales/page.tsx" import { DashboardShell } from "@/components/dashboard-shell" export default function LegalPage() { return (

Mentions Légales

Dernière mise à jour : {new Date().toLocaleDateString("fr-FR")}

Le dit mentions légales régit par le droit Européen, informe l'utilisateur des conditions de créations de contenus.

Le site Atoll Project (ci-après le « Site internet ») est un site de mise en relations commerciales en rédaction de contenu de vente pour le compte personnel ou avec ses partenariats qui proviennent de diverses sociétés. Atoll Project a pour objectif d'obtenir les meilleurs tarifs pour un meilleur service en matière de rédaction de contenu de vente.

Contact technique du site Atoll Project

Charles Van den driessche

Skype : Atoll Project

N° de téléphone : 07 60 40 55 73

Mail : vandendriesschecharles@gmail.com

L'éditeur et l'exploitant du site agissent sous la forme d'une activité libérale indépendante (Siret : 53 219 655 700 013) dont le numéro de TVA est FR35488458969.

HÉBERGEMENT

SAS au capital de 10 174 560 €

RCS Lille Métropole 424 761 419 00045

Code APE 2620Z

N° TVA : FR 22 424 761 419

Siège social : 2 rue Kellermann – 59100 Roubaix – France

Président : Michel Paulin

USAGE DES DROITS DE PROPRIÉTÉ INTELLECTUELLE

La reproduction ou la représentation, intégrale ou partielle, des pages, des données et de tout autre élément constitutif au site, par quelque procédé ou support que ce soit, est interdite et constitue sans autorisation expresse et préalable de l'éditeur une contrefaçon sanctionnée par les articles L335-2 et suivants du Code de la propriété intellectuelle. Toute utilisation du contenu et de site à des fins illégales fera l'objet de poursuites judiciaires à l'égard des contrevenants.

INFORMATIONS INDICATIVES

L'ensemble des informations figurant sur ce site sont totalement indicatives et ne peuvent engager la responsabilité de l'éditeur du site Atoll Project. Ces informations, qui ne prétendent pas à l'exhaustivité, ne sauraient valoir comme un conseil technique. Ces informations sont susceptibles de modifications à tout moment et sans préavis.

DROITS DE PROPRIÉTÉ INTELLECTUELLE

La reproduction ou la représentation, intégrale ou partielle, des pages, des données et de tout autre élément constitutif au site, par quelque procédé ou support que ce soit, est interdite et constitue sans autorisation expresse et préalable de l'éditeur une contrefaçon sanctionnée par les articles L335-2 et suivants du Code de propriété intellectuelle. Toute utilisation du contenu et de site à des fins illégales fera l'objet de poursuites judiciaires à l'égard des contrevenants.

INFORMATIONS INDICATIVES

L'ensemble des informations figurant sur ce site sont totalement indicatives et ne peuvent engager la responsabilité de l'éditeur. Ces informations, qui ne prétendent pas à l'exhaustivité, ne sauraient valoir comme un conseil technique, et doivent faire l'objet de votre part de prendre un avis d'un professionnel.

L'éditeur ne peut garantir ni leur exactitude ni leur caractère exhaustif. En conséquence, l'éditeur ne peut encourir aucune responsabilité du fait d'informations erronées, imprécises ou incomplètes ou pour les résultats qui pourraient être obtenus par l'utilisation, même partielle, de telles informations ces informations sont susceptibles de modifications à tout moment et sans préavis.

RÈGLES DE CONFIDENTIALITÉ RELATIVES A LA RGPD

Atoll Project se plie aux règles de confidentialité du droit européen. Pour ce faire, la liste des intervenants du site qui sont susceptibles de récolter des informations (sur la navigation ou pour répondre à toute question) est accessible ici.

) } [V0_FILE]typescriptreact:file="components/logo-icon.tsx" isQuickEdit="true" interface LogoIconProps { className?: string } export function LogoIcon({ className = "" }: LogoIconProps) { return (

{/* Modern Circle */}

) } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LogoIcon } from "@/components/logo-icon"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header with SEO-friendly content for crawlers */}
      <header className="border-b bg-white">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <LogoIcon className="h-8 w-8" />
            <span className="text-xl font-bold">Atoll Project</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/" className="text-sm font-medium hover:underline">
              Accueil
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline">
              Contact
            </Link>
            <Link href="/mentions-legales" className="text-sm font-medium hover:underline">
              Mentions Légales
            </Link>
          </nav>
          <div className="flex items-center gap-4">
            <Link href="/dashboard">
              <Button className="bg-[#0e7490] hover:bg-[#0c6d84]">APP</Button>
            </Link>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-white to-gray-50">
        <div className="container px-4 md:px-6">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="flex flex-col justify-center space-y-4">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                  Construisez votre équipe marketing en quelques clics
                </h1>
                <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Publier, modifier vos contenus, répondez à vos clients automatiquement sur les réseaux sociaux
                </p>
              </div>
              <div className="flex flex-col gap-2 min-[400px]:flex-row">
                <Link href="/dashboard">
                  <Button size="lg" className="w-full min-[400px]:w-auto bg-[#0e7490] hover:bg-[#0c6d84]">
                    Commencer
                  </Button>
                </Link>
              </div>
            </div>
            <div className="mx-auto lg:ml-auto flex items-center justify-center">
              <div className="rounded-lg overflow-hidden border bg-white shadow-lg">
                <Image
                  src="/images/dashboard.png"
                  alt="Interface du tableau de bord Atoll Project"
                  width={800}
                  height={500}
                  className="aspect-video object-cover w-full"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-white">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Votre marketing à portée de main
              </h2>
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Notre plateforme utilise l'intelligence artificielle avancée pour vous aider à gérer efficacement votre
                stratégie marketing.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-12">
            <Card>
              <CardHeader>
                <CardTitle>Optimisation du budget</CardTitle>
                <CardDescription>Maximisez votre impact marketing avec des ressources limitées</CardDescription>
              </CardHeader>
              <CardContent>
                <p>
                  Notre IA analyse vos contraintes budgétaires et recommande l'allocation de ressources la plus
                  efficace.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Vérification automatique</CardTitle>
                <CardDescription>Conformité avec votre charte graphique et éditoriale</CardDescription>
              </CardHeader>
              <CardContent>
                <p>
                  Notre agent IA vérifie automatiquement que tous vos contenus respectent vos paramètres et votre charte
                  graphique et éditoriale.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Réponses automatisées</CardTitle>
                <CardDescription>Interaction avec vos clients sur les réseaux sociaux</CardDescription>
              </CardHeader>
              <CardContent>
                <p>
                  Notre IA vous aide à répondre automatiquement à vos clients sur les réseaux sociaux tout en maintenant
                  votre ton et votre style.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* How It Works Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Comment ça marche</h2>
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Notre processus simple vous aide à construire et gérer votre équipe marketing efficacement.
              </p>
            </div>
          </div>
          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-12">
            <div className="flex flex-col items-center space-y-2 text-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#0e7490] text-white">
                <span className="text-xl font-bold">1</span>
              </div>
              <h3 className="text-xl font-bold">Définissez vos objectifs</h3>
              <p className="text-gray-500">
                Parlez à notre IA de votre entreprise, de votre public cible et de vos objectifs marketing.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-2 text-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#0e7490] text-white">
                <span className="text-xl font-bold">2</span>
              </div>
              <h3 className="text-xl font-bold">Fixez votre budget</h3>
              <p className="text-gray-500">
                Saisissez votre budget disponible et vos contraintes pour que l'IA puisse travailler avec.
              </p>
            </div>
            <div className="flex flex-col items-center space-y-2 text-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#0e7490] text-white">
                <span className="text-xl font-bold">3</span>
              </div>
              <h3 className="text-xl font-bold">Obtenez des recommandations</h3>
              <p className="text-gray-500">
                Recevez des recommandations générées par l'IA pour la structure de l'équipe, les rôles et les
                stratégies.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-[#e0f2fe]">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                Prêt à construire votre équipe marketing?
              </h2>
              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Commencez dès aujourd'hui et découvrez comment notre IA peut vous aider à créer une stratégie marketing
                efficace avec un budget limité.
              </p>
            </div>
            <div className="flex flex-col gap-2 min-[400px]:flex-row">
              <Link href="/dashboard">
                <Button size="lg" className="w-full min-[400px]:w-auto bg-[#0e7490] hover:bg-[#0c6d84]">
                  Commencer gratuitement
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t bg-white">
        <div className="container flex flex-col gap-6 py-8 px-4 md:px-6">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <LogoIcon className="h-6 w-6" />
              <span className="text-lg font-semibold">Atoll Project</span>
            </Link>
            <nav className="hidden md:flex gap-6">
              <Link href="/" className="text-sm font-medium hover:underline">
                Accueil
              </Link>
              <Link href="/contact" className="text-sm font-medium hover:underline">
                Contact
              </Link>
              <Link href="/mentions-legales" className="text-sm font-medium hover:underline">
                Mentions Légales
              </Link>
            </nav>
          </div>
          <div className="text-center text-sm text-gray-500">
            © {new Date().getFullYear()} Atoll Project. Tous droits réservés.
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard-shell.tsx" isQuickEdit="true"
import type { ReactNode } from "react"
import Link from "next/link"
import { LogoIcon } from "@/components/logo-icon"

interface DashboardShellProps {
  children: ReactNode
}

export function DashboardShell({ children }: DashboardShellProps) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-10 border-b bg-white">
        <div className="container flex h-16 items-center justify-between px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2">
            <LogoIcon className="h-8 w-8" />
            <span className="text-xl font-bold">Atoll Project</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/" className="text-sm font-medium hover:underline">
              Accueil
            </Link>
            <Link href="/contact" className="text-sm font-medium hover:underline">
              Contact
            </Link>
            <Link href="/mentions-legales" className="text-sm font-medium hover:underline">
              Mentions Légales
            </Link>
          </nav>
          <div className="flex items-center gap-4">
            <Link href="/dashboard">
              <span className="text-sm font-medium bg-[#0e7490] text-white px-4 py-2 rounded-md hover:bg-[#0c6d84]">
                APP
              </span>
            </Link>
          </div>
        </div>
      </header>
      <main className="flex-1 container py-6 px-4 md:px-6 space-y-6">{children}</main>
      <footer className="border-t bg-white">
        <div className="container flex justify-between py-4 px-4 md:px-6 text-sm text-gray-500">
          <div>© {new Date().getFullYear()} Atoll Project</div>
          <div className="flex gap-4">
            <Link href="/contact" className="hover:underline">
              Contact
            </Link>
            <Link href="/mentions-legales" className="hover:underline">
              Mentions Légales
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { DashboardShell } from "@/components/dashboard-shell"
import Image from "next/image"

export default function ContactPage() {
  return (
    <DashboardShell>
      <div className="mx-auto max-w-4xl space-y-8 py-8">
        <div className="space-y-2">
          <h1 className="text-3xl font-bold tracking-tight">Contact</h1>
          <p className="text-gray-500">
            Nous sommes là pour vous aider. N'hésitez pas à nous contacter pour toute question.
          </p>
        </div>

<div className="grid gap-8 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Envoyez-nous un message</CardTitle>
              <CardDescription>
                Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Nom</Label>
                  <Input id="name" placeholder="Votre nom" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" placeholder="votre@email.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="subject">Sujet</Label>
                  <Input id="subject" placeholder="Sujet de votre message" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="message">Message</Label>
                  <Textarea id="message" placeholder="Votre message" rows={5} />
                </div>
                <Button type="submit" className="w-full bg-[#0e7490] hover:bg-[#0c6d84]">
                  Envoyer
                </Button>
              </form>
            </CardContent>
          </Card>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Informations de contact</CardTitle>
                <CardDescription>
                  Vous pouvez également nous contacter directement via les informations ci-dessous.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h3 className="font-medium">Contact technique</h3>
                  <p className="text-sm text-gray-500">Charles Van den driessche</p>
                </div>
                <div>
                  <h3 className="font-medium">Email</h3>
                  <p className="text-sm text-gray-500">contact@atoll-project.com</p>
                </div>
              </CardContent>
            </Card>

<Card className="overflow-hidden">
              <div className="relative h-60 w-full">
                <Image
                  src="/placeholder.svg?height=400&width=600"
                  alt="Atoll Project Contact"
                  fill
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
                  <div className="text-white">
                    <h3 className="text-xl font-bold">Atoll Project</h3>
                    <p className="text-sm opacity-90">Votre marketing à portée de main</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </DashboardShell>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This