Merge version_5_1782063152315 into main

Merge version_5_1782063152315 into main

src/App.tsx

@@ -4,6 +4,8 @@ import HomePage from './pages/HomePage';
 
 import PortfolioPage from "@/pages/PortfolioPage";
 import AboutPage from "@/pages/AboutPage";
+import ProductsPage from "@/pages/ProductsPage";
+import ContactPage from "@/pages/ContactPage";
 export default function App() {
   return (
     <Routes>
@@ -11,6 +13,8 @@ export default function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/portfolio" element={<PortfolioPage />} />
         <Route path="/about" element={<AboutPage />} />
+        <Route path="/products" element={<ProductsPage />} />
+        <Route path="/contact" element={<ContactPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -37,6 +37,10 @@ export default function Layout() {
   },
   { name: "Portfolio", href: "/portfolio" },
   { name: "About", href: "/about" },
+  { name: "Products", href: "/products" },
+  { name: "Contact", href: "/contact" },
+
+
 
 
 ];

src/pages/ContactPage.tsx

@@ -0,0 +1,11 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Button from "@/components/ui/Button";
+
+export default function ContactPage() {
+  return (
+    <>
+      <div data-webild-section="ContactCta"><section aria-label="Contact section" className="py-20"><div className="w-content-width mx-auto"><ScrollReveal variant="slide-up"><div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Connect With Us</p></div><TextAnimation text="Join our vibrant community of traders and builders. Access official resources at Orca.so, contribute to our open-source GitHub, or chat with us on social media." variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Visit Orca.so" href="https://orca.so" variant="primary" /><Button text="Explore GitHub" href="https://github.com/orca-so" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/pages/PortfolioPage.tsx

@@ -14,7 +14,7 @@ export default function PortfolioPage() {
 <div key="0.00%" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">0.00%</span><p className="text-base leading-snug text-balance">Average APY</p></div>
 <div key="0" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">0</span><p className="text-base leading-snug text-balance">Active Pools</p></div></GridOrCarousel></ScrollReveal></div></section></div>
       <div data-webild-section="FeaturesMediaCards"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Your Portfolio</p></div><TextAnimation text="Track Your Yields and Assets" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Monitor your liquidity positions, track earned fees, and manage your assets across all Orca pools in one unified dashboard." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Connect Wallet" href="#connect" variant="primary" /><Button text="Explore Pools" href="/liquidity-pools" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Real-Time Analytics" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded"><div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/financial-stock-market-graph-chart-background_53876-104930.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug">Real-Time Analytics</h3><p className="text-base leading-snug">View live performance metrics, including APY, TVL, and accumulated fees for your active positions.</p></div></div>
-<div key="Position Management" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded"><div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/cryptocurrency-coding-digital-black-background-open-source-blockchain-concept_53876-124640.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug">Position Management</h3><p className="text-base leading-snug">Easily adjust your price ranges, add or remove liquidity, and harvest your earned rewards.</p></div></div>
+<div key="Position Management" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded"><div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/cryptocurrency-coding-digital-black-background-open-source-blockchain-concept_53876-124640.jpg?_wi=1" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug">Position Management</h3><p className="text-base leading-snug">Easily adjust your price ranges, add or remove liquidity, and harvest your earned rewards.</p></div></div>
 <div key="Capital Efficiency" className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded"><div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-finance-data-analytics-graph-chart-concept_53876-124615.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug">Capital Efficiency</h3><p className="text-base leading-snug">Analyze your concentrated liquidity performance to ensure your capital is maximizing returns.</p></div></div></GridOrCarousel></ScrollReveal></div></section></div>
     </>
   );

src/pages/ProductsPage.tsx

@@ -0,0 +1,49 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+import { cls } from "@/lib/utils";
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import useBlogPosts from "@/hooks/useBlogPosts";
+import { Check } from "lucide-react";
+
+export default function ProductsPage() {
+  return (
+    <>
+      <div data-webild-section="FeaturesMediaGrid"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Wavebreak Ecosystem</p></div><TextAnimation text="Wavebreak | Tokens" variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Explore Orca's suite of high-performance DeFi tools. Trade fast, provide liquidity, and maximize your yields on Solana." variant="slide-up" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Start Trading" href="/trade" variant="primary" /><Button text="View Documentation" href="/docs" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Lightning-Fast Trading" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-vector/cryptocurrency-trading-concept-illustration_114360-4717.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Lightning-Fast Trading</h3><p className="text-base leading-snug text-balance">Swap tokens with minimal slippage and deep liquidity across the Solana ecosystem.</p></div></div>
+<div key="Concentrated Liquidity" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-vector/business-chart-concept-illustration_114360-1166.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Concentrated Liquidity</h3><p className="text-base leading-snug text-balance">Create custom pools and maximize capital efficiency to earn higher trading fees.</p></div></div>
+<div key="Portfolio Management" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-vector/dashboard-concept-illustration_114360-4122.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Portfolio Management</h3><p className="text-base leading-snug text-balance">Track your assets, monitor yields, and manage your liquidity positions in real-time.</p></div></div>
+<div key="Yield Staking" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-vector/digital-currency-concept-illustration_114360-4304.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Yield Staking</h3><p className="text-base leading-snug text-balance">Stake your tokens securely to earn passive rewards and participate in protocol governance.</p></div></div>
+<div key="Developer Docs" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-vector/programming-concept-illustration_114360-1351.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Developer Docs</h3><p className="text-base leading-snug text-balance">Integrate with Orca's smart contracts using our comprehensive SDKs and API guides.</p></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="FeaturesAlternatingSplit"><FeaturesAlternatingSplit
+        tag="Ecosystem Products"
+        title="Wavebreak | Tokens"
+        description="Explore Orca's suite of high-performance DeFi tools. Trade with minimal slippage, provide capital-efficient liquidity, and maximize your Solana yields."
+        primaryButton={{"text":"Launch App","href":"/trade"}}
+        secondaryButton={{"text":"Read Docs","href":"/docs"}}
+        items={[{"title":"Lightning-Fast Trading","description":"Swap tokens on Solana with minimal slippage and ultra-low fees using our smart router.","primaryButton":{"text":"Trade Now","href":"/trade"},"imageSrc":"https://img.freepik.com/free-vector/cryptocurrency-trading-concept-illustration_114360-4717.jpg"},{"title":"Capital-Efficient Pools","description":"Create concentrated liquidity pools to maximize your yield and earn deeper rewards with less capital.","primaryButton":{"text":"Create Pool","href":"/pools/create"},"imageSrc":"https://img.freepik.com/free-vector/digital-currency-concept-illustration_114360-4668.jpg"},{"title":"Track Your Portfolio","description":"Monitor your positions, track accumulated fees, and manage your liquidity across all Orca pools.","primaryButton":{"text":"View Portfolio","href":"/portfolio"},"imageSrc":"https://img.freepik.com/free-vector/dashboard-concept-illustration_114360-4122.jpg"},{"title":"Stake & Earn","description":"Lock your tokens to participate in governance and earn protocol emissions while securing the network.","primaryButton":{"text":"Start Staking","href":"/staking"},"imageSrc":"https://img.freepik.com/free-vector/bitcoin-mining-concept-illustration_114360-4357.jpg"},{"title":"Developer Documentation","description":"Build the next generation of DeFi on Solana with our comprehensive SDKs and API references.","primaryButton":{"text":"Read Docs","href":"/docs"},"imageSrc":"https://img.freepik.com/free-vector/programming-concept-illustration_114360-1351.jpg"}]}
+      /></div>
+      <div data-webild-section="FeaturesDetailedSteps"><section aria-label="Features detailed steps section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Wavebreak | Tokens</p></div><TextAnimation text="Explore the Orca Ecosystem" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Discover our suite of high-performance DeFi products designed for traders and liquidity providers on Solana." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Start Trading" href="/trade" variant="primary" /><Button text="View Documentation" href="/docs" variant="secondary" animationDelay={0.1} /></div></div><div className="flex flex-col w-content-width mx-auto gap-5"><ScrollReveal variant="fade" key="Portfolio Dashboard" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Manage Assets</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">Portfolio Dashboard</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">Track your DeFi performance.</h4><p className="text-base md:text-lg leading-snug text-balance">Monitor token balances, liquidity positions, and earned yields in one unified view.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/digital-currency-concept-with-tablet_23-2149161033.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade" key="Token Swaps" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Low Slippage</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">Token Swaps</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">Trade with lightning speed.</h4><p className="text-base md:text-lg leading-snug text-balance">Execute trades instantly on Solana with minimal slippage and efficient routing.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/cryptocurrency-coding-digital-black-background-open-source-blockchain-concept_53876-124640.jpg?_wi=2" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade" key="Create Liquidity Pools" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Provide Liquidity</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">Create Liquidity Pools</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">Maximize capital efficiency.</h4><p className="text-base md:text-lg leading-snug text-balance">Deploy concentrated liquidity pools to earn trading fees and optimize yields.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-data-analysis-graphs_53876-133902.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade" key="Asset Staking" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Earn Rewards</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">Asset Staking</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">Put your tokens to work.</h4><p className="text-base md:text-lg leading-snug text-balance">Stake your assets to secure the network and earn continuous rewards.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/golden-bitcoin-coins-with-growth-graph_1232-3151.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade" key="Developer Documentation" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Build on Orca</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">Developer Documentation</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">Integrate with our contracts.</h4><p className="text-base md:text-lg leading-snug text-balance">Access comprehensive guides, API references, and SDKs to build DeFi apps.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg" /></div></div></ScrollReveal></div></div></section></div>
+      <div data-webild-section="BlogSimpleCards"><section aria-label="Blog section" className="py-20"><div className="w-content-width mx-auto flex justify-center"><Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} /></div></section></div>
+      <div data-webild-section="MetricsFeatureCards"><section aria-label="Metrics section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Wavebreak | Tokens</p></div><TextAnimation text="Powerful DeFi Products" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Trade fast, earn deep, and build on Solana. Explore our suite of tools designed for maximum capital efficiency." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Launch App" href="/trade" variant="primary" /><Button text="Documentation" href="/docs" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Fast" className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="flex flex-col gap-0 min-w-0"><span className="text-8xl md:text-7xl font-semibold leading-none truncate">Fast</span><span className="text-xl truncate">Trading Execution</span></div><div className="flex flex-col gap-3 pt-5 border-t border-foreground/5"><div key="Lightning-fast swaps" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Lightning-fast swaps</span></div>
+<div key="Smart order routing" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Smart order routing</span></div>
+<div key="Minimal slippage" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Minimal slippage</span></div></div></div>
+<div key="Deep" className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="flex flex-col gap-0 min-w-0"><span className="text-8xl md:text-7xl font-semibold leading-none truncate">Deep</span><span className="text-xl truncate">Liquidity Pools</span></div><div className="flex flex-col gap-3 pt-5 border-t border-foreground/5"><div key="Concentrated liquidity" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Concentrated liquidity</span></div>
+<div key="Permissionless creation" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Permissionless creation</span></div>
+<div key="Custom fee tiers" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Custom fee tiers</span></div></div></div>
+<div key="Earn" className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="flex flex-col gap-0 min-w-0"><span className="text-8xl md:text-7xl font-semibold leading-none truncate">Earn</span><span className="text-xl truncate">Token Staking</span></div><div className="flex flex-col gap-3 pt-5 border-t border-foreground/5"><div key="Earn ORCA rewards" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Earn ORCA rewards</span></div>
+<div key="Governance voting" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Governance voting</span></div>
+<div key="Flexible lockups" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Flexible lockups</span></div></div></div>
+<div key="24/7" className="flex flex-col justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="flex flex-col gap-0 min-w-0"><span className="text-8xl md:text-7xl font-semibold leading-none truncate">24/7</span><span className="text-xl truncate">Portfolio Tracking</span></div><div className="flex flex-col gap-3 pt-5 border-t border-foreground/5"><div key="Yield analytics" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Yield analytics</span></div>
+<div key="Position management" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Position management</span></div>
+<div key="Performance history" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-sm leading-snug">Performance history</span></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -8,4 +8,6 @@ export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/portfolio', label: 'Portfolio', pageFile: 'PortfolioPage' },
   { path: '/about', label: 'About', pageFile: 'AboutPage' },
+  { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
+  { path: '/contact', label: 'Contact', pageFile: 'ContactPage' },
 ];