Bob AI: Make the background color white but the button col...

Merge version_6 into main

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { ChefHat, Fish, Flame, Star, Trophy, Users, Calendar, Utensils } from "lucide-react";
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 
 function handleReservation(email: string) {
   console.log('Reservation request for:', email);
@@ -216,6 +217,58 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="pricing" data-section="pricing">
+        <PricingCardTwo
+            plans={[
+                {
+                    id: "basic",
+                    badge: "Basic",
+                    price: "$9.99/mo",
+                    subtitle: "Perfect for small businesses",
+                    buttons: [{ label: "Get Started", href: "/pricing/basic" }],
+                    features: ["Up to 10 users", "Basic analytics", "Email support"]
+                },
+                {
+                    id: "standard",
+                    badge: "Standard",
+                    price: "$19.99/mo",
+                    subtitle: "Ideal for growing teams",
+                    buttons: [{ label: "Get Started", href: "/pricing/standard" }],
+                    features: ["Up to 50 users", "Advanced analytics", "Phone support"]
+                },
+                {
+                    id: "premium",
+                    badge: "Premium",
+                    price: "$39.99/mo",
+                    subtitle: "Best for large enterprises",
+                    buttons: [{ label: "Get Started", href: "/pricing/premium" }],
+                    features: ["Unlimited users", "Custom analytics", "24/7 support"]
+                }
+            ]}
+            carouselMode="buttons"
+            animationType="fade"
+            title="Choose Your Plan"
+            description="Unlock the full potential of Crimson Seoul with our flexible pricing plans."
+            tag="Popular"
+            textboxLayout="left"
+            useInvertedBackground="none"
+            className="mb-10"
+            textBoxTitleClassName="text-4xl font-bold"
+            textBoxDescriptionClassName="text-lg text-gray-600"
+            badgeClassName="bg-blue-500 text-white"
+            priceClassName="text-3xl font-bold"
+            subtitleClassName="text-gray-500"
+            planButtonContainerClassName="mt-4"
+            planButtonClassName="bg-blue-500 text-white hover:bg-blue-600"
+            featuresClassName="mt-4"
+            featureItemClassName="text-gray-600"
+            planTitleClassName="text-2xl font-bold"
+            planSubtitleClassName="text-gray-500"
+            planPriceClassName="text-3xl font-bold"
+            planFeatureClassName="text-gray-600"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="https://img.b2bpic.net/free-photo/high-angle-dining-table-with-cutlery_23-2150312257.jpg"

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #fffafa;;
-  --card: #fff7f7;;
+  --card: #f0fff0;;
-  --foreground: #1a0000;;
+  --foreground: "Inter", sans-serif;;
-  --primary-cta: #e63946;;
+  --primary-cta: #800080;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: "Inter", sans-serif;;
-  --accent: #f5c4c7;;
+  --accent: #90ee90;;
-  --background-accent: #f09199;; */
+  --background-accent: #20b2aa;; */
 
-  --background: #fffafa;;
+  --background: #ffffff;;
-  --card: #fff7f7;;
+  --card: #f0fff0;;
-  --foreground: #1a0000;;
+  --foreground: "Inter", sans-serif;;
-  --primary-cta: #e63946;;
+  --primary-cta: #800080;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: "Inter", sans-serif;;
-  --accent: #f5c4c7;;
+  --accent: #90ee90;;
-  --background-accent: #f09199;;
+  --background-accent: #20b2aa;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/sections/pricing/PricingCardTwo.tsx

@@ -167,8 +167,8 @@ const PricingCardTwo = ({
     textBoxTitleImageClassName = "",
     textBoxDescriptionClassName = "",
     badgeClassName = "",
-    priceClassName = "",
+    priceClassName = "text-5xl font-medium",
-    subtitleClassName = "",
+    subtitleClassName = "text-base",
     planButtonContainerClassName = "",
     planButtonClassName = "",
     featuresClassName = "",