Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,17 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import { Star, Eye } from "lucide-react";
 import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
   return (
@@ -22,9 +17,9 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="largeSmallSizeLargeTitles"
-        background="noiseDiagonalGradient"
-        cardStyle="inset"
-        primaryButtonStyle="gradient"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
         headingFontWeight="medium"
     >
@@ -43,11 +38,11 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{ variant: "rotated-rays-animated" }}
+      background={{ variant: "rotated-rays-static" }}
       title="Artistic Perspective"
       description="Redefining spaces with curated luxury art. Experience minimalism in its most elegant form."
       buttons={[{ text: "Explore Collection", href: "#products" }]}
-      buttonClassName="bg-yellow-500 text-black border-2 border-yellow-600 font-bold hover:bg-yellow-400"
+      buttonClassName="bg-[#1C1C1A] text-[#FAF9F6] border-none font-bold hover:bg-[#BFA15F]"
       carouselItems={[
         { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/detailed-structure-marble-natural-pattern-background-design_1258-77936.jpg?_wi=1", imageAlt: "Art Piece 1" },
         { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-pens-brushes-cup_23-2148769822.jpg?_wi=1", imageAlt: "Art Piece 2" },
@@ -59,12 +54,12 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="products" data-section="products" className="bg-[#F2F0EB]">
       <ProductCardFour
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       title="Featured Posters"
       description="A curated masonry gallery showcase of our finest luxury prints, ranging from abstract compositions to minimalist line art."
       products={[
@@ -73,7 +68,7 @@ export default function LandingPage() {
         { id: "m3", name: "Golden Hour", price: "$520", variant: "Photography", imageSrc: "http://img.b2bpic.net/free-photo/tropical-authentic-dining-room-interior-design-with-blank-picture-frame_53876-129845.jpg" },
         { id: "m4", name: "Simple Void", price: "$310", variant: "Minimalist", imageSrc: "http://img.b2bpic.net/free-photo/empty-wooden-frame-standing-floor-have-sofa-decoration_41470-5116.jpg" }
       ]}
-      actionButtonClassName="hover:scale-105 transition-transform"
+      actionButtonClassName="hover:text-[#BFA15F] transition-colors"
     />
   </div>
 
@@ -91,12 +86,13 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="bg-[#F2F0EB]">
       <ContactText
       useInvertedBackground={false}
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "plain" }}
       text="Join our collector's circle to receive exclusive art previews and curated monthly newsletters."
       buttons={[{ text: "Contact Us", href: "mailto:hello@wallperspective.com" }]}
+      buttonClassName="bg-[#1C1C1A] text-[#FAF9F6] hover:bg-[#BFA15F]"
     />
   </div>
 

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
+  --background: #FAF9F6;
+  --card: #FFFFFF;
+  --foreground: #1A1A1A;
+  --primary-cta: #1C1C1A;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #F2F0EB;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #BFA15F;
+  --background-accent: #F2F0EB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);