Bob AI: Can you add a section for the travel team

src/app/page.tsx

@@ -11,6 +11,7 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { MapPin, Mail, Phone } from "lucide-react";
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
 
 export default function TravelPage() {
   return (
@@ -219,6 +220,25 @@ export default function TravelPage() {
         />
       </div>
 
+      <div id="team" data-section="team">
+        <TeamCardOne
+            members={[
+                { id: "1", name: "Alex Johnson", role: "Travel Guide", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Alex Johnson, Travel Guide" },
+                { id: "2", name: "Mia Lee", role: "Destination Specialist", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Mia Lee, Destination Specialist" },
+                { id: "3", name: "Chris Brown", role: "Photographer", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Chris Brown, Photographer" },
+                { id: "4", name: "Lily White", role: "Content Creator", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Lily White, Content Creator" }
+            ]}
+            carouselMode="buttons"
+            gridVariant="grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+            animationType="flip"
+            title="Meet Our Travel Team"
+            description="Our team is dedicated to making your travel experience unforgettable. From guiding you through new destinations to capturing the best moments, we've got you covered."
+            textboxLayout="left"
+            useInvertedBackground="none"
+            className="mb-10"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterCard
           logoText="WanderLust"

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f4ef;
-  --card: #331a52;
+  --card: rgba(51, 26, 82, 0.7);
   --foreground: #000000;
-  --primary-cta: #000000;
+  --primary-cta: rgba(0, 0, 0, 0.8);
-  --secondary-cta: #ffffff;
+  --secondary-cta: rgba(255, 255, 255, 0.8);
-  --accent: #800080;
+  --accent: rgba(128, 0, 128, 0.8);
-  --background-accent: #800080; */
+  --background-accent: rgba(128, 0, 128, 0.8); */
 
-  --background: #000000;
+  --background: rgba(0, 0, 0, 0.5);
-  --card: #331a52;
+  --card: rgba(51, 26, 82, 0.7);
   --foreground: #000000;
-  --primary-cta: #000000;
+  --primary-cta: rgba(0, 0, 0, 0.8);
-  --secondary-cta: #ffffff;
+  --secondary-cta: rgba(255, 255, 255, 0.8);
-  --accent: #800080;
+  --accent: rgba(128, 0, 128, 0.8);
-  --background-accent: #800080;
+  --background-accent: rgba(128, 0, 128, 0.8);
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);