Refactor home page
This commit is contained in:
Omar Oughriss
parent
698f7cbe86
commit
5232f6ef70
136
app/page.tsx
136
app/page.tsx
@ -5,11 +5,14 @@ import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Shield, ArrowRight, Key, Zap, Users, Globe, Database, Code, CheckCircle } from "lucide-react"
|
||||
import { ArrowRight, Key, Zap, Users, Globe, Database, Code, CheckCircle, Shield } from "lucide-react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import AuthModal from "@/components/4nk/AuthModal"
|
||||
import { Header, Footer } from "@/components/layout"
|
||||
import ProductCard from "@/components/ui/ProductCard"
|
||||
import { EXTERNAL_URLS, COMPANY_INFO } from "@/lib/constants"
|
||||
|
||||
export const iframeUrl = 'https://dev3.4nkweb.com'
|
||||
export const iframeUrl = EXTERNAL_URLS.iframe
|
||||
|
||||
export default function HomePage() {
|
||||
const [showAuthModal, setShowAuthModal] = useState(false)
|
||||
@ -28,25 +31,7 @@ export default function HomePage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
|
||||
{/* Header */}
|
||||
<header className="border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50 transition-colors duration-300">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield className="h-8 w-8 text-blue-600 dark:text-blue-400" />
|
||||
<span className="text-2xl font-bold text-gray-900 dark:text-gray-100">DocV</span>
|
||||
<Badge variant="secondary" className="ml-2">By 4NK</Badge>
|
||||
</div>
|
||||
<nav className="hidden md:flex items-center space-x-6">
|
||||
<Link href="#produit" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">Le produit</Link>
|
||||
<Link href="#securite" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">Sécurité</Link>
|
||||
<Link href="#tarifs" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">Tarifs</Link>
|
||||
<Link href="/formation">
|
||||
<Button variant="outline" className="dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 transition-colors duration-300">Formation</Button>
|
||||
</Link>
|
||||
<Button onClick={() => setShowAuthModal(true)} className="dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300">Connexion</Button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<Header onAuthClick={() => setShowAuthModal(true)} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
|
||||
@ -56,7 +41,7 @@ export default function HomePage() {
|
||||
<span className="text-blue-600 dark:text-blue-400">GED simple et souveraine</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||||
DocV propose une approche révolutionnaire de la gestion d'identité, garantissant sécurité, souveraineté et conformité dans la gestion de vos documents et processus métier.
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="">
|
||||
@ -89,43 +74,34 @@ export default function HomePage() {
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900 dark:text-gray-100">Le produit</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{/* Card 1 */}
|
||||
<Card className="border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300">
|
||||
<CardHeader>
|
||||
<Key className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
|
||||
<CardTitle className="dark:text-gray-100">Login cryptographique ultra-simplifié</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">Aucun mot de passe, aucun OTP, aucun mail, aucun code, aucune application.</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">Notifications transverses et temps réel sur l'avancement des traitements.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ProductCard
|
||||
icon={Key}
|
||||
title="Login cryptographique ultra-simplifié"
|
||||
description={[
|
||||
"Aucun mot de passe, aucun OTP, aucun mail, aucun code, aucune application.",
|
||||
"Notifications transverses et temps réel sur l'avancement des traitements."
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Card 2 */}
|
||||
<Card className="border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300">
|
||||
<CardHeader>
|
||||
<Zap className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
|
||||
<CardTitle className="dark:text-gray-100">IA embarquée</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">OCR, classification et extraction avec IA locale.</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">L'IA, ses données et ses traitements restent locaux.</p>
|
||||
<p className="text-gray-600 dark:text-gray-300 mt-2">Interface conversationnelle pour suivre les dossiers.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ProductCard
|
||||
icon={Zap}
|
||||
title="IA embarquée"
|
||||
description={[
|
||||
"OCR, classification et extraction avec IA locale.",
|
||||
"L'IA, ses données et ses traitements restent locaux.",
|
||||
"Interface conversationnelle pour suivre les dossiers."
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Card 3 */}
|
||||
<Card className="border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300">
|
||||
<CardHeader>
|
||||
<Users className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
|
||||
<CardTitle className="dark:text-gray-100">Facilite l'usage quotidien</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-2">• Réduction massive des emails</p>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-2">• Protection des identités et accès</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">• Traçabilité sur blockchain</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<ProductCard
|
||||
icon={Users}
|
||||
title="Facilite l'usage quotidien"
|
||||
description={[
|
||||
"• Réduction massive des emails",
|
||||
"• Protection des identités et accès",
|
||||
"• Traçabilité sur blockchain"
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Features */}
|
||||
@ -488,51 +464,7 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 dark:bg-gray-900 text-white py-12 px-4 transition-colors">
|
||||
<div className="container mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Shield className="h-8 w-8 text-blue-400" />
|
||||
<span className="text-2xl font-bold">DocV</span>
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
By 4NK
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-gray-400 dark:text-gray-300 mb-4">
|
||||
4NK, pionnier du Web 5.0. Conçoit et développe des solutions de souveraineté.
|
||||
</p>
|
||||
<p className="text-gray-400 dark:text-gray-300">contact@docv.fr</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 text-white dark:text-white">Navigation</h3>
|
||||
<div className="space-y-2">
|
||||
<Link href="#produit" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
|
||||
Le produit
|
||||
</Link>
|
||||
<Link href="#securite" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
|
||||
Sécurité
|
||||
</Link>
|
||||
<Link href="#tarifs" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
|
||||
Tarifs
|
||||
</Link>
|
||||
<Link href="/formation" className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
|
||||
Formation
|
||||
</Link>
|
||||
<Link href="" onClick={() => setShowAuthModal(true)} className="block text-gray-400 dark:text-gray-300 hover:text-white transition-colors">
|
||||
Connexion
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 dark:border-gray-700 mt-8 pt-8 text-center text-gray-400 dark:text-gray-300">
|
||||
<p>© 2025 4NK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Footer onAuthClick={() => setShowAuthModal(true)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user