Bob AI: Add an about page

Merge version_16_1778181287716 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/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';

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',
+          },
+          {
+            name: 'Jane Smith',
+            role: 'Chief Technology Officer',
+            imageSrc: 'https://via.placeholder.com/500x500',
+          },
+          {
+            name: 'Peter Jones',
+            role: 'Head of Product',
+            imageSrc: 'https://via.placeholder.com/500x500',
+          },
+          {
+            name: 'Mary Williams',
+            role: 'Lead Designer',
+            imageSrc: 'https://via.placeholder.com/500x500',
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+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' },
 ];