243 lines
16 KiB
TypeScript
243 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, Zap, Award, Cpu, GitBranch, Star, HelpCircle, Rocket, TrendingUp, Database, Clock, Twitter, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="FaceID Pro"
|
|
navItems={[
|
|
{ name: "Capabilities", id: "capabilities" },
|
|
{ name: "Performance", id: "performance" },
|
|
{ name: "Technology", id: "technology" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Request Demo", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Next-Generation Facial Recognition Powered by AI"
|
|
description="Advanced facial recognition system using GAN-based data augmentation and transfer learning. Achieve 95%+ accuracy even with limited datasets. Deploy secure, intelligent face identification for security systems, authentication, and surveillance applications."
|
|
tag="AI-Powered Recognition"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "circleGradient" }}
|
|
buttons={[
|
|
{ text: "Explore Technology", href: "#technology" },
|
|
{ text: "View Demo", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/a-sophisticated-facial-recognition-dashb-1773115623704-81c91287.png", imageAlt: "Facial Recognition Dashboard Interface"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/advanced-analytics-dashboard-showing-fac-1773115625236-6579be17.png?_wi=1", imageAlt: "Performance Metrics and Analytics"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by Security Experts"
|
|
/>
|
|
</div>
|
|
|
|
<div id="capabilities" data-section="capabilities">
|
|
<FeatureCardTwentySeven
|
|
title="Core Capabilities"
|
|
description="Discover the powerful features that make our facial recognition system industry-leading"
|
|
tag="Advanced Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "real-time", title: "Real-Time Detection", description: "Detect and recognize faces instantly from live camera feeds with ultra-low latency processing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/real-time-facial-recognition-processing--1773115624008-ad062fc8.png?_wi=1", imageAlt: "Real-Time Multi-Camera Processing"},
|
|
{
|
|
id: "lighting-robust", title: "Lighting Adaptive", description: "Maintain high accuracy across varying lighting conditions, angles, and facial expressions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/showcase-of-facial-recognition-robustnes-1773115624828-7481bc60.png?_wi=1", imageAlt: "Facial Recognition Lighting Variations"},
|
|
{
|
|
id: "gan-enhanced", title: "GAN Data Augmentation", description: "Generate synthetic training images to expand dataset diversity and improve recognition robustness.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/abstract-visualization-of-gan-based-data-1773115624170-83ec4f45.png?_wi=1", imageAlt: "GAN-Based Data Augmentation Process"},
|
|
{
|
|
id: "transfer-learning", title: "Transfer Learning", description: "Leverage pre-trained CNN models for rapid deployment and reduced training time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/conceptual-representation-of-transfer-le-1773115624184-a98d8069.png?_wi=1", imageAlt: "Transfer Learning Architecture"},
|
|
]}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="performance" data-section="performance">
|
|
<MetricCardThree
|
|
title="Performance Metrics"
|
|
description="Quantified results demonstrating system superiority and reliability"
|
|
tag="Verified Results"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "accuracy", icon: TrendingUp, title: "Recognition Accuracy", value: "95%+" },
|
|
{ id: "latency", icon: Zap, title: "Processing Speed", value: "<100ms" },
|
|
{ id: "dataset", icon: Database, title: "Dataset Expansion", value: "40%" },
|
|
{ id: "training", icon: Clock, title: "Training Time", value: "60% Faster" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="technology" data-section="technology">
|
|
<MetricSplitMediaAbout
|
|
title="Advanced Technology Stack"
|
|
description="Built with cutting-edge deep learning frameworks and proven computer vision libraries. Our system combines the latest AI research with production-grade reliability to deliver enterprise-class facial recognition."
|
|
tag="Technology Foundation"
|
|
tagIcon={Cpu}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "TensorFlow", title: "Deep Learning Framework" },
|
|
{ value: "OpenCV", title: "Computer Vision Processing" },
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/system-architecture-diagram-for-facial-r-1773115623722-095e03e5.png"
|
|
imageAlt="System Architecture Diagram"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="architecture" data-section="architecture">
|
|
<FeatureCardTwentySeven
|
|
title="System Architecture"
|
|
description="Modular pipeline designed for scalability, reliability, and continuous improvement"
|
|
tag="Technical Design"
|
|
tagIcon={GitBranch}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "input", title: "Image Input Module", description: "Accept facial images from datasets, cameras, or API endpoints with flexible format support.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/facial-recognition-security-verification-1773115624142-50e24bba.png", imageAlt: "Image Input Processing"},
|
|
{
|
|
id: "augmentation", title: "GAN Augmentation", description: "Generate diverse synthetic facial variations to enhance training dataset quality and coverage.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/abstract-visualization-of-gan-based-data-1773115624170-83ec4f45.png?_wi=2", imageAlt: "GAN Data Augmentation"},
|
|
{
|
|
id: "training", title: "Model Training", description: "Train CNNs using transfer learning with both original and synthetic images for optimal accuracy.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/conceptual-representation-of-transfer-le-1773115624184-a98d8069.png?_wi=2", imageAlt: "Model Training Process"},
|
|
{
|
|
id: "recognition", title: "Face Recognition", description: "Identify and match detected faces against trained dataset with confidence scoring.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/advanced-analytics-dashboard-showing-fac-1773115625236-6579be17.png?_wi=2", imageAlt: "Recognition Results"},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Trusted by Industry Leaders"
|
|
description="See how organizations are leveraging our facial recognition technology for enhanced security and operational efficiency"
|
|
tag="Success Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Dr. Sarah Mitchell", role: "Chief Security Officer", company: "SecureVision Corp", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/team-collaboration-in-facial-recognition-1773115623760-9faa2503.png", imageAlt: "Dr. Sarah Mitchell"},
|
|
{
|
|
id: "2", name: "James Chen", role: "Head of AI Research", company: "TechGuard Systems", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/success-metrics-and-kpi-visualization-sh-1773115625003-4c976c3c.png", imageAlt: "James Chen"},
|
|
{
|
|
id: "3", name: "Elena Rodriguez", role: "Director of Operations", company: "SmartSecurity Solutions", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/real-time-facial-recognition-processing--1773115624008-ad062fc8.png?_wi=2", imageAlt: "Elena Rodriguez"},
|
|
{
|
|
id: "4", name: "Michael Zhang", role: "Product Manager", company: "BiometricTech Inc", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AjomZPI8FpSPdbgEAGpoao08WY/showcase-of-facial-recognition-robustnes-1773115624828-7481bc60.png?_wi=2", imageAlt: "Michael Zhang"},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "500+", label: "Enterprise Deployments" },
|
|
{ value: "99.2%", label: "Average Accuracy Rate" },
|
|
{ value: "24/7", label: "System Uptime" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about our facial recognition system, technology, and implementation"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does GAN-based data augmentation improve accuracy?", content: "Our GAN module generates synthetic facial images with variations in lighting, angles, and expressions. This expands the training dataset diversity without expensive manual data collection, allowing the model to learn robust features that work in real-world scenarios with 40% more training data effectively available."},
|
|
{
|
|
id: "2", title: "What is transfer learning and why does it matter?", content: "Transfer learning leverages pre-trained CNN models trained on massive facial datasets. Instead of training from scratch, we fine-tune these models for your specific use case, reducing training time by 60% and requiring significantly smaller datasets while maintaining high accuracy."},
|
|
{
|
|
id: "3", title: "How fast is the real-time recognition processing?", content: "Our system processes facial recognition in under 100 milliseconds per frame, enabling real-time applications. This allows for live camera feed analysis, instant identity verification, and responsive security monitoring across multiple simultaneous feeds."},
|
|
{
|
|
id: "4", title: "What are the security and privacy considerations?", content: "All facial data is encrypted end-to-end and stored securely. The system supports on-premise deployment for maximum privacy control. We comply with GDPR, CCPA, and other data protection regulations. Facial templates are never transmitted unencrypted, and biometric data retention policies are fully customizable."},
|
|
{
|
|
id: "5", title: "Can the system handle challenging conditions like poor lighting?", content: "Yes. Our GAN augmentation training specifically includes variations in lighting, pose, and facial expressions. The model achieves 95%+ accuracy even in challenging conditions like dim lighting, side angles, and with facial occlusions like glasses or masks."},
|
|
{
|
|
id: "6", title: "How do I get started with implementation?", content: "Contact our team for a personalized demo and consultation. We provide full integration support, API documentation, SDKs for major platforms, and on-site implementation assistance. Typical deployment timeline is 2-4 weeks from demo to production-ready system."},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started Today"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Deploy Advanced Facial Recognition?"
|
|
description="Experience the power of AI-driven facial recognition with GAN augmentation and transfer learning. Request a demo today and see how our system can transform your security operations."
|
|
buttons={[
|
|
{ text: "Request Demo", href: "https://calendly.com/faceid-pro/demo" },
|
|
{ text: "View Documentation", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "circleGradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="FaceID Pro"
|
|
copyrightText="© 2025 FaceID Pro | Advanced Facial Recognition Technology"
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|