Skip to content

Commit a574eaa

Browse files
wistantwistant
committed
feat(landing): implement high-fidelity hero section and navbar
Description: Redesigned the Hero section and Navbar to strictly match the provided Rêntala mockup aesthetic. - Added huge typography (80px) and hand-drawn emerald underline curve. - Implemented premium floating icons (Clap, Heart) and animated hand cursor via Framer Motion. - Created detailed browser window mockup with sidebar and detailed content simulation. - Integrated brand colors (#10b981, #012a2b) and optimized design system. - Disabled Turbopack in package.json to fix 'too many open files' dev server panic. Impact: Provides a stunning, professional first impression aligned with the user's vision for the SaaS platform.
1 parent 70f7023 commit a574eaa

9 files changed

Lines changed: 479 additions & 54 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,4 @@ next-env.d.ts
105105
!PLAN.md
106106
!REFACTOR.md
107107
!ASSIST.md
108+
!LANDING_PLAN.md

‎LANDING_PLAN.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# 🎨 Landing Page : Plan d'Implémentation "Atomic Design"
2+
3+
L'objectif est de reproduire fidèlement la maquette avec une structure de composants ultra-découpée pour faciliter la maintenance et l'évolution vers le SaaS.
4+
5+
## 1. Structure des Dossiers (Spécifique Marketing)
6+
7+
Nous allons isoler les composants de la landing page pour ne pas polluer ceux de l'éditeur.
8+
9+
```bash
10+
components/
11+
├── landing/
12+
│ ├── layout/ # Éléments de structure (Navbar, Footer)
13+
│ ├── sections/ # Grandes sections de la page
14+
│ │ ├── hero/ # Tout ce qui concerne le haut de page
15+
│ │ ├── features/ # Grilles d'avantages
16+
│ │ └── social-proof/# Témoignages, Logos partenaires
17+
│ └── atoms/ # Composants graphiques réutilisables
18+
│ ├── Button.tsx # Boutons premium avec effets
19+
│ ├── Badge.tsx # Badges "Nouveau", "Pro", etc.
20+
│ └── Icons.tsx # Icônes flottantes (comme sur la maquette)
21+
```
22+
23+
## 2. Découpage Granulaire (Atomic Breakdown)
24+
25+
### A. Le Header (Navbar)
26+
27+
- `Logo.tsx` : Texte + Icone stylisée.
28+
- `NavLinks.tsx` : Liste des liens avec effets de survol fluides.
29+
- `AuthButtons.tsx` : Boutons "Se connecter" et "Commencer".
30+
31+
### B. La Hero Section (Inspiration Maquette)
32+
33+
- `HeroContent.tsx` : Titre (H1), sous-titre et CTA principal.
34+
- `FloatingPreview.tsx` : L'élément central montrant l'application.
35+
- `PreviewCard.tsx` : La carte "Rental" de ta maquette, adaptée en "CV".
36+
- `DecorativeElements.tsx` : Les icônes flottantes (Cœur, Clap, Main) avec animations de lévitation (Framer Motion).
37+
- `SocialProofSmall.tsx` : La petite puce "Louis Staub / J'optimise..." en bas.
38+
39+
### C. Le Système de Design
40+
41+
- **Couleurs** : Utilisation de variables CSS pour le vert émeraude/primaire de ta maquette.
42+
- **Typographie** : Combinaison d'une police "Bold" pour les titres et une sans-serif propre pour le corps.
43+
- **Animations** : `framer-motion` pour les apparitions au scroll et les éléments flottants.
44+
45+
## 3. Ordre d'Implémentation
46+
47+
1. **Tokens & Base** : Configuration des couleurs et polices dans `tailwind.config.ts`.
48+
2. **Ateliers Atomes** : Création des boutons et badges premium.
49+
3. **Construction Layout** : Navbar et Footer.
50+
4. **Le Bloc Hero** : Assemblage du contenu et des éléments flottants.
51+
5. **Final Polish** : Ajout des micro-animations et responsive mobile.
52+
53+
## 4. Choix Techniques
54+
55+
- **Framework** : Next.js 16 (App Router).
56+
- **Styling** : Tailwind CSS + DaisyUI (pour les bases) + Custom CSS (pour le "glassmorphism").
57+
- **Animations** : Framer Motion (pour l'effet "Wow").
58+
- **Icônes** : Lucide React.

‎app/page.tsx‎

Lines changed: 12 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,19 @@
11
"use client";
2-
import Link from "next/link";
3-
import { ArrowRight, CheckCircle, Sparkles } from "lucide-react";
2+
import Navbar from "@/components/landing/layout/Navbar";
3+
import Hero from "@/components/landing/sections/Hero";
44

55
export default function LandingPage() {
66
return (
7-
<div className="min-h-screen bg-base-100 font-sans">
8-
{/* Hero Section */}
9-
<section className="relative pt-20 pb-32 overflow-hidden">
10-
<div className="container mx-auto px-4 relative z-10">
11-
<div className="text-center max-w-4xl mx-auto">
12-
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-8 animate-bounce">
13-
<Sparkles className="w-4 h-4" />
14-
<span>Nouveau : Éditeur Ultra-Modulaire</span>
15-
</div>
16-
17-
<h1 className="text-5xl md:text-7xl font-bold mb-8 leading-tight">
18-
Créez un CV qui vous <span className="text-primary italic">ressemble</span> vraiment.
19-
</h1>
20-
21-
<p className="text-xl text-base-content/70 mb-12 max-w-2xl mx-auto">
22-
Le builder le plus complet et personnalisable du marché. Choisissez parmi 20+ templates et construisez votre carrière en quelques minutes.
23-
</p>
24-
25-
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
26-
<Link href="/builder" className="btn btn-primary btn-lg gap-2 text-lg">
27-
Commencer mon CV
28-
<ArrowRight className="w-5 h-5" />
29-
</Link>
30-
<button className="btn btn-ghost btn-lg">Voir les modèles</button>
31-
</div>
32-
</div>
33-
</div>
34-
35-
{/* Floating elements simulation */}
36-
<div className="absolute top-1/4 -left-20 w-64 h-64 bg-primary/5 rounded-full blur-3xl animate-pulse"></div>
37-
<div className="absolute bottom-1/4 -right-20 w-80 h-80 bg-secondary/5 rounded-full blur-3xl animate-pulse delay-700"></div>
38-
</section>
39-
40-
{/* Proof Section */}
41-
<section className="py-20 bg-base-200">
42-
<div className="container mx-auto px-4">
43-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
44-
{[
45-
{ title: "20+ Modèles", desc: "Des designs pour chaque secteur" },
46-
{ title: "100% Modulaire", desc: "Ajoutez et déplacez vos sections" },
47-
{ title: "Export HD", desc: "PDF haute résolution prêt à l'emploi" }
48-
].map((feature, i) => (
49-
<div key={i} className="flex flex-col items-center gap-4 p-6">
50-
<CheckCircle className="w-8 h-8 text-success" />
51-
<h3 className="text-xl font-bold">{feature.title}</h3>
52-
<p className="text-base-content/60">{feature.desc}</p>
53-
</div>
54-
))}
55-
</div>
7+
<main className="min-h-screen bg-white">
8+
<Navbar />
9+
<Hero />
10+
11+
{/* Footer or other sections could go here */}
12+
<footer className="py-12 border-t border-slate-100 bg-white">
13+
<div className="container mx-auto px-6 text-center text-slate-400 text-sm">
14+
<p>© 2026 CVBuilder. Tous droits réservés.</p>
5615
</div>
57-
</section>
58-
</div>
16+
</footer>
17+
</main>
5918
);
6019
}

‎components/landing/atoms/FloatingIcon.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
import { motion } from "framer-motion";
3+
import { ReactNode } from "react";
4+
5+
interface FloatingIconProps {
6+
children: ReactNode;
7+
className?: string;
8+
delay?: number;
9+
bgColor?: string;
10+
borderColor?: string;
11+
scale?: number;
12+
}
13+
14+
export default function FloatingIcon({
15+
children,
16+
className = "",
17+
delay = 0,
18+
bgColor = "bg-white",
19+
borderColor = "border-white",
20+
scale = 1,
21+
}: FloatingIconProps) {
22+
return (
23+
<motion.div
24+
initial={{ y: 0, scale: 0.8, opacity: 0 }}
25+
animate={{
26+
y: [-8, 8, -8],
27+
scale: scale,
28+
opacity: 1
29+
}}
30+
transition={{
31+
y: {
32+
duration: 4,
33+
repeat: Infinity,
34+
ease: "easeInOut",
35+
delay: delay,
36+
},
37+
scale: { duration: 0.5 },
38+
opacity: { duration: 0.5 }
39+
}}
40+
className={`absolute z-20 ${bgColor} border-[6px] ${borderColor} rounded-full shadow-[0_20px_40px_rgba(0,0,0,0.15)] flex items-center justify-center ${className}`}
41+
>
42+
{children}
43+
</motion.div>
44+
);
45+
}

‎components/landing/atoms/LandingButton.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
import { motion } from "framer-motion";
3+
import { ReactNode } from "react";
4+
5+
interface LandingButtonProps {
6+
children: ReactNode;
7+
variant?: "primary" | "secondary" | "ghost" | "outline";
8+
className?: string;
9+
onClick?: () => void;
10+
size?: "sm" | "md" | "lg";
11+
}
12+
13+
export default function LandingButton({
14+
children,
15+
variant = "primary",
16+
className = "",
17+
onClick,
18+
size = "md",
19+
}: LandingButtonProps) {
20+
const baseStyles = "btn border-none transition-all duration-300 rounded-full font-semibold";
21+
22+
const variants = {
23+
primary: "bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg shadow-emerald-200",
24+
secondary: "bg-slate-900 hover:bg-slate-800 text-white shadow-lg shadow-slate-200",
25+
outline: "bg-transparent border-2 border-slate-200 hover:border-slate-300 text-slate-700",
26+
ghost: "bg-transparent hover:bg-slate-100 text-slate-600",
27+
};
28+
29+
const sizes = {
30+
sm: "btn-sm px-6",
31+
md: "px-8",
32+
lg: "btn-lg px-10 text-lg",
33+
};
34+
35+
return (
36+
<motion.button
37+
whileHover={{ scale: 1.02 }}
38+
whileTap={{ scale: 0.98 }}
39+
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
40+
onClick={onClick}
41+
>
42+
{children}
43+
</motion.button>
44+
);
45+
}

‎components/landing/layout/Navbar.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client";
2+
import Link from "next/link";
3+
import LandingButton from "../atoms/LandingButton";
4+
5+
export default function Navbar() {
6+
const navLinks = [
7+
{ label: "Accueil", href: "#" },
8+
{ label: "Bénéfices", href: "#" },
9+
{ label: "Processus", href: "#" },
10+
{ label: "Tarifs", href: "#" },
11+
{ label: "Avis", href: "#" },
12+
{ label: "FAQ", href: "#" },
13+
];
14+
15+
return (
16+
<nav className="fixed top-0 left-0 right-0 z-[100] bg-white/80 backdrop-blur-xl border-b border-slate-100">
17+
<div className="container mx-auto px-6 h-24 flex items-center justify-between">
18+
<div className="flex items-center gap-16">
19+
<Link href="/" className="flex items-center gap-2 group">
20+
<span className="text-2xl font-black text-[#012a2b] tracking-tighter">
21+
cvbuilder
22+
</span>
23+
<div className="w-2.5 h-2.5 rounded-full bg-[#10b981] group-hover:scale-125 transition-transform" />
24+
</Link>
25+
26+
<div className="hidden xl:flex items-center gap-10">
27+
{navLinks.map((link) => (
28+
<Link
29+
key={link.label}
30+
href={link.href}
31+
className="text-[15px] font-bold text-slate-500 hover:text-[#10b981] transition-colors"
32+
>
33+
{link.label}
34+
</Link>
35+
))}
36+
</div>
37+
</div>
38+
39+
<div className="flex items-center gap-6">
40+
<Link
41+
href="/login"
42+
className="text-[15px] font-bold text-slate-700 hover:text-[#10b981] transition-colors px-4"
43+
>
44+
Se connecter
45+
</Link>
46+
<LandingButton
47+
variant="secondary"
48+
className="bg-[#012a2b] hover:bg-[#023e3f] py-3.5 h-auto flex items-center gap-2 group"
49+
>
50+
Commecer
51+
<svg
52+
className="w-4 h-4 text-white group-hover:translate-x-1 transition-transform"
53+
fill="none"
54+
stroke="currentColor"
55+
viewBox="0 0 24 24"
56+
>
57+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 5l7 7-7 7" />
58+
</svg>
59+
</LandingButton>
60+
</div>
61+
</div>
62+
</nav>
63+
);
64+
}

0 commit comments

Comments
 (0)