Switch to version 2: modified src/app/styles/base.css

Merge version_3 into main

src/app/page.tsx

@@ -32,10 +32,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "Features", id: "#features" },
+        {
-        { name: "Metrics", id: "#metrics" },
+          name: "Features",          id: "#features"},
-        { name: "FAQ", id: "#faq" },
+        {
-        { name: "Contact", id: "#contact" }
+          name: "Metrics",          id: "#metrics"},
+        {
+          name: "FAQ",          id: "#faq"},
       ]}
       brandName="Cloudflare Shield"
     />
@@ -43,16 +45,23 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{ variant: "sparkles-gradient" }}
+      background={{
+        variant: "sparkles-gradient"}}
       title="Unmatched Performance and Security"
       description="Protecting your digital presence with cutting-edge security services designed to stop malicious bots and ensure your site is always available."
       mediaItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/internet-security-system_53876-167125.jpg", imageAlt: "Security Shield" },
+        {
-        { imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg", imageAlt: "Data Protection" },
+          imageSrc: "http://img.b2bpic.net/free-photo/internet-security-system_53876-167125.jpg",          imageAlt: "Security Shield"},
-        { imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-lock-hologram-desk-with-laptop_23-2152029068.jpg", imageAlt: "Network Safety" },
+        {
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-dots-lines-connected_1048-11946.jpg", imageAlt: "Cyber Resilience" },
+          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg",          imageAlt: "Data Protection"},
-        { imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6130.jpg", imageAlt: "Global Infrastructure" },
+        {
-        { imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6496.jpg", imageAlt: "Bot Protection" },
+          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-lock-hologram-desk-with-laptop_23-2152029068.jpg",          imageAlt: "Network Safety"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-dots-lines-connected_1048-11946.jpg",          imageAlt: "Cyber Resilience"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6130.jpg",          imageAlt: "Global Infrastructure"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/low-poly-background-with-connecting-lines-dots_1048-6496.jpg",          imageAlt: "Bot Protection"},
       ]}
     />
   </div>
@@ -62,8 +71,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="About Our Security Service"
       description={[
-        "We provide robust security services to protect your applications from malicious bots, scrapers, and automated threats.",        "Our platform leverages advanced AI and global network traffic analysis to ensure verification success while optimizing performance."
+        "We provide robust security services to protect your applications from malicious bots, scrapers, and automated threats.",        "Our platform leverages advanced AI and global network traffic analysis to ensure verification success while optimizing performance."]}
-      ]}
     />
   </div>
 
@@ -73,9 +81,18 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        { id: "f1", title: "Advanced Bot Detection", tags: ["AI", "Protection"], imageSrc: "http://img.b2bpic.net/free-photo/military-drone-control-outpost-spreading-misinformation-russian-government_482257-124740.jpg" },
+        {
-        { id: "f2", title: "Global Infrastructure", tags: ["Cloud", "Scale"], imageSrc: "http://img.b2bpic.net/free-photo/server-cabinets-preserving-critical-datasets-required-artificial-intelligence_482257-124539.jpg" },
+          id: "f1",          title: "Advanced Bot Detection",          tags: [
-        { id: "f3", title: "Data Encryption", tags: ["Secure", "Compliance"], imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-lock-white-surface-with-binary-code-it-concept-cybersecurity_181624-12311.jpg" },
+            "AI",            "Protection"],
+          imageSrc: "http://img.b2bpic.net/free-photo/military-drone-control-outpost-spreading-misinformation-russian-government_482257-124740.jpg"},
+        {
+          id: "f2",          title: "Global Infrastructure",          tags: [
+            "Cloud",            "Scale"],
+          imageSrc: "http://img.b2bpic.net/free-photo/server-cabinets-preserving-critical-datasets-required-artificial-intelligence_482257-124539.jpg"},
+        {
+          id: "f3",          title: "Data Encryption",          tags: [
+            "Secure",            "Compliance"],
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-lock-white-surface-with-binary-code-it-concept-cybersecurity_181624-12311.jpg"},
       ]}
       title="Powerful Defense Mechanisms"
       description="Equipped with industry-leading technology to keep your digital environment secure."
@@ -88,9 +105,15 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", title: "Blocks", value: "10B+", icon: Shield },
+        {
-        { id: "m2", title: "Latency", value: "15ms", icon: Zap },
+          id: "m1",          title: "Blocks",          value: "10B+",          icon: Shield,
-        { id: "m3", title: "Uptime", value: "99.99%", icon: Award },
+        },
+        {
+          id: "m2",          title: "Latency",          value: "15ms",          icon: Zap,
+        },
+        {
+          id: "m3",          title: "Uptime",          value: "99.99%",          icon: Award,
+        },
       ]}
       title="Global Impact Metrics"
       description="Trusted by millions, securing the web across the globe."
