Update src/app/page.tsx
This commit is contained in:
283
src/app/page.tsx
283
src/app/page.tsx
@@ -2,16 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Clock, ShieldCheck, Zap } from "lucide-react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { ShieldCheck, Clock, Zap, FileText, Server, Cpu } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,197 +27,91 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Security Features", id: "features"},
|
||||
{
|
||||
name: "Tech Stack", id: "metrics"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="DocSecure"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Technology", id: "metrics" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="DocSecure"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Securing Your Academic Future with Blockchain"
|
||||
description="Protect student documents from unauthorized modification and unauthorized access. Fast, secure, and transparent verification."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started", href: "#features"},
|
||||
{
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3ttzi6"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8t4yc", alt: "User 1"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=awfb4x", alt: "User 2"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kvox5t", alt: "User 3"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=olgmo7", alt: "User 4"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=khfepe", alt: "User 5"},
|
||||
]}
|
||||
avatarText="Trusted by 5000+ Students"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
title="Student Document Security"
|
||||
description="Next-generation blockchain verification platform for academic records."
|
||||
dashboard={{
|
||||
title: "System Overview", stats: [
|
||||
{ title: "Verified Docs", values: [1200, 1500, 2000], description: "Monthly growth" },
|
||||
{ title: "Active Users", values: [5000, 6000, 8000], description: "Total student base" },
|
||||
{ title: "System Uptime", values: [99, 99.9, 99.99], description: "Reliability metrics" }
|
||||
],
|
||||
logoIcon: ShieldCheck,
|
||||
sidebarItems: [{ icon: FileText, active: true }, { icon: Server }, { icon: Cpu }],
|
||||
listItems: [{ icon: FileText, title: "New Certificate Verified", status: "Secure" }, { icon: ShieldCheck, title: "Wallet Link Verified", status: "Secure" }],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3ttzi6"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "The Digital Security Gap"},
|
||||
{
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nc90ik", alt: "Security Gap"},
|
||||
{
|
||||
type: "text", content: "Modern digital storage is convenient but prone to tampering and unauthorized access."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Redefining Document Trust"
|
||||
description={[
|
||||
"In an era where document forgery is increasingly sophisticated, traditional paper-based systems fail to provide adequate protection.", "Our platform bridges the gap by leveraging decentralized ledger technology to ensure every student record is immutable, authentic, and instantly verifiable."
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Strong Authentication", description: "Multi-layer login protection for secure user access.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=chjbuw", imageAlt: "Auth"},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=92vi7l", imageAlt: "Auth"}
|
||||
},
|
||||
{
|
||||
title: "Blockchain Integrity", description: "Hashing document data on the Ethereum ledger for permanent protection.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6kbdia", imageAlt: "Blockchain"},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ba1um2", imageAlt: "Blockchain"}
|
||||
},
|
||||
{
|
||||
title: "Secure Cloud Storage", description: "Firebase integrated document management system.", phoneOne: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z348v8", imageAlt: "Storage"},
|
||||
phoneTwo: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=edivx2", imageAlt: "Storage"}
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Unbreakable Security Features"
|
||||
description="Our system leverages advanced technologies to ensure document integrity and verification accuracy."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
title="Advanced Security Core"
|
||||
description="Engineered for maximum reliability and protection of sensitive academic data."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Blockchain Hashing", content: "Documents are hashed and recorded on the Ethereum ledger for permanent auditability." },
|
||||
{ id: "f2", title: "Firebase Infrastructure", content: "High-availability storage systems ensuring your data is always accessible but never exposed." },
|
||||
{ id: "f3", title: "Multi-Factor Authentication", content: "Secure access protocols that prevent unauthorized document viewing." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z348v8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "100%", title: "Integrity", description: "Immutable document storage", icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
id: "m2", value: "24/7", title: "Availability", description: "Secure access at any time", icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "m3", value: "Instant", title: "Verification", description: "Fast verification process", icon: Zap,
|
||||
},
|
||||
]}
|
||||
title="Built on Reliable Tech"
|
||||
description="High performance stack for secure academic document management."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Technological Stack"
|
||||
description="Robust components working in harmony for secure operations."
|
||||
gridVariant="bento-grid"
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{ id: "t1", value: "Ethereum", description: "Decentralized integrity" },
|
||||
{ id: "t2", value: "Firebase", description: "Secure cloud persistence" },
|
||||
{ id: "t3", value: "AES-256", description: "Advanced encryption standard" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Incredible Trust", quote: "Finally a solution that makes sense for modern student IDs.", name: "Sarah Johnson", role: "Registrar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8t4yc"},
|
||||
{
|
||||
id: "2", title: "Efficiency boost", quote: "Verification time has dropped by 80%.", name: "Dr. Michael Chen", role: "Professor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=awfb4x"},
|
||||
{
|
||||
id: "3", title: "Highly Secure", quote: "Blockchain implementation gives us true peace of mind.", name: "Emily Rodriguez", role: "Dean", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kvox5t"},
|
||||
{
|
||||
id: "4", title: "Seamless", quote: "Easy to integrate with our existing Firebase systems.", name: "David Kim", role: "CTO", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=olgmo7"},
|
||||
{
|
||||
id: "5", title: "Total Integrity", quote: "The smart contract validation is perfect for security.", name: "Lisa Wang", role: "IT Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=khfepe"},
|
||||
]}
|
||||
title="Trusted by Education Leaders"
|
||||
description="See why academic institutions trust our document security."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to secure your institution's future? Get in touch with our team today."
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttons={[{ text: "Book a Consultation" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "How does blockchain work here?", content: "We store document hashes on the Ethereum blockchain to detect unauthorized tampering."},
|
||||
{
|
||||
id: "q2", title: "Is my data stored publicly?", content: "Only the hash values are on the blockchain, keeping sensitive data private in secure cloud storage."},
|
||||
{
|
||||
id: "q3", title: "How do I verify a document?", content: "Just upload the file and our system verifies the cryptographic signature automatically."},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zkg9ba"
|
||||
title="Frequently Asked Questions"
|
||||
description="Learn more about our document security system."
|
||||
faqsAnimation="blur-reveal"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
title="Secure Your Documents Today"
|
||||
description="Join the future of academic document verification."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=guzble"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="DocSecure"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{
|
||||
label: "Security", href: "#features"},
|
||||
{
|
||||
label: "Tech Stack", href: "#metrics"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="DocSecure"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user