Merge version_2 into main #2
344
src/app/page.tsx
344
src/app/page.tsx
@@ -2,325 +2,109 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import { MessageCircle, ShieldCheck, Mail, Zap, Terminal } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Learn",
|
||||
id: "techniques",
|
||||
},
|
||||
{
|
||||
name: "Roadmaps",
|
||||
id: "roadmap",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "support",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "support" },
|
||||
{ name: "Consultation", id: "contact" },
|
||||
{ name: "Support", id: "features" }
|
||||
]}
|
||||
brandName="GitCyber"
|
||||
brandName="GitCyber AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "cell-wave",
|
||||
}}
|
||||
title="Start Your Cybersecurity Journey"
|
||||
description="Master ethical hacking, cloud defense, and network security. Join the future of IT infrastructure with AI-driven guidance."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="AI-Powered IT Help Desk & Security"
|
||||
description="Professional cinematic support infrastructure. Get instant AI diagnostics, technical consultation, and enterprise-grade IT solutions."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#techniques",
|
||||
},
|
||||
{
|
||||
text: "Explore Platforms",
|
||||
href: "#platforms",
|
||||
},
|
||||
{ text: "Create Request", href: "#support" },
|
||||
{ text: "Consult Experts", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=445bdo"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "asset://hero-avatar-1",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-2",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-3",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-4",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "asset://hero-avatar-5",
|
||||
alt: "User avatar",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ security experts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Threat Monitoring",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "AI-Driven Vulnerability Scanning",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cloud-Native Security Defense",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Ethical Hacking Certification",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Incident Response",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-cyber" data-section="about-cyber">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
tag="Defense Strategy"
|
||||
title="What is Cybersecurity?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#roadmap",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="platform-about" data-section="platform-about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Your Learning Hub"
|
||||
title="GitCyber Platform"
|
||||
buttons={[
|
||||
{
|
||||
text: "Join Community",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="techniques" data-section="techniques">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Malware Analysis",
|
||||
"OSINT",
|
||||
"Password Security",
|
||||
"Digital Forensics",
|
||||
"Active Directory",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Nmap",
|
||||
"Wireshark",
|
||||
"Burp Suite",
|
||||
"Metasploit",
|
||||
"Web Pentesting",
|
||||
],
|
||||
}}
|
||||
title="Essential Techniques"
|
||||
description="Master core security skills from pentesting to forensics."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="roadmap" data-section="roadmap">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "01",
|
||||
title: "Networking",
|
||||
items: [
|
||||
"TCP/IP",
|
||||
"DNS",
|
||||
"HTTP",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "02",
|
||||
title: "Linux",
|
||||
items: [
|
||||
"Bash",
|
||||
"File Permissions",
|
||||
"Scripts",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "03",
|
||||
title: "Windows",
|
||||
items: [
|
||||
"Registry",
|
||||
"Group Policy",
|
||||
"PowerShell",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Learning Categories"
|
||||
description="Beginner to advanced educational pathways."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="platforms" data-section="platforms">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"TryHackMe",
|
||||
"HackTheBox",
|
||||
"VulnHub",
|
||||
"PortSwigger",
|
||||
"CyberDefenders",
|
||||
]}
|
||||
title="Top Platforms"
|
||||
description="The best tools to test your skills."
|
||||
/>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
title="AI-Enhanced IT Solutions"
|
||||
description="Leverage our intelligent infrastructure for seamless maintenance and robust security."
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="inline-image"
|
||||
features={[
|
||||
{ title: "Help Desk Support", description: "24/7 ticket handling.", buttonIcon: MessageCircle },
|
||||
{ title: "Security Audit", description: "Automated threat detection.", buttonIcon: ShieldCheck },
|
||||
{ title: "System Consults", description: "Professional IT guidance.", buttonIcon: Mail },
|
||||
{ title: "Fast Deployment", description: "Instant network optimization.", buttonIcon: Zap }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="support" data-section="support">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "PC Repair",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h8eaun&_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Network Setup",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vnibfd",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Malware Removal",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3hzx9g",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "System Optimization",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t4gja7",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Hardware Support",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m4a9jf",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "IT Consultancy",
|
||||
price: "Contact Us",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ob9lfh",
|
||||
},
|
||||
]}
|
||||
title="IT Support Services"
|
||||
description="Répare Votre Panne - Professional help at your fingertips."
|
||||
/>
|
||||
<ProductCardFour
|
||||
title="IT Service Catalog"
|
||||
description="Choose your required technical intervention."
|
||||
gridVariant="bento-grid"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "s1", name: "Help Desk", price: "$50", variant: "Priority", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h8eaun&_wi=1" },
|
||||
{ id: "s2", name: "Security", price: "$150", variant: "Advanced", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vnibfd" },
|
||||
{ id: "s3", name: "Optimization", price: "$100", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3hzx9g" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
<ContactSplit
|
||||
tag="Professional Consultation"
|
||||
title="Book an Expert"
|
||||
description="Discuss your complex IT infrastructure challenges with our senior consultants."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={true}
|
||||
title="Get Consultation"
|
||||
description="Contact us today at 0678276595 or via email."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Describe your IT issue...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h8eaun&_wi=2"
|
||||
inputPlaceholder="Your contact details"
|
||||
buttonText="Schedule Meeting"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="GitCyber"
|
||||
copyrightText="© 2025 GitCyber Security. All rights reserved."
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Support", items: [{ label: "AI Help Desk" }, { label: "Knowledge Base" }] },
|
||||
{ title: "Services", items: [{ label: "Security" }, { label: "Network" }] }
|
||||
]}
|
||||
bottomLeftText="© 2025 GitCyber AI"
|
||||
bottomRightText="Cinematic IT Infrastructure"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--background: #0a0a0c;
|
||||
--card: #16161a;
|
||||
--foreground: #f8f9fa;
|
||||
--primary-cta: #3b82f6;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta: #64748b;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #8b5cf6;
|
||||
--background-accent: #1e1e24;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user