feat: restyle feature comparison table

Merge version_22_1778183346446 into main

src/App.tsx

@@ -7,6 +7,8 @@ import PricingPage from './pages/Pricing';
 import ClientsPage from './pages/Clients';
 import FaqPage from './pages/Faq';
 import MetricsPage from './pages/Metrics';
+import AboutPage from './pages/misc/AboutPage';
+
 
 export default function App() {
   return (
@@ -19,6 +21,8 @@ export default function App() {
         <Route path="/clients" element={<ClientsPage />} />
         <Route path="/faq" element={<FaqPage />} />
         <Route path="/metrics" element={<MetricsPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -33,7 +33,12 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "/metrics"
-  }
+  },
+  {
+    "name": "About",
+    "href": "/about"
+  },
+
 ];
 
   return (
@@ -77,7 +82,7 @@ export default function Layout() {
           items: [
             {
               label: "About Us",
-              href: "#",
+              href: "/about",
             },
             {
               label: "Careers",

src/components/sections/footer/FooterBasic.tsx

@@ -48,10 +48,19 @@ const FooterBasic = ({
               ))}
             </div>
           ))}
+          <div className="w-full md:w-1/3">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d214827.9391993325!2d-117.32725643033326!3d32.74946396037413!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d9530fad921e4b%3A0xd3a21fdfd15df79!2sSan%20Diego%2C%20CA%2C%20USA!5e0!3m2!1sen!2sua!4v1715192157289!5m2!1sen!2sua"
+              width="100%"
+              height="200"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            ></iframe>
+          </div>
         </div>
-
         <div className="w-full h-px bg-foreground/20" />
-
         <div className="w-full flex items-center justify-between pt-5">
           <span className="text-sm opacity-50">{leftText}</span>
           <span className="text-sm opacity-50">{rightText}</span>

src/components/sections/hero/HeroBillboardScroll.tsx

@@ -1,82 +1,79 @@
-import { ArrowDown } from 'lucide-react';
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+type HeroBillboardScrollProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const HeroBillboardScroll = ({
-  className,
   tag,
   title,
   description,
   primaryButton,
   secondaryButton,
   imageSrc,
-}: {
-  className?: string;
-  tag?: string;
-  title?: string;
-  description?: string;
-  primaryButton?: {
-    text: string;
-    href: string;
-  };
-  secondaryButton?: {
-    text: string;
-    href: string;
-  };
-  imageSrc?: string;
-}) => {
+  videoSrc,
+}: HeroBillboardScrollProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({ target: containerRef });
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
+
   return (
-    <div
-      className={cn(
-        'relative flex h-svh w-full flex-col items-center justify-center overflow-hidden',
-        className,
-      )}
-    >
+    <section aria-label="Hero section" className="relative mb-20">
+      <HeroBackgroundSlot />
       <div
-        className="absolute inset-0 z-0"
-        style={{
-          backgroundImage: `url(${imageSrc})`,
-          backgroundPosition: 'bottom',
-          backgroundSize: 'cover',
-        }}
-      />
-      <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/80 to-transparent" />
-      <div
-        className="z-20 flex flex-col items-center justify-center gap-4 p-5 text-center text-white"
+        ref={containerRef}
+        className="pt-25 pb-20 md:py-30 perspective-distant"
       >
-        {tag && (
-          <div className="inline-block rounded-theme-full bg-white/10 px-3 py-1 text-sm">
-            {tag}
+        <div className="w-content-width mx-auto">
+          <div className="flex flex-col items-center gap-2 text-center">
+            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+
+            <TextAnimation
+              text={title}
+              variant="fade"
+              gradientText={true}
+              tag="h1"
+              className="text-6xl font-medium text-balance"
+            />
+
+            <TextAnimation
+              text={description}
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="text-base md:text-lg leading-tight text-balance"
+            />
+
+            <div className="flex flex-wrap justify-center gap-3 mt-3">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+            </div>
           </div>
-        )}
-        {title && (
-          <h1 className="text-4xl font-bold md:text-6xl">
-            {title}
-          </h1>
-        )}
-        {description && (
-          <p className="max-w-prose text-lg text-white/80">{description}</p>
-        )}
-        <div className="mt-4 flex gap-2">
-          {primaryButton && (
-            <Button as="a" href={primaryButton.href}>
-              {primaryButton.text}
-            </Button>
-          )}
-          {secondaryButton && (
-            <Button as="a" href={secondaryButton.href} variant="secondary">
-              {secondaryButton.text}
-            </Button>
-          )}
         </div>
+
+        <div className="w-content-width mx-auto mt-8 p-3 card rounded overflow-hidden rotate-x-20 md:hidden">
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5" />
+        </div>
+
+        <motion.div
+          style={{ rotateX: rotate, scale }}
+          className="w-content-width mx-auto mt-5 2xl:mt-2 p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden hidden md:block"
+        >
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-video" />
+        </motion.div>
       </div>
-      <div
-        className="absolute bottom-5 z-20"
-      >
-        <ArrowDown className="animate-bounce text-white" />
-      </div>
-    </div>
+    </section>
   );
 };
 

