Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #5.
This commit is contained in:
2026-05-28 00:19:45 +00:00
17 changed files with 1399 additions and 121 deletions

View File

@@ -0,0 +1,70 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
export default function CollectionsPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Favoris", id: "/favorites"},
{
name: "Collections", id: "/collections"},
{
name: "Sortir Maintenant", id: "/instant-outing"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="collections-hero" data-section="collections-hero">
<HeroLogo
logoText="Collections Éditoriales"
description="Découvrez des sélections thématiques et des itinéraires organisés pour toutes vos envies."
buttons={[
{ text: "Voir les collections", href: "/features" }
]}
imageSrc="http://img.b2bpic.net/free-photo/group-birds-macaw-perched-tree_1265-20164.jpg?w=800&h=600"
imageAlt="Image de collections"
showDimOverlay={false}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,70 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
export default function FavoritesPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Favoris", id: "/favorites"},
{
name: "Collections", id: "/collections"},
{
name: "Sortir Maintenant", id: "/instant-outing"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="favorites-hero" data-section="favorites-hero">
<HeroLogo
logoText="Vos Favoris"
description="Gérez vos lieux et expériences préférés en un seul endroit."
buttons={[
{ text: "Explorer les lieux", href: "/features" }
]}
imageSrc="http://img.b2bpic.net/free-photo/top-view-colorful-feathers_23-2148782970.jpg?w=800&h=600"
imageAlt="Image représentant des favoris"
showDimOverlay={false}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,70 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
export default function InstantOutingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Favoris", id: "/favorites"},
{
name: "Collections", id: "/collections"},
{
name: "Sortir Maintenant", id: "/instant-outing"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="instant-outing-hero" data-section="instant-outing-hero">
<HeroLogo
logoText="Je veux sortir maintenant !"
description="Trouvez instantanément des activités, des lieux et des événements autour de vous pour une sortie spontanée."
buttons={[
{ text: "Trouver une activité", href: "/features" }
]}
imageSrc="http://img.b2bpic.net/free-photo/cute-baby-macaw-parrot_181624-4328.jpg?w=800&h=600"
imageAlt="Image de sortie spontanée"
showDimOverlay={false}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

146
src/app/onboarding/page.tsx Normal file
View File

@@ -0,0 +1,146 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { AnimatePresence, motion } from "framer-motion";
import { Globe, MapPin, Search } from "lucide-react"; // Icons for onboarding slides
// Define a simple button component since there isn't a generic one in registry for this purpose
const OnboardingButton = ({ onClick, children, className = "" }: { onClick: () => void; children: React.ReactNode; className?: string }) => (
<button
onClick={onClick}
className={`mt-8 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-full shadow-lg hover:bg-primary-cta/90 transition-colors duration-300 ${className}`}
>
{children}
</button>
);
const slides = [
{
title: "Bienvenue sur Waka !", description: "Explorez des lieux uniques, découvrez des expériences et vivez des moments inoubliables.", imageSrc: "http://img.b2bpic.net/free-photo/people-using-digital-devices-connection_53876-147345.jpg", imageAlt: "People connecting with devices", icon: Globe,
},
{
title: "Découvrez des Merveilles", description: "Trouvez les meilleures adresses près de chez vous ou organisez vos voyages dans des pays lointains.", imageSrc: "http://img.b2bpic.net/free-photo/adventure-travel-concept-beautiful-nature-scenery_53876-136952.jpg", imageAlt: "Travel adventure", icon: Search,
},
{
title: "Partagez votre Monde", description: "Pour des recommandations personnalisées et une expérience locale optimale, Waka a besoin de votre position.", imageSrc: "http://img.b2bpic.net/free-photo/location-icon-pin_126523-294.jpg", imageAlt: "Location pin icon", icon: MapPin,
isLocationSlide: true,
},
];
export default function OnboardingScreen() {
const router = useRouter();
const [currentSlide, setCurrentSlide] = useState(0);
const [locationPermissionStatus, setLocationPermissionStatus] = useState<"idle" | "granted" | "denied">("idle");
const handleNext = () => {
if (currentSlide < slides.length - 1) {
setCurrentSlide((prev) => prev + 1);
} else {
router.push("/"); // Redirect to home page after onboarding
}
};
const handleLocationRequest = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log("Geolocation granted:", position);
setLocationPermissionStatus("granted");
handleNext(); // Move to next step or finish onboarding
},
(error) => {
console.error("Geolocation denied or error:", error);
setLocationPermissionStatus("denied");
// Optionally, still allow user to proceed or show a message
handleNext();
},
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }
);
} else {
alert("La géolocalisation n'est pas supportée par votre navigateur.");
setLocationPermissionStatus("denied");
handleNext(); // Move to next step even if not supported
}
};
const slideVariants = {
enter: { opacity: 0, x: 100 },
center: { opacity: 1, x: 0 },
exit: { opacity: 0, x: -100 },
};
const currentSlideContent = slides[currentSlide];
const IconComponent = currentSlideContent.icon;
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-background p-4 text-center">
<AnimatePresence mode="wait">
<motion.div
key={currentSlide}
variants={slideVariants}
initial="enter"
animate="center"
exit="exit"
transition={{ type: "tween", duration: 0.5 }}
className="flex flex-col items-center max-w-2xl mx-auto p-6 bg-card rounded-xl shadow-lg"
>
{IconComponent && <IconComponent className="h-16 w-16 text-primary-cta mb-4" />}
<Image
src={currentSlideContent.imageSrc}
alt={currentSlideContent.imageAlt}
width={400}
height={250}
className="mb-6 rounded-md object-cover h-[250px] w-full"
/>
<h2 className="text-3xl font-bold text-foreground mb-4">
{currentSlideContent.title}
</h2>
<p className="text-foreground/70 text-lg mb-6">
{currentSlideContent.description}
</p>
{currentSlideContent.isLocationSlide ? (
<OnboardingButton onClick={handleLocationRequest}>
{locationPermissionStatus === "granted" ? "Localisation Activée" : "Activer la Localisation"}
</OnboardingButton>
) : (
<OnboardingButton onClick={handleNext}>
Suivant
</OnboardingButton>
)}
{locationPermissionStatus === "denied" && currentSlideContent.isLocationSlide && (
<p className="mt-2 text-sm text-red-500">
Vous pouvez activer la localisation plus tard dans les paramètres.
</p>
)}
</motion.div>
</AnimatePresence>
<div className="absolute bottom-8 flex space-x-2">
{slides.map((_, index) => (
<div
key={index}
className={`h-2 w-2 rounded-full ${
index === currentSlide ? "bg-primary-cta" : "bg-foreground/30"
}`}
/>
))}
</div>
</div>
</ThemeProvider>
);
}

