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/HeroBillboardCarousel.tsx

@@ -56,7 +56,7 @@ const HeroBillboardCarousel = ({
       <div className="w-content-width mx-auto overflow-hidden mask-fade-x">
         <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
           {duplicated.map((item, i) => (
-            <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
+            <div key={i} className="shrink-0 w-40 md:w-50 2xl:w-60 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
               <ImageOrVideo
                 imageSrc={item.imageSrc}
                 videoSrc={item.videoSrc}

src/components/sections/hero/HeroSplitMediaGrid.tsx

@@ -30,7 +30,13 @@ const HeroSplitMediaGrid = ({
       <div className="flex flex-col md:flex-row items-center gap-10 md:gap-20 w-content-width mx-auto">
         <div className="w-full md:w-1/2">
           <div className="flex flex-col items-center md:items-start gap-3">
-            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+            <div className="flex items-center gap-3 mb-3 p-3 card rounded-theme">
+              <div className="relative flex items-center justify-center w-4 h-4">
+                <div className="absolute w-full h-full bg-green-500 rounded-full animate-ping"></div>
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              </div>
+              <span className="text-sm">2,345 people active now</span>
+            </div>
 
             <TextAnimation
               text={title}
@@ -52,13 +58,6 @@ const HeroSplitMediaGrid = ({
               <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
               <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
             </div>
-            <div className="flex items-center gap-3 mt-5 p-3 card rounded-theme">
-              <div className="relative flex items-center justify-center w-4 h-4">
-                <div className="absolute w-full h-full bg-green-500 rounded-full animate-ping"></div>
-                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-              </div>
-              <span className="text-sm">2,345 people active now</span>
-            </div>
           </div>
         </div>
 

src/components/ui/Button.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "motion/react";
 import { useButtonClick } from "@/hooks/useButtonClick";
 import { cls } from "@/lib/utils";
 import { useStyle } from "@/components/ui/useStyle";
@@ -23,31 +22,18 @@ interface ButtonProps {
   className?: string;
 }
 
-const DefaultButton = ({ text, variant = "primary", href = "#", onClick, animate = true, animationDelay = 0, className = "" }: ButtonProps) => {
+const DefaultButton = ({ text, variant = "primary", href = "#", onClick, className = "" }: ButtonProps) => {
   const handleClick = useButtonClick(href, onClick);
 
-  const button = (
+  return (
     <a
       href={href}
       onClick={handleClick}
-      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
+      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer transform transition-transform duration-200 hover:scale-105 active:scale-95", variant === "primary" ? "primary-button text-primary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]" : "secondary-button text-secondary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]", className)}
     >
       {text}
     </a>
   );
-
-  if (!animate) return button;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
-    >
-      {button}
-    </motion.div>
-  );
 };
 
 const Button = (props: ButtonProps) => {

src/index.css

@@ -138,6 +138,7 @@ body {
   background-color: var(--background);
   color: var(--foreground);
   font-family: '${montserrat.variable} ${inter.variable}', sans-serif;
+  font-weight: 500;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;

src/pages/HomePage.tsx

@@ -1,7 +1,8 @@
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+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';
@@ -12,7 +13,7 @@ export default function HomePage() {
   return (
     <>
   <div id="home" data-section="home">
-      <HeroSplitMediaGrid
+      <HeroBillboardScroll
       tag="Fintech SaaS"
       title="Unlock the Future of Financial Management"
       description="Finflow provides cutting-edge solutions for businesses to streamline operations, enhance security, and drive growth in the digital economy."
@@ -24,14 +25,7 @@ export default function HomePage() {
         text: "Request a Demo",
         href: "#contact",
       }}
-      items={[
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/another-view-of-a-sleek-dark-fintech-das-1778165802942-0ef804ae.png",
-        },
-      ]}
+      imageSrc="https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png"
     />
   </div>
 
@@ -49,25 +43,25 @@ export default function HomePage() {
           title: "Advanced Data Analytics",
           description: "Gain deep insights with real-time analytics and predictive modeling for smarter decisions.",
           buttonIcon: "LineChart",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-representation-of-complex-fi-1778165803491-13ee1608.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-representation-of-complex-fi-1778165803491-13ee1608.png?_wi=2",
         },
         {
           title: "Enterprise-Grade Security",
           description: "Protect your assets with our multi-layered security protocols and blockchain-backed encryption.",
           buttonIcon: "Lock",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-metaphor-for-advanced-financial-1778165802292-f7d22bff.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-metaphor-for-advanced-financial-1778165802292-f7d22bff.png?_wi=2",
         },
         {
           title: "Automated Workflows",
           description: "Streamline operations, reduce manual errors, and free up your team for strategic initiatives.",
           buttonIcon: "Zap",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-illustration-of-financial-process-aut-1778165804096-d3ea01b2.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-illustration-of-financial-process-aut-1778165804096-d3ea01b2.png?_wi=2",
         },
         {
           title: "Global Regulatory Compliance",
           description: "Stay compliant with ever-evolving financial regulations through automated monitoring and reporting.",
           buttonIcon: "CheckCircle",
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-concept-for-regulatory-complian-1778165802615-1e994baa.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-concept-for-regulatory-complian-1778165802615-1e994baa.png?_wi=2",
         },
       ]}
     />

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' },
 ];