Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -14,15 +14,15 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="bounce-effect"
+        defaultButtonVariant="shift-hover"
         defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="rounded"
         contentWidth="mediumSmall"
-        sizing="mediumLargeSizeLargeTitles"
+        sizing="medium"
         background="blurBottom"
         cardStyle="soft-shadow"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="normal"
     >
       <ReactLenis root>
@@ -30,29 +30,17 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "Office Space",
-          id: "#office-space",
-        },
+          name: "Office Space",          id: "#office-space"},
         {
-          name: "Meeting Room",
-          id: "#office-space",
-        },
+          name: "Meeting Room",          id: "#office-space"},
         {
-          name: "Virtual Office",
-          id: "#office-space",
-        },
+          name: "Virtual Office",          id: "#office-space"},
         {
-          name: "Locations",
-          id: "#locations",
-        },
+          name: "Locations",          id: "#locations"},
         {
-          name: "Contact",
-          id: "#contact-section",
-        },
+          name: "Contact",          id: "#contact-section"},
       ]}
       brandName="St Albans Office Space"
     />
@@ -64,9 +52,7 @@ export default function LandingPage() {
       description="Newly refurbished offices, meeting rooms and virtual address services in the heart of historic St Albans. Flexible terms. Inclusive pricing from £75 per week."
       buttons={[
         {
-          text: "Enquire about availability",
-          href: "#contact-section",
-        },
+          text: "Enquire about availability",          href: "#contact-section"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/empty-professional-psychotherapy-office-with-modern-couch-furniture_482257-124895.jpg?_wi=1"
       imageAlt="Warm and characterful interior of a coworking office space"
@@ -74,25 +60,15 @@ export default function LandingPage() {
       textPosition="bottom"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-excited-businesswoman-sitting-with-laptop-makes-crossed-fingers-gesture-make_1258-125410.jpg",
-          alt: "Portrait of smiling and excited businesswoman sitting with laptop makes crossed fingers gesture make",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-smiling-excited-businesswoman-sitting-with-laptop-makes-crossed-fingers-gesture-make_1258-125410.jpg",          alt: "Portrait of smiling and excited businesswoman sitting with laptop makes crossed fingers gesture make"},
         {
-          src: "http://img.b2bpic.net/free-photo/happy-young-asian-woman-winning-laptop-receive-good-news-achieve-goal-work-triumphing_1258-199179.jpg",
-          alt: "Happy young asian woman winning on laptop receive good news achieve goal at work triumphing and",
-        },
+          src: "http://img.b2bpic.net/free-photo/happy-young-asian-woman-winning-laptop-receive-good-news-achieve-goal-work-triumphing_1258-199179.jpg",          alt: "Happy young asian woman winning on laptop receive good news achieve goal at work triumphing and"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-businesswoman-manager-talking-coworker-office-sitting-with-laptop_1258-194648.jpg",
-          alt: "Portrait of businesswoman manager talking to a coworker in an office sitting with laptop and",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-businesswoman-manager-talking-coworker-office-sitting-with-laptop_1258-194648.jpg",          alt: "Portrait of businesswoman manager talking to a coworker in an office sitting with laptop and"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-happy-redhead-businesswoman-holding-headphones-looking-camera-while-sitting-her-desk-office-her-colleagues-are-working-background_637285-36.jpg",
-          alt: "Young happy redhead businesswoman holding headphones and looking at camera while sitting at her desk in the office Her colleagues are working in the background",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-happy-redhead-businesswoman-holding-headphones-looking-camera-while-sitting-her-desk-office-her-colleagues-are-working-background_637285-36.jpg",          alt: "Young happy redhead businesswoman holding headphones and looking at camera while sitting at her desk in the office Her colleagues are working in the background"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-cafe-bar-with-his-laptop-computer_342744-944.jpg",
-          alt: "Portrait of smiling man sitting in a cafe bar with his laptop computer",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-cafe-bar-with-his-laptop-computer_342744-944.jpg",          alt: "Portrait of smiling man sitting in a cafe bar with his laptop computer"},
       ]}
     />
   </div>
@@ -107,25 +83,15 @@ export default function LandingPage() {
       textPosition="bottom"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/man-having-short-break-work-home_329181-14567.jpg",
-          alt: "Man having short break during the work at home",
-        },
+          src: "http://img.b2bpic.net/free-photo/man-having-short-break-work-home_329181-14567.jpg",          alt: "Man having short break during the work at home"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-stylish-smiling-man-co-working-office-startup-freelancer-holding-using-tablet_285396-9048.jpg",
-          alt: "Young stylish smiling man in co-working office, startup freelancer holding using tablet",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-stylish-smiling-man-co-working-office-startup-freelancer-holding-using-tablet_285396-9048.jpg",          alt: "Young stylish smiling man in co-working office, startup freelancer holding using tablet"},
         {
-          src: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg",
-          alt: "Company worker browsing internet to do research project, using computer to create business report with charts data. Analyzing network information for web presentation. Handheld shot.",
-        },
+          src: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg",          alt: "Company worker browsing internet to do research project, using computer to create business report with charts data. Analyzing network information for web presentation. Handheld shot."},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
-          alt: "Portrait of young woman with long brown hair  in black t shirt and white jacket.",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",          alt: "Portrait of young woman with long brown hair  in black t shirt and white jacket."},
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-natural-pretty-woman-with-curly-hairstyle_285396-4374.jpg",
-          alt: "Close up portrait of young natural pretty woman with curly hairstyle",
-        },
+          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-natural-pretty-woman-with-curly-hairstyle_285396-4374.jpg",          alt: "Close up portrait of young natural pretty woman with curly hairstyle"},
       ]}
     />
   </div>