View File

@@ -13,15 +13,15 @@ import { Lightbulb, MapPin, MessageSquare, Sparkles, TrendingUp } from "lucide-r
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
background="noiseDiagonalGradient"
cardStyle="glass-elevated"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
@@ -29,33 +29,19 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil",
id: "/",
},
name: "Accueil", id: "/"},
{
name: "Fonctionnalités",
id: "/features",
},
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro",
id: "/pricing",
},
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances",
id: "/vacances",
},
name: "Vacances", id: "/vacances"},
{
name: "Professionnel",
id: "/professionnel",
},
name: "Professionnel", id: "/professionnel"},
{
name: "À Propos",
id: "/about",
},
name: "À Propos", id: "/about"},
{
name: "Contact",
id: "/contact",
},
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
@@ -71,13 +57,9 @@ export default function LandingPage() {
description="N'attendez plus personne. Découvrez des expériences uniques autour de vous et partout dans le monde."
buttons={[
{
text: "Explorer les lieux",
href: "/features",
},
text: "Explorer les lieux", href: "/features"},
{
text: "Devenir Professionnel",
href: "/professionnel",
},
text: "Devenir Professionnel", href: "/professionnel"},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-holds-two-colorful-macaw-parrots-his-arm_1304-5405.jpg"
imageAlt="Perroquet gris du Gabon Waka"
@@ -92,34 +74,16 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
id: "f-home-1",
label: "Local",
title: "Trouvez les meilleures adresses près de chez vous",
items: [
"Recommandations personnalisées",
"Activités locales uniques",
"Sorties tendance du moment",
],
id: "f-home-1", label: "Local", title: "Trouvez les meilleures adresses près de chez vous", items: [
"Recommandations personnalisées", "Activités locales uniques", "Sorties tendance du moment"],
},
{
id: "f-home-2",
label: "Voyages",
title: "Organisez vos vacances dans un pays inconnu",
items: [
"Découvrez des destinations",
"Itinéraires personnalisés",
"Conseils de voyage fiables",
],
id: "f-home-2", label: "Voyages", title: "Organisez vos vacances dans un pays inconnu", items: [
"Découvrez des destinations", "Itinéraires personnalisés", "Conseils de voyage fiables"],
},
{
id: "f-home-3",
label: "Communauté",
title: "Partagez vos expériences et avis authentiques",
items: [
"Avis détaillés d'utilisateurs",
"Points forts/faibles IA",
"Votez pour l'utilité des résumés",
],
id: "f-home-3", label: "Communauté", title: "Partagez vos expériences et avis authentiques", items: [
"Avis détaillés d'utilisateurs", "Points forts/faibles IA", "Votez pour l'utilité des résumés"],
},
]}
title="Vos Avantages avec Waka"
@@ -135,19 +99,9 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "p-home-1",
name: "Restaurant saveurs d'Afrique",
price: "Cuisine authentique",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-meat-soup-with-potatoes-greens-dark-desk_140725-76540.jpg?_wi=1",
imageAlt: "Plat africain traditionnel",
},
id: "p-home-1", name: "Restaurant saveurs d'Afrique", price: "Cuisine authentique", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-meat-soup-with-potatoes-greens-dark-desk_140725-76540.jpg?_wi=1", imageAlt: "Plat africain traditionnel"},
{
id: "p-home-2",
name: "Cinéma Les Étoiles",
price: "Films à l'affiche",
imageSrc: "http://img.b2bpic.net/free-photo/illustration-movies-theatre-media-entertainment-digital-tablet_53876-124337.jpg?_wi=1",
imageAlt: "Salle de cinéma moderne",
},
id: "p-home-2", name: "Cinéma Les Étoiles", price: "Films à l'affiche", imageSrc: "http://img.b2bpic.net/free-photo/illustration-movies-theatre-media-entertainment-digital-tablet_53876-124337.jpg?_wi=1", imageAlt: "Salle de cinéma moderne"},
]}
title="Découvrez des Lieux d'Exception"
description="Restaurants, loisirs, sorties... Waka vous guide vers les meilleures expériences pour chaque occasion."
@@ -166,35 +120,17 @@ export default function LandingPage() {
tagIcon={Sparkles}
features={[
{
title: "Aventures en Plein Air",
description: "Découvrez des parcs et activités à sensations fortes pour toute la famille.",
imageSrc: "http://img.b2bpic.net/free-photo/man-walks-rope-path-air_1304-5058.jpg?_wi=1",
imageAlt: "Parc d'aventure extérieur",
},
title: "Aventures en Plein Air", description: "Découvrez des parcs et activités à sensations fortes pour toute la famille.", imageSrc: "http://img.b2bpic.net/free-photo/man-walks-rope-path-air_1304-5058.jpg?_wi=1", imageAlt: "Parc d'aventure extérieur"},
{
title: "Havre de Sérénité",
description: "Trouvez les cafés et librairies les plus charmants pour vous détendre.",
imageSrc: "http://img.b2bpic.net/free-photo/breakfast-bed_23-2148079539.jpg",
imageAlt: "Intérieur de café littéraire",
},
title: "Havre de Sérénité", description: "Trouvez les cafés et librairies les plus charmants pour vous détendre.", imageSrc: "http://img.b2bpic.net/free-photo/breakfast-bed_23-2148079539.jpg", imageAlt: "Intérieur de café littéraire"},
{
title: "Immersion Culturelle",
description: "Visitez des galeries d'art et des musées uniques qui stimuleront votre esprit.",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-painting-gallery-setting_23-2151984832.jpg",
imageAlt: "Galerie d'art contemporain",
},
title: "Immersion Culturelle", description: "Visitez des galeries d'art et des musées uniques qui stimuleront votre esprit.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-painting-gallery-setting_23-2151984832.jpg", imageAlt: "Galerie d'art contemporain"},
{
title: "Sport et Bien-être",
description: "Accédez à des centres sportifs modernes et des cours pour rester actif.",
imageSrc: "http://img.b2bpic.net/free-photo/sportswoman-preparing-climbing-wall_1098-17258.jpg",
imageAlt: "Centre multi-sport moderne",
},
title: "Sport et Bien-être", description: "Accédez à des centres sportifs modernes et des cours pour rester actif.", imageSrc: "http://img.b2bpic.net/free-photo/sportswoman-preparing-climbing-wall_1098-17258.jpg", imageAlt: "Centre multi-sport moderne"},
]}
buttons={[
{
text: "Voir toutes les fonctionnalités",
href: "/features",
},
text: "Voir toutes les fonctionnalités", href: "/features"},
]}
/>
</div>
@@ -210,29 +146,18 @@ export default function LandingPage() {
tagIcon={TrendingUp}
metrics={[
{
id: "m-home-1",
icon: MapPin,
title: "Lieux Découverts",
value: "2.5M+",
},
id: "m-home-1", icon: MapPin,
title: "Lieux Découverts", value: "2.5M+"},
{
id: "m-home-2",
icon: MessageSquare,
title: "Avis Authentiques",
value: "1.2M+",
},
id: "m-home-2", icon: MessageSquare,
title: "Avis Authentiques", value: "1.2M+"},
{
id: "m-home-3",
icon: Lightbulb,
title: "Recommandations IA",
value: "Précision 98%",
},
id: "m-home-3", icon: Lightbulb,
title: "Recommandations IA", value: "Précision 98%"},
]}
buttons={[
{
text: "Rejoignez la Communauté",
href: "/contact",
},
text: "Rejoignez la Communauté", href: "/contact"},
]}
/>
</div>