@@ -102,11 +125,16 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        { id: "t1", title: "Highly Effective", quote: "The bot protection is simply unmatched. We saw immediate results.", name: "Alex Smith", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-old-man-wearing-suit_23-2148831105.jpg" },
+        {
-        { id: "t2", title: "Performance Boost", quote: "Not only secure, but our load times have never been faster.", name: "Maria Garcia", role: "Lead Dev", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg" },
+          id: "t1",          title: "Highly Effective",          quote: "The bot protection is simply unmatched. We saw immediate results.",          name: "Alex Smith",          role: "CTO",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-old-man-wearing-suit_23-2148831105.jpg"},
-        { id: "t3", title: "Rock Solid", quote: "Reliable, robust, and essential for our enterprise architecture.", name: "John Doe", role: "IT Manager", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-disabilities-invalid-disabled-paralized-handicapped-immobilized-looking-camera-upset-tired-sitting-wheelchair-business-office-room-working-financial-project-with-team_482257-28442.jpg" },
+        {
-        { id: "t4", title: "Great Support", quote: "The support team helped us integrate seamlessly.", name: "Sarah Lee", role: "Security Analyst", imageSrc: "http://img.b2bpic.net/free-photo/front-view-businessman-with-crossed-arms_23-2148242733.jpg" },
+          id: "t2",          title: "Performance Boost",          quote: "Not only secure, but our load times have never been faster.",          name: "Maria Garcia",          role: "Lead Dev",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg"},
-        { id: "t5", title: "Game Changer", quote: "We finally have peace of mind regarding our data integrity.", name: "David Wang", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13573.jpg" },
+        {
+          id: "t3",          title: "Rock Solid",          quote: "Reliable, robust, and essential for our enterprise architecture.",          name: "John Doe",          role: "IT Manager",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-disabilities-invalid-disabled-paralized-handicapped-immobilized-looking-camera-upset-tired-sitting-wheelchair-business-office-room-working-financial-project-with-team_482257-28442.jpg"},
+        {
+          id: "t4",          title: "Great Support",          quote: "The support team helped us integrate seamlessly.",          name: "Sarah Lee",          role: "Security Analyst",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-businessman-with-crossed-arms_23-2148242733.jpg"},
+        {
+          id: "t5",          title: "Game Changer",          quote: "We finally have peace of mind regarding our data integrity.",          name: "David Wang",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13573.jpg"},
       ]}
       title="What Our Clients Say"
       description="Experience secure web browsing and robust defense systems."
@@ -117,7 +145,8 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={["Microsoft", "Google", "AWS", "Oracle", "IBM", "Intel", "Adobe"]}
+      names={[
+        "Microsoft",        "Google",        "AWS",        "Oracle",        "IBM",        "Intel",        "Adobe"]}
       title="Trusted Global Brands"
       description="Leading tech enterprises choose our security platform."
     />
@@ -128,11 +157,16 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        { id: "q1", title: "How does it work?", content: "Our platform verifies requests in milliseconds." },
+        {
-        { id: "q2", title: "Is it secure?", content: "Security is our primary commitment with state-of-the-art encryption." },
+          id: "q1",          title: "How does it work?",          content: "Our platform verifies requests in milliseconds."},
-        { id: "q3", title: "Can I integrate easily?", content: "Integration takes minutes with our robust API suite." },
+        {
-        { id: "q4", title: "What happens if I need support?", content: "We offer 24/7 dedicated support to assist with your integration needs." },
+          id: "q2",          title: "Is it secure?",          content: "Security is our primary commitment with state-of-the-art encryption."},
-        { id: "q5", title: "Legal Disclaimers", content: "All use is subject to our standard Terms of Service and Privacy Policy. This platform is not liable for data loss or service outages during maintenance cycles. Usage of this site confirms acceptance of these terms." }
+        {
+          id: "q3",          title: "Can I integrate easily?",          content: "Integration takes minutes with our robust API suite."},
+        {
+          id: "q4",          title: "What happens if I need support?",          content: "We offer 24/7 dedicated support to assist with your integration needs."},
+        {
+          id: "q5",          title: "Is there a legal disclaimer?",          content: "All use is subject to our standard Terms of Service and Privacy Policy, available at the footer."}
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about our security verification."
@@ -143,7 +177,8 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{ variant: "plain" }}
+      background={{
+        variant: "plain"}}
       tag="Contact"
       title="Get Started with Security"
       description="Ready to protect your digital environment? Fill out this inquiry form and our experts will contact you."
@@ -155,11 +190,13 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Cloudflare Shield"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
+      leftLink={{
-      rightLink={{ text: "Terms of Service", href: "#" }}
+        text: "Privacy Policy",        href: "/privacy"}}
+      rightLink={{
+        text: "Terms of Service",        href: "/terms"}}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-assistant), sans-serif;
+  font-family: var(--font-rubik), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-assistant), sans-serif;
+  font-family: var(--font-rubik), sans-serif;
 }