diff --git a/components/layout/Navigation.tsx b/components/layout/Navigation.tsx index f14d43e..62a5a65 100644 --- a/components/layout/Navigation.tsx +++ b/components/layout/Navigation.tsx @@ -1,25 +1,83 @@ -"use client" +"use client"; -import { useState, useEffect } from "react" -import { Button } from "../ui/button" -import { NexlayerLogo } from "../NexlayerLogo" +import { useState, useEffect } from "react"; +import { Button } from "../ui/button"; +import { NexlayerLogo } from "../NexlayerLogo"; + +// Simple hamburger icon component +const Hamburger = ({ + open, + onClick, +}: { + open: boolean; + onClick: () => void; +}) => ( + +); export const Navigation = () => { - const [isScrolled, setIsScrolled] = useState(false) + const [isScrolled, setIsScrolled] = useState(false); + + const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const handleScroll = () => { - setIsScrolled(window.scrollY > 0) + setIsScrolled(window.scrollY > 0); + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + // Close menu on route change or resize, and lock body scroll when menu is open + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 640) setMenuOpen(false); + }; + window.addEventListener("resize", handleResize); + + // Lock scroll by adding a class to html and body + if (menuOpen) { + document.body.classList.add("nxl-lock-scroll"); + document.documentElement.classList.add("nxl-lock-scroll"); + } else { + document.body.classList.remove("nxl-lock-scroll"); + document.documentElement.classList.remove("nxl-lock-scroll"); } - window.addEventListener("scroll", handleScroll) - return () => window.removeEventListener("scroll", handleScroll) - }, []) + return () => { + window.removeEventListener("resize", handleResize); + document.body.classList.remove("nxl-lock-scroll"); + document.documentElement.classList.remove("nxl-lock-scroll"); + }; + }, [menuOpen]); return ( - ) -} + ); +}; -export default Navigation +export default Navigation; + +if (typeof window !== "undefined") { + const styleId = "nxl-lock-scroll-style"; + if (!document.getElementById(styleId)) { + const style = document.createElement("style"); + style.id = styleId; + style.innerHTML = ` + .nxl-lock-scroll { + overflow: hidden !important; + touch-action: none !important; + overscroll-behavior: none !important; + } + `; + document.head.appendChild(style); + } +} diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx index faecc53..c3b059a 100644 --- a/components/sections/HeroSection.tsx +++ b/components/sections/HeroSection.tsx @@ -33,7 +33,7 @@ export const HeroSection = () => { -

+

The fastest way from code to cloud. 5,000+ apps deployed. The next is yours.

diff --git a/components/sections/HowItWorksSection.tsx b/components/sections/HowItWorksSection.tsx index c162142..c6a24a3 100644 --- a/components/sections/HowItWorksSection.tsx +++ b/components/sections/HowItWorksSection.tsx @@ -69,7 +69,7 @@ export const HowItWorksSection = () => { >
{ - const pricingPlans = [ { name: "Launch Plan", @@ -13,15 +12,17 @@ export const PricingAndFAQSection = () => { "Temporary project URLs", "Deploy directly from AI tools (Cursor, Claude Code, Windsurf)", "Access to Nexlayer API", - "Community support" + "Community support", ], cta: "Start Free", - ctaLink: "https://outgoing-violin-38-staging.authkit.app/sign-up?redirect_uri=https%3A%2F%2Fapp.nexlayer.io%2Fcallback&authorization_session_id=01K4JCGBPZSQKJ6J8XXGZ9QY4Z", - popular: false + ctaLink: + "https://outgoing-violin-38-staging.authkit.app/sign-up?redirect_uri=https%3A%2F%2Fapp.nexlayer.io%2Fcallback&authorization_session_id=01K4JCGBPZSQKJ6J8XXGZ9QY4Z", + popular: false, }, { name: "Scale Plan", - subtitle: "For AI builders & startup founders launching products that scale", + subtitle: + "For AI builders & startup founders launching products that scale", price: "$49", period: "/mo", description: "Everything you need to scale your AI products", @@ -31,16 +32,18 @@ export const PricingAndFAQSection = () => { "Unlimited production projects — no limits during beta", "1 custom domain per production app", "Real-time logs to monitor and debug instantly", - "Premium support via Email, Slack, Google Meets" + "Premium support via Email, Slack, Google Meets", ], cta: "Start scaling", - ctaLink: "https://outgoing-violin-38-staging.authkit.app/sign-up?redirect_uri=https%3A%2F%2Fapp.nexlayer.io%2Fcallback&authorization_session_id=01K4JCGBPZSQKJ6J8XXGZ9QY4Z", - popular: true + ctaLink: + "https://outgoing-violin-38-staging.authkit.app/sign-up?redirect_uri=https%3A%2F%2Fapp.nexlayer.io%2Fcallback&authorization_session_id=01K4JCGBPZSQKJ6J8XXGZ9QY4Z", + popular: true, }, { name: "Conquer plan", subtitle: "Enterprise custom pricing", - description: "For enterprises running mission-critical workloads at global scale.", + description: + "For enterprises running mission-critical workloads at global scale.", features: [ "Advanced security & compliance", "GPU/TPU support", @@ -48,66 +51,86 @@ export const PricingAndFAQSection = () => { "Dedicated infrastructure", "24/7 enterprise support", "Designated Technical Account Manager", - "Custom SLAs" + "Custom SLAs", ], cta: "Contact Sales", - ctaLink: "https://cal.com/nexlayer/nexlayer-enterprise-custom-plan?overlayCalendar=true", + ctaLink: + "https://cal.com/nexlayer/nexlayer-enterprise-custom-plan?overlayCalendar=true", popular: false, - enterprise: true - } - ] - + enterprise: true, + }, + ]; return ( -
+
{/* Pricing Section */}
-

Plans & Billing

+

+ Plans & Billing +

- Nexlayer offers flexible plans to meet your needs. Choose the plan that works best for you and your business. + Nexlayer offers flexible plans to meet your needs. Choose the plan + that works best for you and your business.

{pricingPlans.map((plan, index) => ( -
- {plan.popular && ( -
- - Most Popular - -
- )} - -
-

{plan.name}

-

{plan.subtitle}

-
- {plan.price} - {plan.period && {plan.period}} -
-

{plan.description}

-
+
+ {plan.popular && ( +
+ + Most Popular + +
+ )} -
- {plan.features.map((feature, featureIndex) => ( -
- ✓ - {feature} +
+

+ {plan.name} +

+

+ {plan.subtitle} +

+
+ + {plan.price} + + {plan.period && ( + + {plan.period} + + )}
- ))} +

{plan.description}

+
+ +
+ {plan.features.map((feature, featureIndex) => ( +
+ + ✓ + + {feature} +
+ ))} +
@@ -119,18 +142,19 @@ export const PricingAndFAQSection = () => { {/* AI Startup Program Section */}
-
+

AI Startup Program

- Only 25 founders accepted in 2025 — just 13 spots left. Go from MVP → Cloud in 24h, free. - Skip Kubernetes. Skip DevOps hires. Be live & investor-ready today. - Includes 12 months Fractional CTO support + $300,000+ value free. + Only 25 founders accepted in 2025 — just 13 spots left. Go + from MVP → Cloud in 24h, free. Skip Kubernetes. Skip DevOps + hires. Be live & investor-ready today. Includes 12 months + Fractional CTO support + $300,000+ value free.

-
-
- ) -} + ); +};