View File

@@ -0,0 +1,236 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import Image from 'next/image';
import Link from 'next/link';
import { ChevronLeft, MapPin } from 'lucide-react';
// Mock data for places
const placesData = {
"p-home-1": {
name: "Restaurant Saveurs d'Afrique", location: "123 Rue de la Cuisine, Ville Exotique", description: "Un restaurant authentique offrant des saveurs riches et épicées d'Afrique de l'Ouest. Une ambiance chaleureuse et un service impeccable vous attendent pour une expérience culinaire inoubliable.", aiSummary: {
text: "Ce restaurant propose une cuisine africaine authentique dans une ambiance conviviale, idéal pour découvrir de nouvelles saveurs. Il est réputé pour ses plats épicés et son service attentif.", strengths: [
"Plats délicieux et épicés, fidèles aux saveurs africaines.", "Personnel très accueillant et soucieux du bien-être des clients."
],
weaknesses: [
"Temps d'attente parfois un peu long aux heures de pointe.", "Options végétariennes limitées pour certains plats traditionnels."
]
},
galleryImages: [
"http://img.b2bpic.net/free-photo/table-full-delicious-food_140725-76342.jpg", "http://img.b2bpic.net/free-photo/delicious-food-table_140725-76365.jpg", "http://img.b2bpic.net/free-photo/beautiful-restaurant-interior_140725-76366.jpg", "http://img.b2bpic.net/free-photo/waiter-serving-dish-customers-restaurant_140725-76367.jpg"
],
googleMapsLink: "https://www.google.com/maps/search/Restaurant+saveurs+d'Afrique"},
"p-home-2": {
name: "Cinéma Les Étoiles", location: "456 Avenue des Films, Ville Lumière", description: "Le Cinéma Les Étoiles est une salle moderne offrant les dernières sorties blockbusters ainsi que des films d'art et essai. Profitez d'un confort optimal et d'une qualité sonore et visuelle exceptionnelle.", aiSummary: {
text: "Ce cinéma moderne offre une grande variété de films, des blockbusters aux films d'art et essai, avec un excellent confort. La qualité de l'image et du son est fréquemment saluée par les spectateurs.", strengths: [
"Programmation variée, y compris des événements spéciaux.", "Salles confortables et équipement audiovisuel de pointe."
],
weaknesses: [
"Prix des billets légèrement supérieurs à la moyenne.", "Files d'attente parfois longues pour les séances populaires."
]
},
galleryImages: [
"http://img.b2bpic.net/free-photo/dark-empty-theater_23-2148114674.jpg", "http://img.b2bpic.net/free-photo/view-empty-cinema-seats-screen_23-2148114677.jpg", "http://img.b2bpic.net/free-photo/full-frame-shot-empty-cinema_23-2148114681.jpg", "http://img.b2bpic.net/free-photo/empty-seats-movie-theater_23-2148114682.jpg"
],
googleMapsLink: "https://www.google.com/maps/search/Cinéma+Les+Étoiles"},
"p-home-3": {
name: "Musée des Beaux-Arts", location: "789 Place de l'Art, Cultureville", description: "Un musée emblématique abritant des collections d'art classique et contemporain. Idéal pour les amateurs d'histoire et d'esthétique.", aiSummary: {
text: "Le musée propose des collections variées d'art classique et contemporain dans un cadre historique, offrant une expérience enrichissante. Il est apprécié pour la richesse de ses œuvres.", strengths: [
"Expositions permanentes et temporaires de haute qualité.", "Architecture du bâtiment impressionnante et inspirante."
],
weaknesses: [
"Affluence importante pendant les week-ends et les vacances scolaires.", "Manque de signalisation claire pour certaines sections."
]
},
galleryImages: [
"http://img.b2bpic.net/free-photo/woman-admiring-sculpture_23-2150935572.jpg", "http://img.b2bpic.net/free-photo/man-taking-pictures-artwork-museum_23-2150935573.jpg", "http://img.b2bpic.net/free-photo/people-looking-art-exhibition_23-2150935574.jpg", "http://img.b2bpic.net/free-photo/woman-looking-picture_23-2150935575.jpg"
],
googleMapsLink: "https://www.google.com/maps/search/Musée+des+Beaux-Arts"},
"p-home-4": {
name: "Parc Aventure Vert", location: "101 Chemin des Bois, Natureville", description: "Un parc d'activités en plein air avec des parcours d'accrobranche, des tyroliennes et des zones de pique-nique. Idéal pour une journée en famille ou entre amis.", aiSummary: {
text: "Le Parc Aventure Vert est parfait pour les activités de plein air, avec des parcours pour tous les âges et des équipements sécurisés. Les visiteurs apprécient l'ambiance naturelle et les sensations fortes.", strengths: [
"Activités variées adaptées à différents niveaux de difficulté.", "Personnel encadrant très professionnel et sympathique."
],
weaknesses: [
"Accès un peu difficile sans voiture personnelle.", "Tarifs élevés pour les grandes familles ou groupes."
]
},
galleryImages: [
"http://img.b2bpic.net/free-photo/people-having-fun-rope-park_23-2148911520.jpg", "http://img.b2bpic.net/free-photo/rope-park-trees-outdoor-activities_23-2148911521.jpg", "http://img.b2bpic.net/free-photo/children-climbing-trees_23-2148911522.jpg", "http://img.b2bpic.net/free-photo/group-friends-having-fun-adventure-park_23-2148911523.jpg"
],
googleMapsLink: "https://www.google.com/maps/search/Parc+Aventure+Vert"}
};
export default function PlaceDetailPage({ params }: { params: { id: string } }) {
const place = placesData[params.id as keyof typeof placesData];
if (!place) {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Lieux", id: "/places"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div className="flex flex-col items-center justify-center min-h-[50vh] text-center">
<h1 className="text-4xl font-bold mb-4">Lieu non trouvé</h1>
<p className="text-lg mb-8">Désolé, le lieu que vous recherchez n'existe pas ou a été retiré.</p>
<Link href="/places" className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-cta hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta">
<ChevronLeft className="-ml-1 mr-3 h-5 w-5" aria-hidden="true" />
Retourner aux lieux
</Link>
</div>
</ReactLenis>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Lieux", id: "/places"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<main className="container mx-auto px-4 py-16 pt-28 space-y-12">
<Link href="/places" className="inline-flex items-center text-secondary-cta hover:underline">
<ChevronLeft className="mr-2 h-4 w-4" />
Retourner aux lieux
</Link>
<section id="place-header" className="text-center space-y-4">
<h1 className="text-5xl font-extrabold text-foreground leading-tight">{place.name}</h1>
<p className="text-xl text-foreground/80 flex items-center justify-center gap-2">
<MapPin className="h-5 w-5" /> {place.location}
</p>
<p className="text-lg text-foreground/70 max-w-3xl mx-auto">{place.description}</p>
</section>
<section id="ai-summary" className="bg-card p-8 rounded-lg shadow-lg space-y-6">
<h2 className="text-3xl font-bold text-foreground">Résumé IA & Avis</h2>
<p className="text-foreground/90 leading-relaxed italic">"{place.aiSummary.text}"</p>
<div className="grid md:grid-cols-2 gap-8 pt-4">
<div>
<h3 className="text-xl font-semibold text-green-500 mb-3">Points forts</h3>
<ul className="list-disc list-inside text-foreground/80 space-y-2">
{place.aiSummary.strengths.map((s, i) => (
<li key={i}>{s}</li>
))}
</ul>
</div>
<div>
<h3 className="text-xl font-semibold text-red-500 mb-3">Points faibles</h3>
<ul className="list-disc list-inside text-foreground/80 space-y-2">
{place.aiSummary.weaknesses.map((w, i) => (
<li key={i}>{w}</li>
))}
</ul>
</div>
</div>
</section>
<section id="gallery" className="space-y-6">
<h2 className="text-3xl font-bold text-foreground text-center">Galerie Photos</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{place.galleryImages.map((image, index) => (
<div key={index} className="relative aspect-video rounded-lg overflow-hidden group">
<Image
src={image}
alt={`${place.name} - image ${index + 1}`}
layout="fill"
objectFit="cover"
className="transition-transform duration-300 group-hover:scale-105"
/>
</div>
))}
</div>
</section>
<section id="map-routing" className="text-center py-8">
<h2 className="text-3xl font-bold text-foreground mb-6">Y aller</h2>
<Link
href={place.googleMapsLink}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md shadow-sm text-white bg-primary-cta hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta transition-all duration-200"
>
<MapPin className="-ml-1 mr-3 h-6 w-6" aria-hidden="true" />
Obtenir l'itinéraire sur Google Maps
</Link>
</section>
</main>
</ReactLenis>
</ThemeProvider>
);
}

