Spaces:
Running
Running
Crée-moi une page d'accueil web moderne pour une startup technologique appelée **Strive**, conçue comme un Google/Tencent africain, qui développe des apps, des plateformes et des outils technologiques interconnectés à fort impact sociétal. La page doit refléter une **vision panafricaine futuriste**, tout en étant fluide, atypique et inspirée des plus beaux SaaS modernes comme n8n, Linear, ou Vercel. 🎯 Contraintes et intention UX/UI : - AUCUNE séparation visible entre la **navbar** et le **hero banner** : l’ensemble doit former une **surface unifiée, aérienne, continue** - **Design atypique**, original, avec une **approche minimaliste premium**, pas de blocs classiques avec bordures - La navigation doit **flotter discrètement** en haut (type Linear ou Raycast), avec des **transitions douces** - Le hero banner doit captiver dès la première seconde : **grande typographie libre et inspirante**, et une **sous-phrase subtile mais puissante** - Intégrer un **champ de recherche flottant ou une zone d’action principale immersive** (ex: “Explore Products” ou “Commencer avec AgriFlow”) - Utilise des **textures légères**, des **dégradés doux**, et des **effets flous (glassmorphism / backdrops)** pour donner de la profondeur sans lourdeur - L’animation doit être **vivante mais légère** : hover fluide, légers mouvements dans le hero, navigation qui réagit au scroll - Palette de couleurs inspirée de l’Afrique moderne : **ocre doux, vert profond, sable clair, bleu éthéré**, le tout intégré dans un design tech flat - Le design doit suggérer **innovation, inclusion, puissance et amour du produit** 🔍 Structure attendue : 1. ✅ **Navigation intégrée au hero**, sans cadre, avec des liens : Accueil | Produits | Vision | Contact 2. 🌌 **Hero Banner immersif** : texte très fort style “Build the future. Strive for more.” avec un bouton call-to-action fondu dans le design (“Explorer l’univers STRIVE”) 3. 🎯 Section “Nos produits phares” : grille fluide de cartes illustrées (AgriFlow, Voice, Move, etc.) avec hover élégant (pas de blocs durs) 4. 🧬 Section “Vision STRIVE” : grande citation, un fond immersif, et des mots-clés interactifs (technologie, Afrique, souveraineté, IA, etc.) 5. 💡 Footer simple, élégant, avec seulement les liens essentiels, une mini bio STRIVE et un logo très clean 🛠️ Tech front-end recommandée : - Tailwind CSS ou CSS-in-JS - Font moderne (ex : Inter, Space Grotesk, Satoshi) - Animations avec Framer Motion ou GSAP si besoin - Responsive mobile-first avec breakpoints naturels 🎨 Le ton visuel doit mélanger : - L’élégance brute de Linear - La flexibilité et l’unicité de n8n - Le storytelling visuel de Vercel ou Replit ✴️ Le site doit faire ressentir une **ambition continentale** tout en restant extrêmement **humain, sobre et poétique dans sa structure**. - Initial Deployment
c368eb8 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Strive - Building Africa's Digital Future</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #faf8f5; | |
| color: #1a1a1a; | |
| } | |
| .glass-card { | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(235, 222, 203, 0.8) 0%, rgba(214, 230, 227, 0.6) 50%, rgba(197, 217, 237, 0.4) 100%); | |
| } | |
| .vision-bg { | |
| background: radial-gradient(circle at 50% 50%, rgba(214, 230, 227, 0.4) 0%, rgba(235, 222, 203, 0.2) 70%, transparent 100%); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #1a1a1a; | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation intégrée au hero --> | |
| <div class="hero-gradient min-h-screen relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0 opacity-20"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#d6e0e3] mix-blend-multiply filter blur-3xl opacity-70"></div> | |
| <div class="absolute bottom-1/3 right-1/4 w-72 h-72 rounded-full bg-[#ebdecb] mix-blend-multiply filter blur-3xl opacity-70"></div> | |
| </div> | |
| <header class="relative z-10 pt-8 px-6 md:px-12 lg:px-24"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <svg class="w-8 h-8 text-[#1a1a1a]" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#1a1a1a"/> | |
| <path d="M22 12L16 20L10 12" stroke="#faf8f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span class="ml-2 text-xl font-medium">Strive</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-sm font-medium">Accueil</a> | |
| <a href="#" class="nav-link text-sm font-medium">Produits</a> | |
| <a href="#" class="nav-link text-sm font-medium">Vision</a> | |
| <a href="#" class="nav-link text-sm font-medium">Contact</a> | |
| </nav> | |
| <button class="md:hidden"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Banner immersif --> | |
| <main class="relative z-10 px-6 md:px-12 lg:px-24 pt-24 pb-32"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight md:leading-tight lg:leading-tight"> | |
| Build the future.<br> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#d6e0e3] to-[#1a1a1a]">Strive for more.</span> | |
| </h1> | |
| <p class="mt-6 md:mt-8 text-lg md:text-xl text-gray-700 max-w-2xl mx-auto"> | |
| We're crafting Africa's interconnected digital ecosystem—one product at a time. | |
| </p> | |
| <div class="mt-12 relative max-w-md mx-auto"> | |
| <input type="text" placeholder="Explore products..." class="w-full py-4 px-6 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#d6e0e3] focus:border-transparent shadow-sm text-sm"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#1a1a1a] text-white p-2 rounded-full"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <button class="mt-8 px-8 py-3 bg-[#1a1a1a] text-white rounded-full text-sm font-medium hover:bg-opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl"> | |
| Explorer l'univers STRIVE | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Section Produits phares --> | |
| <section class="py-20 px-6 md:px-12 lg:px-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Our Flagship Products</h2> | |
| <p class="mt-4 text-gray-600 max-w-2xl mx-auto"> | |
| Interconnected solutions designed to empower communities and transform industries. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-90"> | |
| <div class="w-12 h-12 rounded-lg bg-[#ebdecb] flex items-center justify-center mb-6"> | |
| <svg class="w-6 h-6 text-[#1a1a1a]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AgriFlow</h3> | |
| <p class="text-gray-600 mb-4"> | |
| AI-powered agricultural platform connecting farmers to markets, financing, and real-time insights. | |
| </p> | |
| <a href="#" class="text-sm font-medium text-[#1a1a1a] hover:underline">Learn more →</a> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-90"> | |
| <div class="w-12 h-12 rounded-lg bg-[#d6e0e3] flex items-center justify-center mb-6"> | |
| <svg class="w-6 h-6 text-[#1a1a1a]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Voice</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Multilingual voice assistant built for African languages and contexts. | |
| </p> | |
| <a href="#" class="text-sm font-medium text-[#1a1a1a] hover:underline">Learn more →</a> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-90"> | |
| <div class="w-12 h-12 rounded-lg bg-[#c5d5ed] flex items-center justify-center mb-6"> | |
| <svg class="w-6 h-6 text-[#1a1a1a]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Move</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Integrated mobility platform combining public and private transport across 15 African cities. | |
| </p> | |
| <a href="#" class="text-sm font-medium text-[#1a1a1a] hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Vision --> | |
| <section class="vision-bg py-28 px-6 md:px-12 lg:px-24"> | |
| <div class="max-w-5xl mx-auto text-center"> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-32 h-32 rounded-full bg-[#ebdecb] opacity-20 filter blur-xl"></div> | |
| <div class="absolute -bottom-8 -right-8 w-40 h-40 rounded-full bg-[#d6e0e3] opacity-20 filter blur-xl"></div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 relative z-10"> | |
| "We believe in an Africa where technology serves as a bridge—<br class="hidden lg:block"> | |
| not just between people, but between potential and reality." | |
| </h2> | |
| <div class="flex flex-wrap justify-center gap-4 mt-16"> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">Technology</span> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">Africa</span> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">Sovereignty</span> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">AI</span> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">Innovation</span> | |
| <span class="px-4 py-2 bg-white bg-opacity-50 rounded-full text-sm font-medium">Community</span> | |
| </div> | |
| <div class="mt-16"> | |
| <button class="px-8 py-3 border border-[#1a1a1a] rounded-full text-sm font-medium hover:bg-[#1a1a1a] hover:text-white transition-all duration-300"> | |
| Read our manifesto | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-16 px-6 md:px-12 lg:px-24 bg-[#1a1a1a] text-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center"> | |
| <svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="white"/> | |
| <path d="M22 12L16 20L10 12" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <span class="ml-2 text-xl font-medium">Strive</span> | |
| </div> | |
| <p class="mt-4 text-gray-400 max-w-md"> | |
| Building Africa's digital future through interconnected products and platforms designed for impact. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">Navigation</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Products</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Vision</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">Connect</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">LinkedIn</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Instagram</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm">© 2023 Strive Technologies. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white transition"> | |
| <span class="sr-only">Privacy Policy</span> | |
| Privacy | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-white transition"> | |
| <span class="sr-only">Terms</span> | |
| Terms | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple scroll effect for navigation | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('glass-card'); | |
| header.classList.add('shadow-sm'); | |
| } else { | |
| header.classList.remove('glass-card'); | |
| header.classList.remove('shadow-sm'); | |
| } | |
| }); | |
| // Floating animation for product cards | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach((card, index) => { | |
| card.style.transitionDelay = `${index * 0.1}s`; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jojonocode/striveland" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |