243 lines
16 KiB
TypeScript
243 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import { Mail, Sparkles, Play } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="none"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Technology", id: "technology" },
|
|
{ name: "Results", id: "metrics" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="FaceDetect AI"
|
|
bottomLeftText="Final Year Project"
|
|
bottomRightText="CS Department"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Advanced Face Detection AI"
|
|
description="A comprehensive machine learning system for real-time facial recognition and analysis. Built with cutting-edge computer vision algorithms to detect, analyze, and track faces with exceptional accuracy. Try the interactive demo below to see the system in action."
|
|
tag="Interactive Demo Available"
|
|
tagIcon={Play}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
buttons={[
|
|
{ text: "Try Face Detection Now", href: "#features" },
|
|
{ text: "Read Documentation", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/a-sophisticated-ai-face-detection-dashbo-1772639332863-ca6e7b81.png?_wi=1", imageAlt: "Face Detection Dashboard"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/an-illustrative-diagram-showing-the-face-1772639332770-162b63f2.png?_wi=1", imageAlt: "Detection Algorithm Visualization"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/a-video-frame-showing-real-time-face-det-1772639332037-5be0450c.png?_wi=1", imageAlt: "Real-time Face Detection"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
ariaLabel="Face Detection AI Hero Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="How It Works"
|
|
description={[
|
|
"The face detection system operates through a multi-stage pipeline designed for optimal performance. When an image or video frame is input, the system first applies preprocessing techniques to normalize lighting and enhance facial features, ensuring robust detection across varied environmental conditions.", "Our deep learning model uses advanced CNN architectures (ResNet and YOLOv8) that have been fine-tuned on diverse datasets containing faces from different angles, lighting conditions, and ethnicities. The neural network learns to identify distinctive facial patterns and features, enabling accurate localization even in challenging scenarios.", "The system outputs bounding boxes around detected faces along with confidence scores. In real-time video processing, the detector maintains tracking across frames while optimizing computational resources through model quantization and batch processing techniques. This enables production-ready deployment with frame rates exceeding 45 FPS on standard hardware."
|
|
]}
|
|
buttons={[
|
|
{ text: "View GitHub Repository", href: "https://github.com" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Project About Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
title="Interactive Demo Features"
|
|
description="Experience the face detection model in action. The interactive demo allows you to test the system with your own images or video feeds, showcasing real-time capabilities and accuracy metrics."
|
|
tag="Try It Live"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Real-Time Video Processing", description: "Upload video files or stream from your webcam. The system processes each frame in real-time, detecting and tracking multiple faces simultaneously with bounding box visualization and confidence scores.", tag: "Live Demo", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/a-video-frame-showing-real-time-face-det-1772639332037-5be0450c.png?_wi=2", imageAlt: "Real-time Detection Capability", buttons: []
|
|
},
|
|
{
|
|
id: "2", title: "Image Detection & Analysis", description: "Submit static images to the detector. The system identifies all faces within the image, provides precise bounding box coordinates, and calculates confidence metrics. Batch processing enables analysis of multiple images efficiently.", tag: "Batch Processing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/an-abstract-visualization-showing-accura-1772639332230-fa1f89d6.png?_wi=1", imageAlt: "Accuracy Metrics", buttons: []
|
|
},
|
|
{
|
|
id: "3", title: "Performance Metrics & Visualization", description: "The demo provides real-time performance statistics including detection speed (FPS), accuracy rates, and processing latency. Visual overlays show bounding boxes, confidence percentages, and facial region analysis.", tag: "Analytics", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/an-illustrative-diagram-showing-the-face-1772639332770-162b63f2.png?_wi=2", imageAlt: "Multi-Platform Integration", buttons: []
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Features Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="technology" data-section="technology">
|
|
<FeatureCardMedia
|
|
title="Technical Architecture"
|
|
description="Engineered with industry-standard frameworks and cutting-edge techniques for optimal performance and reliability. The model undergoes continuous optimization to enhance accuracy and speed."
|
|
tag="Technology Stack"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Deep Neural Networks", description: "Utilizes state-of-the-art CNN architectures including ResNet and YOLOv8 for rapid, accurate face localization and classification. The models have been trained on 10,000+ diverse facial images and optimized for both accuracy and speed.", tag: "ML Models", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/an-illustrative-diagram-showing-the-face-1772639332770-162b63f2.png?_wi=3", imageAlt: "Neural Network Architecture", buttons: []
|
|
},
|
|
{
|
|
id: "2", title: "Optimized Processing", description: "Implements advanced image preprocessing, augmentation techniques, and model quantization for efficient computation without sacrificing accuracy. Supports both CPU and GPU execution with automatic hardware detection.", tag: "Optimization", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/an-abstract-visualization-showing-accura-1772639332230-fa1f89d6.png?_wi=2", imageAlt: "Processing Optimization", buttons: []
|
|
},
|
|
{
|
|
id: "3", title: "Scalable Infrastructure", description: "Built for scalability with support for batch processing, distributed computing, and cloud deployment for enterprise-grade solutions. The system achieves 45 FPS processing speed and maintains sub-500ms latency even with multiple concurrent detections.", tag: "Infrastructure", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/a-sophisticated-ai-face-detection-dashbo-1772639332863-ca6e7b81.png?_wi=2", imageAlt: "Scalable System Design", buttons: []
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Technology Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Performance Benchmarks"
|
|
description="Demonstrating the model's performance across key technical benchmarks achieved through rigorous testing and continuous optimization."
|
|
tag="Results"
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "1", value: "99.8%", description: "Detection Accuracy Rate" },
|
|
{ id: "2", value: "45 FPS", description: "Real-Time Processing Speed" },
|
|
{ id: "3", value: "10,000+", description: "Training Dataset Images" },
|
|
{ id: "4", value: "<500ms", description: "Average Response Latency" }
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Metrics Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Recognition"
|
|
description="Insights from academic advisors and industry professionals who have reviewed and endorsed this project."
|
|
tag="Endorsements"
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Exceptional Technical Achievement", quote: "This face detection project demonstrates exceptional technical proficiency. The implementation showcases deep understanding of computer vision principles and advanced neural network architectures. The accuracy metrics and real-time performance are truly impressive.", name: "Dr. Sarah Mitchell", role: "Computer Science Professor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/professional-headshot-of-a-university-pr-1772639332155-6ba0f63b.png", imageAlt: "Dr. Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", title: "Production-Ready Quality", quote: "What strikes me most is how production-ready this implementation is. The system has been optimized for real-world deployment with excellent error handling and performance considerations. This goes well beyond typical final year project scope.", name: "James Chen", role: "Senior AI Research Engineer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/professional-headshot-of-an-industry-ai--1772639331898-c71b6df0.png", imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Excellent Project Execution", quote: "The project demonstrates outstanding execution across all phases - from research and development to deployment and testing. The documentation is comprehensive and the codebase is well-structured, making it easily maintainable and scalable.", name: "Emily Rodriguez", role: "Tech Project Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/professional-headshot-of-a-tech-industry-1772639332061-d84ef311.png", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Outstanding Innovation", quote: "This work represents outstanding innovation in the field of computer vision. The student has successfully implemented state-of-the-art techniques while maintaining focus on practical applicability. A remarkable achievement for an academic project.", name: "Michael Torres", role: "Director of AI Innovation Lab", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFP8AWGriHaele2O03S7pKsvu/professional-headshot-of-a-senior-tech-e-1772639331703-50466fbf.png", imageAlt: "Michael Torres"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Testimonials Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Connect With Me"
|
|
description="Interested in learning more about this face detection project? Have questions about the implementation or research methodology? I'd love to hear from you."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Send Message"
|
|
termsText="I'll get back to you within 24 hours. Your information is secure and will not be shared."
|
|
ariaLabel="Contact Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="FaceDetect AI"
|
|
columns={[
|
|
{
|
|
title: "Project", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Technology", href: "#technology" },
|
|
{ label: "Metrics", href: "#metrics" },
|
|
{ label: "Documentation", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "GitHub Repository", href: "https://github.com" },
|
|
{ label: "Research Paper", href: "#" },
|
|
{ label: "API Documentation", href: "#" },
|
|
{ label: "Technical Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Academic", items: [
|
|
{ label: "University", href: "#" },
|
|
{ label: "Department", href: "#" },
|
|
{ label: "Advisor", href: "#" },
|
|
{ label: "Acknowledgments", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Email", href: "mailto:contact@example.com" },
|
|
{ label: "Portfolio", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Face Detection AI Project. Final Year Computer Science Project."
|
|
ariaLabel="Site Footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|