80
src/app/places/page.tsx Normal file
View File

@@ -0,0 +1,80 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
const allPlaces = [
{
id: "p-home-1", name: "Restaurant saveurs d'Afrique", price: "Cuisine authentique", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-meat-soup-with-potatoes-greens-dark-desk_140725-76540.jpg?_wi=1", imageAlt: "Plat africain traditionnel", href: "/places/p-home-1"
},
{
id: "p-home-2", name: "Cinéma Les Étoiles", price: "Films à l'affiche", imageSrc: "http://img.b2bpic.net/free-photo/illustration-movies-theatre-media-entertainment-digital-tablet_53876-124337.jpg?_wi=1", imageAlt: "Salle de cinéma moderne", href: "/places/p-home-2"
},
{
id: "p-home-3", name: "Musée des Beaux-Arts", price: "Expositions permanentes", imageSrc: "http://img.b2bpic.net/free-photo/people-walking-art-gallery_1150-14167.jpg", imageAlt: "Musée des Beaux-Arts", href: "/places/p-home-3"
},
{
id: "p-home-4", name: "Parc Aventure Vert", price: "Activités en plein air", imageSrc: "http://img.b2bpic.net/free-photo/people-having-fun-rope-park_23-2148911520.jpg", imageAlt: "Parc Aventure Vert", href: "/places/p-home-4"
}
];
export default function PlacesPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Lieux", id: "/places"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="places-overview" data-section="places-overview" className="py-20">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={allPlaces}
title="Tous nos Lieux d'Exception"
description="Explorez une multitude de restaurants, de loisirs et d'activités pour toutes vos envies."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,102 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import { Briefcase, Calendar, BarChart2 } from "lucide-react";
export default function ProfessionalPage() {
const navItems = [
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Tarifs Pro", id: "/professionnel/pricing"},
{
name: "Réservations Pro", id: "/professionnel/reservations"},
{
name: "Tableau de bord Pro", id: "/professionnel/dashboard"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Développez votre activité avec Waka Pro"
bottomRightText="pro@waka.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Waka Pro"
description="La plateforme ultime pour les professionnels. Gérez vos réservations, analysez vos performances et atteignez de nouveaux clients."
buttons={[
{ text: "Découvrir les Tarifs", href: "/professionnel/pricing" },
{ text: "Accéder au Tableau de Bord", href: "/professionnel/dashboard" },
]}
imageSrc="http://img.b2bpic.net/free-photo/diverse-business-people-office_53876-104332.jpg"
imageAlt="Professionnels au travail"
showDimOverlay={false}
/>
</div>
<div id="features-pro" data-section="features-pro">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "fp-1", label: "Comptes Pro", title: "Choisissez la formule adaptée à vos besoins", items: [
"Compte gratuit ou premium", "Options flexibles", "Intégration Stripe pour les paiements"],
buttons: [{ text: "Voir les Tarifs", href: "/professionnel/pricing" }],
},
{
id: "fp-2", label: "Réservations", title: "Gérez vos plannings et vos clients facilement", items: [
"Système de gestion intuitif", "Notifications clients automatiques", "Historique des réservations"],
buttons: [{ text: "Gérer les Réservations", href: "/professionnel/reservations" }],
},
{
id: "fp-3", label: "Analytics", title: "Suivez vos performances et optimisez votre activité", items: [
"Tableau de bord détaillé", "Statistiques de fréquentation", "Rapports personnalisables"],
buttons: [{ text: "Voir le Tableau de Bord", href: "/professionnel/dashboard" }],
},
]}
title="Des Outils Puissants pour les Pros"
description="Waka Pro vous offre toutes les fonctionnalités pour booster votre visibilité et votre efficacité."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,85 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import { CheckCircle } from "lucide-react";
export default function ProfessionalPricingPage() {
const navItems = [
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Tarifs Pro", id: "/professionnel/pricing"},
{
name: "Réservations Pro", id: "/professionnel/reservations"},
{
name: "Tableau de bord Pro", id: "/professionnel/dashboard"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Choisissez votre plan Waka Pro"
bottomRightText="pro@waka.com"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
animationType="slide-up"
title="Tarifs Professionnels Waka"
description="Choisissez la formule Waka Pro qui correspond le mieux à votre activité."
plans={[
{
id: "free", badge: "Gratuit", price: "0€", subtitle: "Pour démarrer votre activité", features: [
"Visibilité basique", "Gestion des lieux simple", "Support communautaire"],
buttons: [
{ text: "Commencer Gratuitement", href: "#" },
],
},
{
id: "premium", badge: "Premium", badgeIcon: CheckCircle,
price: "19€/mois", subtitle: "Pour développer et optimiser", features: [
"Visibilité améliorée", "Système de réservations avancé", "Tableau de bord analytique", "Support prioritaire", "Intégration Stripe", "Rapports personnalisés"],
buttons: [
{ text: "Souscrire au Plan Premium", href: "#" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,71 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextAbout from '@/components/sections/about/TextAbout';
export default function ProfessionalReservationsPage() {
const navItems = [
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Tarifs Pro", id: "/professionnel/pricing"},
{
name: "Réservations Pro", id: "/professionnel/reservations"},
{
name: "Tableau de bord Pro", id: "/professionnel/dashboard"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Gérez vos réservations avec Waka Pro"
bottomRightText="pro@waka.com"
/>
</div>
<div id="reservations-management" data-section="reservations-management">
<TextAbout
title="Système de Gestion des Réservations"
description="Le système de gestion des réservations de Waka Pro vous permet d'organiser et de suivre toutes vos prises de rendez-vous et plannings clients. Facile à utiliser, il automatise les notifications et vous offre une vue d'ensemble de votre activité."
buttons={[
{ text: "Retour au Tableau de Bord", href: "/professionnel/dashboard" },
{ text: "Découvrir les Tarifs Pro", href: "/professionnel/pricing" },
]}
useInvertedBackground={false}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

83
src/app/reviews/page.tsx Normal file
View File

@@ -0,0 +1,83 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Star, ThumbsUp } from "lucide-react";
export default function ReviewsPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
{
name: "Avis", id: "/reviews"
}
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="reviews-section" data-section="reviews-section">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Avis de nos Utilisateurs et Système de Commentaires"
description="Découvrez ce que nos utilisateurs pensent de Waka. Notre système intègre le vote d'utilité, le filtrage par critères, et un résumé généré par IA des avis récents pour une meilleure compréhension."
testimonials={[
{
id: "review-1", name: "Alice D.", role: "Exploratrice urbaine", testimonial: "Waka m'a permis de trouver des cafés incroyables que je n'aurais jamais découverts. L'IA de résumé est très utile ! Score de confiance : 9/10. (25 personnes ont trouvé cet avis utile)", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-coffee-cafe_23-2149174249.jpg?_wi=1"
},
{
id: "review-2", name: "Marc L.", role: "Voyageur passionné", testimonial: "J'ai organisé mes dernières vacances au Pérou grâce à Waka. Les recommandations étaient parfaites et le système de vote très pertinent. Score de confiance : 8/10. (18 personnes ont trouvé cet avis utile)", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-backpack-climbing_23-2148281358.jpg?_wi=1"
},
{
id: "review-3", name: "Sophie M.", role: "Organisatrice d'événements", testimonial: "Les filtres de recherche pour lieux d'événements sont un gain de temps énorme. Le résumé IA est un plus indéniable. Score de confiance : 9.5/10. (32 personnes ont trouvé cet avis utile)", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-working-office_23-2148906368.jpg?_wi=1"
},
{
id: "review-4", name: "David P.", role: "Gourmet local", testimonial: "Les avis détaillés sur les restaurants m'aident à faire des choix éclairés. J'apprécie la transparence et la communauté active. Score de confiance : 8.5/10. (10 personnes ont trouvé cet avis utile)", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-enjoying-coffee-morning_23-2149303102.jpg?_wi=1"
}
]}
buttons={[
{ text: "Voir tous les avis", href: "#" },
{ text: "Écrire un avis", href: "#" }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

108
src/app/search/page.tsx Normal file
View File

@@ -0,0 +1,108 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
export default function SearchPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Accueil", id: "/"},
{
name: "Fonctionnalités", id: "/features"},
{
name: "Tarifs Pro", id: "/pricing"},
{
name: "Vacances", id: "/vacances"},
{
name: "Professionnel", id: "/professionnel"},
{
name: "Recherche", id: "/search"},
{
name: "À Propos", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<div id="search-hero" data-section="search-hero">
<HeroOverlay
title="Recherche Spotlight"
description="Trouvez instantanément les meilleures expériences. Filtrez par catégorie, ambiance, budget ou distance. Classement: Communauté / Populaire."
buttons={[
{ text: "Rechercher", onClick: () => console.log("Search triggered") },
{ text: "Filtres Avancés", onClick: () => console.log("Advanced filters triggered") }
]}
imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-with-parrot-tropical-jungle_1304-5407.jpg"
imageAlt="Image de fond de recherche"
showBlur={true}
textPosition="top"
showDimOverlay={false}
/>
</div>
<div id="community-best-results" data-section="community-best-results">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "cbr-1", name: "Café 'Le Nid Douillet'", price: "Catégorie: Café", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup-breakfast-restaurant-cafe_53876-130006.jpg?_wi=1", imageAlt: "Café avec latte art"},
{
id: "cbr-2", name: "Randonnée 'Sentier des Perroquets'", price: "Catégorie: Aventure", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-backpack-enjoys-view-mountains_1304-4536.jpg?_wi=1", imageAlt: "Randonneur en montagne"},
{
id: "cbr-3", name: "Atelier 'Art Tribal'", price: "Catégorie: Culture", imageSrc: "http://img.b2bpic.net/free-photo/african-woman-paints-traditional-ornament_1304-5412.jpg?_wi=1", imageAlt: "Peinture murale africaine"},
]}
title="Les meilleurs de la Communauté"
description="Les lieux et activités les plus appréciés par notre communauté d'explorateurs."
/>
</div>
<div id="most-popular-results" data-section="most-popular-results">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "mpr-1", name: "Parc Animalier Waka", price: "Catégorie: Famille", imageSrc: "http://img.b2bpic.net/free-photo/red-macaw-parrot-animal-bird_53876-120015.jpg?_wi=1", imageAlt: "Perroquet Macaw"},
{
id: "mpr-2", name: "Restaurant Fusion 'Horizon'", price: "Catégorie: Gastronomie", imageSrc: "http://img.b2bpic.net/free-photo/gourmet-dinner-restaurant-fine-cuisine_1304-5415.jpg?_wi=1", imageAlt: "Plat gastronomique"},
{
id: "mpr-3", name: "Concert en Plein Air", price: "Catégorie: Musique", imageSrc: "http://img.b2bpic.net/free-photo/cheering-crowd-concert-hall_1304-5409.jpg?_wi=1", imageAlt: "Foule à un concert"},
]}
title="Les plus Populaires en ce moment"
description="Découvrez les tendances actuelles et les lieux qui animent la ville."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

82
src/app/signin/page.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
export default function SignInPage() {
const updatedNavItems = [
{
name: "Accueil", id: "/"},
{
name: "Sign In", id: "/signin"},
{
name: "Sign Up", id: "/signup"},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={updatedNavItems}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 md:p-12 lg:p-24">
<div className="w-full max-w-md p-6 sm:p-8 space-y-6 bg-card rounded-lg shadow-md border border-accent/20">
<h2 className="text-2xl font-bold text-foreground text-center">Sign In</h2>
<form className="space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
<input
type="email"
id="email"
name="email"
className="mt-1 block w-full px-3 py-2 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background text-foreground placeholder-gray-500"
placeholder="your@email.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">Password</label>
<input
type="password"
id="password"
name="password"
className="mt-1 block w-full px-3 py-2 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background text-foreground placeholder-gray-500"
placeholder="••••••••"
/>
</div>
<ButtonBounceEffect text="Sign In with Email" type="submit" className="w-full" />
</form>
<div className="relative flex items-center justify-center text-xs text-foreground">
<span className="absolute bg-card px-2">or</span>
<div className="w-full border-t border-gray-600" />
</div>
<div className="space-y-3">
<ButtonBounceEffect text="Sign In with Google" className="w-full !bg-blue-600 hover:!bg-blue-700 !text-white" />
<ButtonBounceEffect text="Sign In with Apple" className="w-full !bg-gray-800 hover:!bg-gray-900 !text-white" />
</div>
</div>
</main>
</ReactLenis>
</ThemeProvider>
);
}

82
src/app/signup/page.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
export default function SignUpPage() {
const updatedNavItems = [
{
name: "Accueil", id: "/"},
{
name: "Sign In", id: "/signin"},
{
name: "Sign Up", id: "/signup"},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={updatedNavItems}
logoSrc="http://img.b2bpic.net/free-vector/parrot-home-pets-logo-abstract-design_126523-2772.jpg"
logoAlt="Waka Logo"
brandName="Waka"
bottomLeftText="Explorez, Découvrez, Vivez"
bottomRightText="contact@waka.com"
/>
</div>
<main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-8 md:p-12 lg:p-24">
<div className="w-full max-w-md p-6 sm:p-8 space-y-6 bg-card rounded-lg shadow-md border border-accent/20">
<h2 className="text-2xl font-bold text-foreground text-center">Sign Up</h2>
<form className="space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
<input
type="email"
id="email"
name="email"
className="mt-1 block w-full px-3 py-2 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background text-foreground placeholder-gray-500"
placeholder="your@email.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">Password</label>
<input
type="password"
id="password"
name="password"
className="mt-1 block w-full px-3 py-2 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background text-foreground placeholder-gray-500"
placeholder="••••••••"
/>
</div>
<ButtonBounceEffect text="Sign Up with Email" type="submit" className="w-full" />
</form>
<div className="relative flex items-center justify-center text-xs text-foreground">
<span className="absolute bg-card px-2">or</span>
<div className="w-full border-t border-gray-600" />
</div>
<div className="space-y-3">
<ButtonBounceEffect text="Sign Up with Google" className="w-full !bg-blue-600 hover:!bg-blue-700 !text-white" />
<ButtonBounceEffect text="Sign Up with Apple" className="w-full !bg-gray-800 hover:!bg-gray-900 !text-white" />
</div>
</div>
</main>
</ReactLenis>
</ThemeProvider>
);
}

68
src/app/splash/page.tsx Normal file
View File

@@ -0,0 +1,68 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { motion } from "framer-motion";
import AnimatedAuroraBackground from "@/components/background/AnimatedAuroraBackground"; // Assuming this is suitable for an animated background.
export default function SplashScreen() {
const router = useRouter();
useEffect(() => {
const timer = setTimeout(() => {
router.push("/onboarding");
}, 4000); // Redirect after 4 seconds
return () => clearTimeout(timer);
}, [router]);
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="large"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden">
<AnimatedAuroraBackground invertColors={false} className="absolute inset-0" />
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1, ease: "easeOut" }}
className="relative z-10 flex flex-col items-center"
>
<Image
src="http://img.b2bpic.net/free-vector/parrot-icon-vector-illustration-concept_126523-2898.jpg"
alt="Waka Parrot Logo"
width={200}
height={200}
className="mb-4"
/>
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8, ease: "easeOut" }}
className="text-6xl font-extrabold text-foreground"
>
Waka
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7, duration: 0.8, ease: "easeOut" }}
className="mt-2 text-xl text-foreground/80"
>
Découvrez le monde, à votre façon.
</motion.p>
</motion.div>
</div>
</ThemeProvider>
);
}

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-raleway), sans-serif;
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-raleway), sans-serif;
font-family: var(--font-inter), sans-serif;
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #fcfbf8;
--card: #f5f2ed;
--foreground: #3a2f24;
--primary-cta: #ff8c42;
--primary-cta-text: #ffffff;
--secondary-cta: #fde047;
--secondary-cta-text: #3a2f24;
--accent: #70e000;
--background-accent: #ffbe70;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f0f0f0;
--primary-cta: #8a2be2;
--primary-cta-text: #FFFFFF;
--secondary-cta: #5a1f9a;
--secondary-cta-text: #F5F5F2;
--accent: #add8e6;
--background-accent: #2a2a2a;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);