121 lines
5.5 KiB
TypeScript
121 lines
5.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
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, FileText, Server, Cpu } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<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"
|
|
button={{ text: "Get Started" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Student Document Security"
|
|
description="Next-generation blockchain verification platform for academic records."
|
|
background={{ variant: "plain" }}
|
|
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", buttons: [{ text: "Explore" }]
|
|
}}
|
|
/>
|
|
</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">
|
|
<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." }
|
|
]}
|
|
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-video.mp4"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</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" }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</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="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="DocSecure"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |