Bob AI: Rebuild the entire site something got completely m...

Merge version_4 into main

src/app/page.tsx

@@ -57,9 +57,9 @@ export default function LandingPage() {
           imageAlt="Luxurious skincare products arranged elegantly on a marble surface"
           mediaAnimation="slide-up"
           marqueeItems={[
-            { type: "text", text: "100% Natural Ingredients", icon: CheckCircle },
-            { type: "text", text: "Cruelty-Free Certified", icon: CheckCircle },
-            { type: "text", text: "Made in Italy", icon: CheckCircle }
+            { type: "text", text: "100% Natural Ingredients" },
+            { type: "text", text: "Cruelty-Free Certified" },
+            { type: "text", text: "Made in Italy" }
           ]}
           showMarqueeCard={true}
           ariaLabel="Luxury skincare hero section showcasing premium products"

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-font-family: var(--font-nunito), sans-serif;), sans-serif;
+  font-family: var(--font-cormorant-garamond), serif;), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-font-family: var(--font-nunito), sans-serif;), sans-serif;
+  font-family: var(--font-cormorant-garamond), serif;), sans-serif;
 }

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  --card: rgba(255, 255, 255, 0.7);;
+  --foreground: #ffffff;;
+  --primary-cta: rgba(0, 0, 0, 0.8);;
+  --secondary-cta: rgba(255, 255, 255, 0.9);;
+  --accent: rgba(0, 0, 0, 0.7);;
+  --background-accent: rgba(211, 211, 211, 0.5);; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
+  --background: rgba(245, 245, 245, 0.6);;
+  --card: rgba(255, 255, 255, 0.7);;
+  --foreground: #ffffff;;
+  --primary-cta: rgba(0, 0, 0, 0.8);;
   --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: rgba(255, 255, 255, 0.9);;
   --secondary-cta-text: #1c1c1c;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --accent: rgba(0, 0, 0, 0.7);;
+  --background-accent: rgba(211, 211, 211, 0.5);;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/sections/about/TextSplitAbout.tsx

@@ -72,7 +72,7 @@ const TextSplitAbout = ({
             ))}
 
             {buttons && buttons.length > 0 && (
-              <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
+              <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 md:justify-start max-md:justify-center pt-2", buttonContainerClassName)}>
                 {buttons.slice(0, 2).map((button, index) => (
                   <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("px-8", buttonClassName), cls("text-base", buttonTextClassName))} />
                 ))}