Bob AI: Populate src/pages/AboutPage.tsx (snippet builder, 2 sections)

This commit is contained in:
kudinDmitriyUp
2026-06-21 17:22:33 +00:00
parent 5295adf916
commit 885ead4012

View File

@@ -1,88 +1,22 @@
import React from "react";
import { routes } from "@/routes";
import NavbarCentered from "@/components/ui/NavbarCentered";
import AboutParallax from "@/components/sections/about/AboutParallax";
import AboutTextSplit from "@/components/sections/about/AboutTextSplit";
import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
import ContactCta from "@/components/sections/contact/ContactCta";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
export default function AboutPage() {
return (
<div className="min-h-screen bg-background text-foreground flex flex-col">
<NavbarCentered
logo="Orca.so"
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
ctaButton={{ text: "Launch App", href: "/app" }}
/>
<main className="flex-grow">
<AboutParallax
tag="Overview"
title="The apex predator of Solana DeFi"
description="Orca is the most user-friendly concentrated liquidity AMM on Solana. We believe in making decentralized finance accessible, efficient, and intuitive for everyone."
badge="About Orca"
frontImageSrc="https://images.unsplash.com/photo-1551244072-5d12893278ab?auto=format&fit=crop&q=80"
backImageSrc="https://images.unsplash.com/photo-1639762681485-074b7f4fc8ea?auto=format&fit=crop&q=80"
/>
<AboutTextSplit
title="Our Mission & Vision"
descriptions={[
"Orca was founded with a simple goal: to create a decentralized exchange that is as easy to use as a centralized one, without compromising on security or decentralization.",
"We are committed to providing the best trading experience on Solana, with lightning-fast swaps, minimal fees, and deep liquidity. Our concentrated liquidity model ensures that capital is used efficiently, benefiting both traders and liquidity providers.",
"Beyond technology, we are dedicated to the community and the ecosystem. A portion of our fees goes towards the Orca Climate Fund, supporting initiatives that combat climate change and promote sustainability."
]}
primaryButton={{ text: "Read our Docs", href: "/docs" }}
secondaryButton={{ text: "View Climate Fund", href: "/climate" }}
/>
<MetricsSimpleCards
tag="Ecosystem Scale"
title="Powered by the Community"
description="Orca has grown to become a foundational pillar of the Solana DeFi ecosystem, trusted by thousands of users daily."
metrics={[
{ value: "$1B+", description: "Total Value Locked" },
{ value: "50M+", description: "Total Swaps Executed" },
{ value: "$100M+", description: "Daily Trading Volume" },
{ value: "100k+", description: "Active Monthly Users" }
]}
/>
<ContactCta
tag="Join the Pod"
text="Ready to dive into the Solana ecosystem with the most intuitive AMM?"
primaryButton={{ text: "Start Trading", href: "/trade" }}
secondaryButton={{ text: "Join Discord", href: "/discord" }}
/>
</main>
<FooterSimple
brand="Orca.so"
columns={[
{
title: "Product",
items: [
{ label: "Trade", href: "/trade" },
{ label: "Pools", href: "/pools" },
{ label: "Portfolio", href: "/portfolio" }
]
},
{
title: "Resources",
items: [
{ label: "Documentation", href: "/docs" },
{ label: "Developers", href: "/build" },
{ label: "Blog", href: "/blog" }
]
}
]}
copyright="© 2024 Orca.so. All rights reserved."
links={[
{ label: "Terms of Service", href: "/terms" },
{ label: "Privacy Policy", href: "/privacy" }
]}
/>
</div>
<>
<div data-webild-section="AboutTextSplit"><section aria-label="About section" className="py-20"><div className="flex flex-col gap-20 mx-auto w-content-width"><div className="flex flex-col md:flex-row gap-3 md:gap-15"><div className="w-full md:w-1/2"><TextAnimation text="Pioneering Capital Efficiency on Solana" variant="fade" gradientText={true} tag="h2" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance" /></div><div className="flex flex-col gap-2 w-full md:w-1/2"><TextAnimation key={0} text="Orca is the premier decentralized exchange on Solana, designed to provide traders and liquidity providers with unparalleled capital efficiency." variant="fade" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" />
<TextAnimation key={1} text="By leveraging concentrated liquidity pools, we ensure minimal slippage for users while maximizing yield potential for those who provide liquidity." variant="fade" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" />
<TextAnimation key={2} text="Whether you are a high-frequency trader or a DeFi builder, Orca delivers the speed and depth required to thrive in modern crypto markets." variant="fade" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" /><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Start Trading" href="/trade" variant="primary" /><Button text="Explore Pools" href="/pools" variant="secondary" animationDelay={0.1} /></div></div></div><div className="w-full border-b border-foreground/5" /></div></section></div>
<div data-webild-section="AboutFeaturesSplit"><AboutFeaturesSplit
tag="About Orca"
title="The Apex Predator of Solana DeFi"
description="Orca is the most user-friendly, capital-efficient decentralized exchange on Solana. We empower traders and liquidity providers to maximize returns with minimal slippage."
primaryButton={{"text":"Start Trading","href":"/trade"}}
secondaryButton={{"text":"Provide Liquidity","href":"/pools"}}
items={[{"icon":"Zap","title":"Lightning Fast","description":"Built on Solana for sub-second trade execution and near-zero gas fees."},{"icon":"Droplet","title":"Deep Liquidity","description":"Concentrated liquidity pools ensure the best prices and lowest slippage."},{"icon":"ShieldCheck","title":"Audited & Secure","description":"Smart contracts rigorously audited by top-tier security firms."},{"icon":"Coins","title":"Capital Efficient","description":"Maximize yield on your assets with our optimized AMM architecture."}]}
imageSrc="https://img.freepik.com/premium-photo/abstract-blue-wave-background-with-glowing-lines-dots-concept-technology-connection-data-transfer_1421-4444.jpg"
/></div>
</>
);
}
}