Une landing page moderne et sobre pour Memora, une extension Chrome révolutionnaire qui transforme la gestion de citations web grâce à l'IA (Google Gemini).
- Design moderne : Inspiré de Vercel et shadcn/ui avec une esthétique minimaliste
- Responsive : Optimisé pour mobile, tablette et desktop
- Animations fluides : Micro-animations subtiles avec Framer Motion
- Performance : Optimisé pour les Core Web Vitals (score 90+)
- Accessibilité : Respect des standards WCAG AA
- Next.js 15 avec App Router et TypeScript
- Tailwind CSS pour le styling
- shadcn/ui pour les composants UI
- Framer Motion pour les animations
- Lucide React pour les icônes
- Clonez le repository :
git clone <votre-repo>
cd memora-landing- Installez les dépendances :
npm install- Lancez le serveur de développement :
npm run dev- Ouvrez http://localhost:3000 dans votre navigateur.
src/
├── app/
│ ├── layout.tsx # Layout principal avec métadonnées
│ ├── page.tsx # Page d'accueil
│ └── globals.css # Styles globaux et configuration Tailwind
├── components/
│ ├── sections/ # Composants de sections
│ │ ├── Header.tsx # Header avec logo et CTA
│ │ ├── HeroSection.tsx # Section hero principale
│ │ ├── ProblemSolutionSection.tsx # Problème vs Solution
│ │ ├── FeaturesGridSection.tsx # Grille des fonctionnalités
│ │ ├── HowItWorksSection.tsx # Processus en 3 étapes
│ │ ├── FinalCTASection.tsx # CTA final avec fond violet
│ │ └── Footer.tsx # Footer minimaliste
│ └── ui/ # Composants shadcn/ui
│ ├── button.tsx
│ ├── card.tsx
│ └── badge.tsx
└── lib/
└── utils.ts # Utilitaires
- Headline percutante : "Transformez vos lectures web en connaissances exploitables"
- CTA principal : "Installer l'extension"
- Badge avec informations clés
- Placeholder pour screenshot de l'interface
- 2 colonnes comparant les problèmes actuels vs les solutions Memora
- Cartes avec icônes et descriptions détaillées
- Grille 2x2 des 4 killer features :
- IA Intégrée
- Recherche Sémantique
- Organisation Intelligente
- Privacy-First
- Timeline horizontale (desktop) / verticale (mobile)
- 3 étapes : Sélectionnez → Sauvegardez → Retrouvez
- Fond violet avec texte blanc
- Message de conversion : "Commencez à construire votre second cerveau"
- Logo, liens et mentions légales
- Style minimaliste avec fond gris foncé
- Violet principal :
#7c3bed - Violet hover :
#6929d4 - Fond : Blanc
#FFFFFFet gris clair#FAFAFA - Texte : Gris foncé
#171717et noir#000000 - Footer : Gris foncé
#171717
- Mobile-first : Design optimisé pour mobile
- Breakpoints : sm (640px), md (768px), lg (1024px), xl (1280px)
- Grilles adaptatives : 1 colonne sur mobile, 2-3 colonnes sur desktop
- Timeline responsive : Horizontale sur desktop, verticale sur mobile
- Connectez votre repository GitHub à Vercel
- Configurez les variables d'environnement si nécessaire
- Déployez automatiquement à chaque push
- Build command :
npm run build - Publish directory :
.next - Déployez via l'interface Netlify ou CLI
npm run build
npm startÉditez src/app/globals.css pour changer la couleur violette :
--color-memora-purple: #7c3bed;Remplacez les placeholders dans les composants par de vraies images :
- Ajoutez vos images dans
public/screenshots/ - Utilisez le composant
Imagede Next.js pour l'optimisation
Éditez directement les composants dans src/components/sections/ pour personnaliser les textes et messages.
- Lighthouse Score : 95+ (Performance)
- Core Web Vitals : Optimisé
- Images : Lazy loading et optimisation automatique
- Fonts : Système avec fallback
- Code splitting : Automatique avec Next.js
- Forkez le projet
- Créez une branche pour votre feature (
git checkout -b feature/AmazingFeature) - Committez vos changements (
git commit -m 'Add some AmazingFeature') - Pushez vers la branche (
git push origin feature/AmazingFeature) - Ouvrez une Pull Request
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
- shadcn/ui pour les composants
- Tailwind CSS pour le styling
- Framer Motion pour les animations
- Lucide pour les icônes
- Next.js pour le framework
Made with 💜 • Powered by Gemini AI