Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -15,16 +15,16 @@ import TextAbout from '@/components/sections/about/TextAbout';
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="expand-hover"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="soft"
-        contentWidth="mediumSmall"
+        contentWidth="medium"
-        sizing="mediumLargeSizeLargeTitles"
+        sizing="mediumLarge"
-        background="circleGradient"
+        background="noise"
-        cardStyle="glass-depth"
+        cardStyle="soft-shadow"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="shadow"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -63,8 +63,8 @@ export default function LandingPage() {
         {
           text: "Contact Sales",          href: "#contact"},
       ]}
-      buttonAnimation="opacity"
+      buttonAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/woman-room-with-students-reading_23-2147656381.jpg"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EtSD1FtpvoSZ6LbhPw4QpXXLGL/uploaded-1707914563842-89j24i9.png"
       imageAlt="Modern office interior with city view"
       showDimOverlay={true}
     />
@@ -72,7 +72,7 @@ export default function LandingPage() {
 
   <div id="about" data-section="about">
       <TextAbout
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       tag="About Us"
       title="Your Ideal Business Office Workspace Awaits"
     />
@@ -80,7 +80,7 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardTwentySeven
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
@@ -117,9 +117,9 @@ export default function LandingPage() {
   <div id="products" data-section="products">
       <ProductCardThree
       textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
+      gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
-      animationType="slide-up"
+      animationType="blur-reveal"
       products={[
         {
           id: "p1",          name: "Private Offices",          price: "Starting from €400/month",          imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780755.jpg",          imageAlt: "Private office space"},
@@ -141,7 +141,7 @@ export default function LandingPage() {
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardThirteen
-      animationType="depth-3d"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
@@ -187,7 +187,7 @@ export default function LandingPage() {
       ]}
       title="Frequently Asked Questions"
       description="Find quick answers to common questions about our office spaces and services."
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
@@ -195,7 +195,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "sparkles-gradient"}}
+        variant: "plain"}}
       tag="Get in Touch"
       title="Connect with Our Business Office Specialists"
       description="Ready to elevate your business environment? Contact us today to learn more about our flexible office solutions for your business office building needs, including private parking. Call us at 062-555-000 or send an inquiry below."

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #1b0c25;
+  --foreground: #1c1c1c;
-  --primary-cta: #1b0c25;
+  --primary-cta: #1f3251;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #1b0c25;
+  --secondary-cta-text: #ffffff;
-  --accent: #ff93e4;
+  --accent: #15479c;
-  --background-accent: #e8a8c3;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);