@@ -135,8 +101,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="INDEPENDENT. FLEXIBLE. PERSONAL."
       description={[
-        "We're not a chain. We're private landlords who care about the people in our building. If you need something, we pick up the phone.",
-      ]}
+        "We're not a chain. We're private landlords who care about the people in our building. If you need something, we pick up the phone." ]}
       showBorder={false}
     />
   </div>
@@ -149,35 +114,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "OFFICES TO RENT",
-          description: "Flexible private offices tailored for individuals and small teams. Ready to move in.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-using-her-phone_23-2147601413.jpg",
-          imageAlt: "Modern private office interior",
-          button: {
-            text: "Find out more",
-            href: "#",
-          },
-        },
+          title: "OFFICES TO RENT",          description: "Flexible private offices tailored for individuals and small teams. Ready to move in.",          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-using-her-phone_23-2147601413.jpg",          imageAlt: "Modern private office interior",          button: {
+            text: "Find out more",            href: "#"}},
         {
-          title: "MEETING ROOM",
-          description: "Professional, fully equipped meeting space available by the hour or day.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-executive-applauding-video-conference_1170-1921.jpg",
-          imageAlt: "Stylish meeting room with large screen",
-          button: {
-            text: "Find out more",
-            href: "#",
-          },
-        },
+          title: "MEETING ROOM",          description: "Professional, fully equipped meeting space available by the hour or day.",          imageSrc: "http://img.b2bpic.net/free-photo/business-executive-applauding-video-conference_1170-1921.jpg",          imageAlt: "Stylish meeting room with large screen",          button: {
+            text: "Find out more",            href: "#"}},
         {
-          title: "VIRTUAL OFFICE",
-          description: "Establish a credible St Albans presence with our virtual address services.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-talking-with-cashier-store_482257-79308.jpg",
-          imageAlt: "Professional business mailbox and reception",
-          button: {
-            text: "Find out more",
-            href: "#",
-          },
-        },
+          title: "VIRTUAL OFFICE",          description: "Establish a credible St Albans presence with our virtual address services.",          imageSrc: "http://img.b2bpic.net/free-photo/man-talking-with-cashier-store_482257-79308.jpg",          imageAlt: "Professional business mailbox and reception",          button: {
+            text: "Find out more",            href: "#"}},
       ]}
       title="THE SPACES"
       description="Discover our range of flexible workspace solutions designed to suit your needs."
@@ -191,42 +135,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "hot-desk",
-          badge: "Flexi-Desk",
-          price: "£75 / week",
-          subtitle: "Great for individuals",
-          features: [
-            "Access to shared workspace",
-            "Superfast broadband",
-            "All bills included",
-            "Flexible daily rates",
-          ],
-        },
+          id: "hot-desk",          badge: "Flexi-Desk",          price: "£75 / week",          subtitle: "Great for individuals",          features: [
+            "Access to shared workspace",            "Superfast broadband",            "All bills included",            "Flexible daily rates"]},
         {
-          id: "private-office",
-          badge: "Dedicated Space",
-          price: "From £300 / week",
-          subtitle: "Ideal for growing teams",
-          features: [
-            "Private, lockable office",
-            "Superfast broadband",
-            "All bills included",
-            "Furnished workspace",
-            "Flexible monthly terms",
-          ],
-        },
+          id: "private-office",          badge: "Dedicated Space",          price: "From £300 / week",          subtitle: "Ideal for growing teams",          features: [
+            "Private, lockable office",            "Superfast broadband",            "All bills included",            "Furnished workspace",            "Flexible monthly terms"]},
         {
-          id: "virtual-office-plan",
-          badge: "Business Address",
-          price: "From £35 / month",
-          subtitle: "Professional local presence",
-          features: [
-            "Prestigious St Albans address",
-            "Mail handling & forwarding",
-            "Dedicated phone number (optional)",
-            "Professional image",
-          ],
-        },
+          id: "virtual-office-plan",          badge: "Business Address",          price: "From £35 / month",          subtitle: "Professional local presence",          features: [
+            "Prestigious St Albans address",            "Mail handling & forwarding",            "Dedicated phone number (optional)",            "Professional image"]},
       ]}
       title="CLEAR, INCLUSIVE PRICING."
       description="Choose the perfect workspace solution for your business. Our flexible terms mean you only pay for what you need."