src/components/sections/pricing/FeatureComparison.tsx

@@ -0,0 +1,96 @@
+import { CheckCircle, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const features = [
+  {
+    category: 'Core Features',
+    items: [
+      { name: 'Basic Analytics', tiers: [true, true, true] },
+      { name: 'Standard Security', tiers: [true, true, true] },
+      { name: '500 Transactions/month', tiers: [true, false, false] },
+      { name: 'Unlimited Transactions', tiers: [false, true, true] },
+      { name: 'Automated Reporting', tiers: [false, true, true] },
+    ],
+  },
+  {
+    category: 'Support & Services',
+    items: [
+      { name: 'Email Support', tiers: [true, true, true] },
+      { name: '24/7 Priority Support', tiers: [false, true, true] },
+      { name: 'Dedicated Account Manager', tiers: [false, false, true] },
+    ],
+  },
+  {
+    category: 'Enterprise Solutions',
+    items: [
+      { name: 'Custom Integrations', tiers: [false, false, true] },
+      { name: 'On-premise Deployment', tiers: [false, false, true] },
+      { name: 'SLA & Compliance Guarantees', tiers: [false, false, true] },
+    ],
+  },
+];
+
+const tiers = [
+  { name: 'Startups', href: '#', price: '$99' },
+  { name: 'Growing Businesses', href: '#', price: '$499' },
+  { name: 'Enterprises', href: '#', price: 'Custom' },
+];
+
+export default function FeatureComparison() {
+  return (
+    <div className="isolate bg-background-subtle">
+      <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
+          <h2 className="text-base font-semibold leading-7 text-brand">Pricing</h2>
+          <p className="mt-2 text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
+            The right price for you, whoever you are
+          </p>
+        </div>
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-foreground-subtle">
+          Choose the plan that best fits your needs, from small startups to large enterprises.
+        </p>
+
+        {/* Comparison table */}
+        <div className="mt-16">
+          <div className="grid grid-cols-4 gap-y-6 sm:grid-cols-4">
+            {tiers.map((tier, index) => (
+              <div key={tier.name} className={cn('col-start-2 sm:col-start-2', {
+                'sm:col-start-3': index === 1,
+                'sm:col-start-4': index === 2,
+              })}>
+                <h3 className="text-lg font-semibold leading-6 text-foreground text-center">{tier.name}</h3>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8 space-y-4">
+            {features.map((category) => (
+              <div key={category.category}>
+                <h4 className="text-lg font-semibold leading-6 text-foreground">{category.category}</h4>
+                <div className="relative mt-6">
+                  <div className="absolute inset-y-0 left-0 w-full bg-background-subtle" aria-hidden="true" />
+                  <div className="relative grid grid-cols-4">
+                    {category.items.map((item) => (
+                      <div key={item.name} className="col-span-4 grid grid-cols-4 items-center border-b border-border-muted py-4">
+                        <div className="col-span-1 text-sm font-medium leading-6 text-foreground-subtle">{item.name}</div>
+                        {item.tiers.map((included, i) => (
+                          <div key={i} className="col-span-1 flex justify-center">
+                            {included ? (
+                              <CheckCircle className="h-5 w-5 text-brand" aria-hidden="true" />
+                            ) : (
+                              <Minus className="h-5 w-5 text-foreground-muted" aria-hidden="true" />
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/sections/pricing/PricingMediaCards.tsx

@@ -68,7 +68,10 @@ const PricingMediaCards = ({
             </div>
 
             <div className="flex flex-col justify-center gap-5 w-full md:w-1/2">
-              <span className="px-3 py-1 w-fit text-sm card rounded">{plan.price}{plan.period}</span>
+              <div className="flex items-baseline gap-2">
+                <span className="text-5xl font-bold">{plan.price}</span>
+                <span className="text-sm text-muted-foreground">/{plan.period}</span>
+              </div>
               <h3 className="text-4xl md:text-5xl font-medium truncate">{plan.tag}</h3>
 
               <div className="flex flex-col gap-3">

src/components/sections/pricing/PricingSection.tsx

@@ -0,0 +1,139 @@
+import { CheckIcon } from 'lucide-react';
+
+const tiers = [
+  {
+    name: 'Starter',
+    id: 'tier-starter',
+    href: '#',
+    price: { monthly: '$49', annually: '$490' },
+    description: 'For small teams just getting started.',
+    features: [
+      'Up to 1,000 subscribers',
+      'Basic analytics',
+      'Email support',
+    ],
+  },
+  {
+    name: 'Team',
+    id: 'tier-team',
+    href: '#',
+    price: { monthly: '$99', annually: '$990' },
+    description: 'For growing teams that need more power.',
+    features: [
+      'Up to 5,000 subscribers',
+      'Advanced analytics',
+      'Priority email support',
+      'Integration with popular tools',
+    ],
+  },
+  {
+    name: 'Enterprise',
+    id: 'tier-enterprise',
+    href: '#',
+    price: { monthly: 'Contact us', annually: 'Contact us' },
+    description: 'For large organizations with custom needs.',
+    features: [
+      'Unlimited subscribers',
+      'Custom analytics and reporting',
+      '24/7 phone and email support',
+      'Dedicated account manager',
+      'Custom integrations',
+    ],
+  },
+];
+
+export default function PricingSection() {
+  return (
+    <div className="isolate overflow-hidden bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 pb-96 pt-24 text-center sm:pt-32 lg:px-8">
+        <div className="mx-auto max-w-4xl">
+          <h2 className="text-base font-semibold leading-7 text-indigo-400">Pricing</h2>
+          <p className="mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">
+            The right price for you, <br className="hidden sm:inline lg:hidden" />
+            whoever you are
+          </p>
+        </div>
+        <div className="relative mt-6">
+          <p className="mx-auto max-w-2xl text-lg leading-8 text-white/60">
+            Choose a plan that fits your needs. All plans come with a 30-day free trial.
+          </p>
+          <svg
+            viewBox="0 0 1208 1024"
+            className="absolute -top-10 left-1/2 -z-10 h-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:-top-12 md:-top-20 lg:-top-12 xl:top-0"
+          >
+            <ellipse
+              cx={604}
+              cy={512}
+              fill="url(#6d1bd035-0dd1-437e-93fa-59d316231eb0)"
+              rx={604}
+              ry={512}
+            />
+            <defs>
+              <radialGradient id="6d1bd035-0dd1-437e-93fa-59d316231eb0">
+                <stop stopColor="#7775D6" />
+                <stop offset={1} stopColor="#E935C1" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      <div className="flow-root bg-white pb-24 sm:pb-32">
+        <div className="-mt-80">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mx-auto grid max-w-md grid-cols-1 gap-8 lg:max-w-4xl lg:grid-cols-2">
+              {tiers.map((tier) => (
+                <div
+                  key={tier.id}
+                  className="flex flex-col justify-between rounded-3xl bg-white p-8 shadow-xl ring-1 ring-gray-900/10 sm:p-10"
+                >
+                  <div>
+                    <h3 id={tier.id} className="text-base font-semibold leading-7 text-indigo-600">
+                      {tier.name}
+                    </h3>
+                    <div className="mt-4 flex items-baseline gap-x-2">
+                      <span className="text-5xl font-bold tracking-tight text-gray-900">{tier.price.monthly}</span>
+                      <span className="text-base font-semibold leading-7 text-gray-600">/month</span>
+                    </div>
+                    <p className="mt-6 text-base leading-7 text-gray-600">{tier.description}</p>
+                    <ul
+                      role="list"
+                      className="mt-10 space-y-4 text-sm leading-6 text-gray-600"
+                    >
+                      {tier.features.map((feature) => (
+                        <li key={feature} className="flex gap-x-3">
+                          <CheckIcon className="h-6 w-5 flex-none text-indigo-600" aria-hidden="true" />
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <a
+                    href={tier.href}
+                    aria-describedby={tier.id}
+                    className="mt-8 block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Get started today
+                  </a>
+                </div>
+              ))}
+              <div className="flex flex-col items-start gap-x-8 gap-y-6 rounded-3xl p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
+                <div className="lg:min-w-0 lg:flex-1">
+                  <h3 className="text-lg font-semibold leading-8 tracking-tight text-indigo-600">Enterprise Plan</h3>
+                  <p className="mt-1 text-base leading-7 text-gray-600">
+                    For large organizations with custom needs, contact us for a custom quote.
+                  </p>
+                </div>
+                <a
+                  href="#"
+                  className="rounded-md px-3.5 py-2 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  Contact us <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/HomePage.tsx

@@ -2,6 +2,7 @@ import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
@@ -154,7 +155,7 @@ export default function HomePage() {
             text: "Start Free Trial",
             href: "#",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-minimalist-graphic-representing-a-star-1778165800791-0c8ad310.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-minimalist-graphic-representing-a-star-1778165800791-0c8ad310.png?_wi=1",
         },
         {
           tag: "For Growing Businesses",
@@ -171,7 +172,7 @@ export default function HomePage() {
             text: "Get Pro Plan",
             href: "#",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-image-symbolizing-a-growing--1778165802033-739245ed.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-image-symbolizing-a-growing--1778165802033-739245ed.png?_wi=1",
         },
         {
           tag: "For Enterprises",
@@ -188,7 +189,7 @@ export default function HomePage() {
             text: "Contact Sales",
             href: "#contact",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png?_wi=1",
         },
       ]}
     />

src/pages/Pricing.tsx

@@ -1,3 +1,64 @@
+import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import FeatureComparison from '@/components/sections/pricing/FeatureComparison';
+
 export default function PricingPage() {
-  return <h1>Pricing Page</h1>;
+  return (
+    <>
+      <PricingCenteredCards
+        tag="Flexible Pricing"
+        title="Plans Designed for Growth"
+        description="Choose the Finflow plan that best fits your business size and evolving financial demands."
+        plans={[
+          {
+            tag: 'For Startups',
+            price: '$99',
+            period: 'month',
+            features: [
+              'Basic Analytics',
+              'Standard Security',
+              '500 Transactions/month',
+              'Email Support',
+            ],
+            primaryButton: {
+              text: 'Start Free Trial',
+              href: '#',
+            },
+          },
+          {
+            tag: 'For Growing Businesses',
+            price: '$499',
+            period: 'month',
+            features: [
+              'Advanced Analytics',
+              'Enhanced Security',
+              'Unlimited Transactions',
+              '24/7 Priority Support',
+              'Automated Reporting',
+            ],
+            primaryButton: {
+              text: 'Get Pro Plan',
+              href: '#',
+            },
+          },
+          {
+            tag: 'For Enterprises',
+            price: 'Custom',
+            period: '',
+            features: [
+              'All Pro Features',
+              'Dedicated Account Manager',
+              'Custom Integrations',
+              'On-premise Deployment',
+              'SLA & Compliance Guarantees',
+            ],
+            primaryButton: {
+              text: 'Contact Sales',
+              href: '#contact',
+            },
+          },
+        ]}
+      />
+      <FeatureComparison />
+    </>
+  );
 }

src/pages/misc/AboutPage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import AboutText from '@/components/sections/about/AboutText';
+import TeamMinimalCards from '@/components/sections/team/TeamMinimalCards';
+
+const AboutPage: React.FC = () => {
+  return (
+    <>
+      <AboutText
+        title="Our mission is to empower businesses with cutting-edge financial solutions."
+        primaryButton={{ text: 'Get Started', href: '/pricing' }}
+        secondaryButton={{ text: 'Contact Us', href: '#contact' }}
+      />
+      <TeamMinimalCards
+        tag="Our Team"
+        title="Meet the experts behind our success"
+        members={[
+          {
+            name: 'John Doe',
+            role: 'CEO & Founder',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=1',
+          },
+          {
+            name: 'Jane Smith',
+            role: 'Chief Technology Officer',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=2',
+          },
+          {
+            name: 'Peter Jones',
+            role: 'Head of Product',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=3',
+          },
+          {
+            name: 'Mary Williams',
+            role: 'Lead Designer',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=4',
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default AboutPage;

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
 ];