@@ -241,17 +157,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "OUR LOCATION",
-          description: "An embedded map showing our prime location in St Albans city centre.",
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-traditional-terraced-houses-streets-dundee-scotland_1308-189586.jpg",
-          imageAlt: "Map showing St Albans Office Space location",
-        },
+          title: "OUR LOCATION",          description: "An embedded map showing our prime location in St Albans city centre.",          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-traditional-terraced-houses-streets-dundee-scotland_1308-189586.jpg",          imageAlt: "Map showing St Albans Office Space location"},
         {
-          title: "IN THE HEART OF ST ALBANS",
-          description: "St Albans Office Space is ideally situated in the vibrant city centre, just a short walk from St Albans City station with fast connections to London in 20-30 minutes. We're moments from the Maltings shopping centre and have excellent access to major motorways, making your commute and client visits effortless.",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-professional-psychotherapy-office-with-modern-couch-furniture_482257-124895.jpg?_wi=2",
-          imageAlt: "map of St Albans city centre",
-        },
+          title: "IN THE HEART OF ST ALBANS",          description: "St Albans Office Space is ideally situated in the vibrant city centre, just a short walk from St Albans City station with fast connections to London in 20-30 minutes. We're moments from the Maltings shopping centre and have excellent access to major motorways, making your commute and client visits effortless.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-professional-psychotherapy-office-with-modern-couch-furniture_482257-124895.jpg?_wi=2",          imageAlt: "map of St Albans city centre"},
       ]}
       title="OUR CITY CENTRE HOME"
       description="Discover the convenience of working in a historic city with modern amenities."
@@ -263,35 +171,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah J.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-young-entrepreneurs-concept-young-woman-video-chats-has-online-meeting-uses-wireless_1258-195293.jpg",
-          imageAlt: "Sarah Johnson, satisfied member",
-        },
+          id: "1",          name: "Sarah J.",          imageSrc: "http://img.b2bpic.net/free-photo/business-young-entrepreneurs-concept-young-woman-video-chats-has-online-meeting-uses-wireless_1258-195293.jpg",          imageAlt: "Sarah Johnson, satisfied member"},
         {
-          id: "2",
-          name: "Michael C.",
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-leader_1098-14310.jpg",
-          imageAlt: "Michael Chen, happy client",
-        },
+          id: "2",          name: "Michael C.",          imageSrc: "http://img.b2bpic.net/free-photo/successful-leader_1098-14310.jpg",          imageAlt: "Michael Chen, happy client"},
         {
-          id: "3",
-          name: "Emily R.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-brunette-woman-dressed-gray-elegant-jacket-posing-with-hands-pockets-while-leaning-table-room-with-loft-interior-looking-camera_613910-18669.jpg",
-          imageAlt: "Emily Rodriguez, praising the space",
-        },
+          id: "3",          name: "Emily R.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-brunette-woman-dressed-gray-elegant-jacket-posing-with-hands-pockets-while-leaning-table-room-with-loft-interior-looking-camera_613910-18669.jpg",          imageAlt: "Emily Rodriguez, praising the space"},
         {
-          id: "4",
-          name: "David L.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg",
-          imageAlt: "David Lee, enjoying the coworking",
-        },
+          id: "4",          name: "David L.",          imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg",          imageAlt: "David Lee, enjoying the coworking"},
         {
-          id: "5",
-          name: "Jessica A.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-job-occupation-hobby-creativity-concept-picture-positive-red-haired-young-woman-creative-profession-wearing-apron-striped-top_273609-922.jpg",
-          imageAlt: "Jessica Allen, recommending the office",
-        },
+          id: "5",          name: "Jessica A.",          imageSrc: "http://img.b2bpic.net/free-photo/people-job-occupation-hobby-creativity-concept-picture-positive-red-haired-young-woman-creative-profession-wearing-apron-striped-top_273609-922.jpg",          imageAlt: "Jessica Allen, recommending the office"}
       ]}
       cardTitle="GOOD COMPANY."
       cardTag="Hear from our members"
@@ -303,20 +191,15 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={true}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="CONTACT US"
       title="Enquire About Availability"
       description="Ready to discover your new workspace? Get in touch with us today to learn more about our flexible office solutions and community."
       buttons={[
         {
-          text: "Call Us",
-          href: "tel:01727400550",
-        },
+          text: "Call Us",          href: "tel:01727400550"},
         {
-          text: "Email Us",
-          href: "mailto:info@stalbansofficespace.co.uk",
-        },
+          text: "Email Us",          href: "mailto:info@stalbansofficespace.co.uk"},
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5d8bf;
-  --card: #fefdf9;
-  --foreground: #2c2c2c;
-  --primary-cta: #6F4E37;
-  --primary-cta-text: #fcf6ed;
-  --secondary-cta: #fcf6ed;
-  --secondary-cta-text: #2c2c2c;
-  --accent: #D4AFB9;
-  --background-accent: #8A3324;
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #1a1a1a;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1a1a1a;
+  --accent: #1a1a1a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);