Update src/app/styles/variables.css

Merge version_1 into main

src/app/contact/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="SAIBPP"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Get In Touch"
+            title="Connect With Our Team"
+            description="Discover how you can join our network and drive property transformation in South Africa."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            className="py-20"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="SAIBPP"
+            columns={[
+              { 
+                title: "Institute", 
+                items: [{ label: "About", href: "/" }, { label: "Events", href: "/" }] 
+              },
+              { 
+                title: "Support", 
+                items: [{ label: "Membership", href: "/" }, { label: "Contact", href: "/contact" }] 
+              },
+              { 
+                title: "Legal", 
+                items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] 
+              }
+            ]}
+            className="border-t border-[#d4af37]/20"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,22 +33,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Advocacy",
-          id: "#pillars",
-        },
-        {
-          name: "Membership",
-          id: "#membership",
-        },
-        {
-          name: "Events",
-          id: "#events",
-        },
-        {
-          name: "Insights",
-          id: "#insights",
-        },
+        { name: "Advocacy", id: "#pillars" },
+        { name: "Membership", id: "#membership" },
+        { name: "Events", id: "#events" },
+        { name: "Insights", id: "#insights" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="SAIBPP"
     />
@@ -56,20 +45,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       title="Shaping the Future of Property Ownership"
       description="The South African Institute of Black Property Practitioners is the leading authority advancing transformation, ownership, and excellence in the property sector."
       buttons={[
-        {
-          text: "Become a Member",
-          href: "#membership",
-        },
-        {
-          text: "Partner With Us",
-          href: "#contact",
-        },
+        { text: "Become a Member", href: "#membership" },
+        { text: "Partner With Us", href: "/contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/montreal-sunrise-silhouette-viewed-from-mont-royal-with-city-skyline-morning_649448-4081.jpg?_wi=1"
     />
@@ -80,14 +61,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Standard Bank",
-        "Nedbank",
-        "Absa",
-        "Property Council SA",
-        "Department of Public Works",
-        "Growthpoint",
-        "Redefine Properties",
-      ]}
+        "Standard Bank", "Nedbank", "Absa", "Property Council SA", "Department of Public Works", "Growthpoint", "Redefine Properties"]}
       title="Trusted Industry Partners"
       description="Collaborating with leading banks, developers, and government entities to drive real transformation."
     />
@@ -98,21 +72,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="The Voice of Black Property Practitioners"
       metrics={[
-        {
-          icon: Users,
-          label: "Members",
-          value: "1000+",
-        },
-        {
-          icon: Building,
-          label: "Represented Assets",
-          value: "R50B+",
-        },
-        {
-          icon: Award,
-          label: "National Influence",
-          value: "9 Provinces",
-        },
+        { icon: Users, label: "Members", value: "1000+" },
+        { icon: Building, label: "Represented Assets", value: "R50B+" },
+        { icon: Award, label: "National Influence", value: "9 Provinces" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -123,21 +85,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Advocacy & Policy",
-          description: "Influencing legislation and transformation frameworks at the highest levels of government.",
-          imageSrc: "asset://pillar-1?_wi=1",
-        },
-        {
-          title: "Industry Development",
-          description: "Training, mentorship, and professional growth opportunities for black property professionals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/target-achievement-mission-bar-chart-concept_53876-13737.jpg",
-        },
-        {
-          title: "Access to Opportunities",
-          description: "Facilitating deals, funding, and strategic partnerships for our members.",
-          imageSrc: "http://img.b2bpic.net/free-photo/environment-education-day-concept_23-2148746465.jpg",
-        },
+        { title: "Advocacy & Policy", description: "Influencing legislation and transformation frameworks at the highest levels of government.", imageSrc: "asset://pillar-1?_wi=1" },
+        { title: "Industry Development", description: "Training, mentorship, and professional growth opportunities for black property professionals.", imageSrc: "http://img.b2bpic.net/free-photo/target-achievement-mission-bar-chart-concept_53876-13737.jpg" },
+        { title: "Access to Opportunities", description: "Facilitating deals, funding, and strategic partnerships for our members.", imageSrc: "http://img.b2bpic.net/free-photo/environment-education-day-concept_23-2148746465.jpg" },
       ]}
       title="What We Do"
       description="Driving the transformation agenda through three strategic pillars."
@@ -151,42 +101,12 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "individual",
-          badge: "Essential",
-          price: "R500",
-          subtitle: "For emerging professionals",
-          buttons: [
-            {
-              text: "Apply Now",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Networking",
-            "Policy Reports",
-            "Events",
-            "Member Portal Access",
-            "Quarterly Newsletter",
-          ],
+          id: "individual", badge: "Essential", price: "R500", subtitle: "For emerging professionals",          buttons: [{ text: "Apply Now", href: "/contact" }],
+          features: ["Networking", "Policy Reports", "Events", "Member Portal Access", "Quarterly Newsletter"],
         },
         {
-          id: "corporate",
-          badge: "Exclusive",
-          price: "R5000",
-          subtitle: "For high-impact firms",
-          buttons: [
-            {
-              text: "Apply Now",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Deal Flow Access",
-            "Government Access",
-            "Summit Priority Seats",
-            "Executive Mentorship",
-            "Brand Visibility",
-          ],
+          id: "corporate", badge: "Exclusive", price: "R5000", subtitle: "For high-impact firms",          buttons: [{ text: "Apply Now", href: "/contact" }],
+          features: ["Deal Flow Access", "Government Access", "Summit Priority Seats", "Executive Mentorship", "Brand Visibility"],
         },
       ]}
       title="Join South Africa's Most Influential Property Network"
@@ -201,48 +121,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
-          id: "1",
-          name: "Sandton Redevelopment",
-          price: "R500M",
-          variant: "Partnership",
-          imageSrc: "asset://pillar-1?_wi=2",
-        },
-        {
-          id: "2",
-          name: "Property Summit 2024",
-          price: "Flagship",
-          variant: "Policy",
-          imageSrc: "http://img.b2bpic.net/free-photo/bar-graph-statistics-analysis-business-concept_53876-122743.jpg",
-        },
-        {
-          id: "3",
-          name: "Emerging Developer Fund",
-          price: "Funding",
-          variant: "Access",
-          imageSrc: "http://img.b2bpic.net/free-photo/paper-style-isolation-arrangement_23-2148998894.jpg",
-        },
-        {
-          id: "4",
-          name: "Transformation Framework",
-          price: "Policy",
-          variant: "Advocacy",
-          imageSrc: "http://img.b2bpic.net/free-photo/montreal-sunrise-silhouette-viewed-from-mont-royal-with-city-skyline-morning_649448-4081.jpg?_wi=2",
-        },
-        {
-          id: "5",
-          name: "Mentorship Cohort 1",
-          price: "Development",
-          variant: "Education",
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-giving-presentation_23-2151937274.jpg",
-        },
-        {
-          id: "6",
-          name: "Regional Summit Series",
-          price: "Influence",
-          variant: "Events",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-business-card-mockup_23-2147687425.jpg",
-        },
+        { id: "1", name: "Sandton Redevelopment", price: "R500M", variant: "Partnership", imageSrc: "asset://pillar-1?_wi=2" },
+        { id: "2", name: "Property Summit 2024", price: "Flagship", variant: "Policy", imageSrc: "http://img.b2bpic.net/free-photo/bar-graph-statistics-analysis-business-concept_53876-122743.jpg" },
+        { id: "3", name: "Emerging Developer Fund", price: "Funding", variant: "Access", imageSrc: "http://img.b2bpic.net/free-photo/paper-style-isolation-arrangement_23-2148998894.jpg" },
       ]}
       title="Projects & Impact"
       description="Showcasing developments and partnerships that define our transformation impact."
@@ -256,36 +137,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       members={[
-        {
-          id: "e1",
-          name: "Annual Property Summit",
-          role: "Our flagship event",
-          imageSrc: "asset://pillar-1?_wi=3",
-        },
-        {
-          id: "e2",
-          name: "Policy Roundtables",
-          role: "Strategic influence",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-skyscraper-reflects-city-life-dusk-generated-by-ai_188544-27409.jpg",
-        },
-        {
-          id: "e3",
-          name: "Regional Networking",
-          role: "Connect & grow",
-          imageSrc: "http://img.b2bpic.net/free-photo/surreal-dream-scenario-concept_23-2151891635.jpg",
-        },
-        {
-          id: "e4",
-          name: "Executive Masterclasses",
-          role: "Skill advancement",
-          imageSrc: "http://img.b2bpic.net/free-photo/montreal-sunrise-silhouette-viewed-from-mont-royal-with-city-skyline-morning_649448-4081.jpg?_wi=3",
-        },
-        {
-          id: "e5",
-          name: "Annual Awards Gala",
-          role: "Celebrating excellence",
-          imageSrc: "http://img.b2bpic.net/free-photo/several-lights-forming-triangular-patterns-flowing-forward-dark-background_181624-18130.jpg?_wi=1",
-        },
+        { id: "e1", name: "Annual Property Summit", role: "Our flagship event", imageSrc: "asset://pillar-1?_wi=3" },
+        { id: "e2", name: "Policy Roundtables", role: "Strategic influence", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-skyscraper-reflects-city-life-dusk-generated-by-ai_188544-27409.jpg" },
+        { id: "e3", name: "Regional Networking", role: "Connect & grow", imageSrc: "http://img.b2bpic.net/free-photo/surreal-dream-scenario-concept_23-2151891635.jpg" },
       ]}
       title="Where Industry Leaders Meet"
       description="Annual summits, policy roundtables, and high-stakes networking events."
@@ -300,56 +154,8 @@ export default function LandingPage() {
       title="Intelligence That Moves the Market"
       description="Thought leadership, market reports, and expert policy commentary."
       blogs={[
-        {
-          id: "b1",
-          category: "Analysis",
-          title: "2025 Property Outlook",
-          excerpt: "Deep dive into sector shifts.",
-          imageSrc: "asset://pillar-1?_wi=4",
-          authorName: "Admin",
-          authorAvatar: "asset://pillar-1",
-          date: "Jan 2025",
-        },
-        {
-          id: "b2",
-          category: "Policy",
-          title: "Transformation Frameworks",
-          excerpt: "The new legislative landscape.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vietnamese-strategy-presentation-teamwork-aged_1262-2156.jpg",
-          authorName: "Admin",
-          authorAvatar: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199321.jpg",
-          date: "Dec 2024",
-        },
-        {
-          id: "b3",
-          category: "Strategy",
-          title: "Ownership Models",
-          excerpt: "Building legacy through equity.",
-          imageSrc: "http://img.b2bpic.net/free-photo/startup-team-doing-planning-session-office-lease-agreement_482257-106168.jpg",
-          authorName: "Admin",
-          authorAvatar: "http://img.b2bpic.net/free-photo/paper-style-isolation-arrangement_23-2148998898.jpg",
-          date: "Nov 2024",
-        },
-        {
-          id: "b4",
-          category: "Finance",
-          title: "Capital Raising 101",
-          excerpt: "Securing your next project.",
-          imageSrc: "http://img.b2bpic.net/free-photo/montreal-sunrise-silhouette-viewed-from-mont-royal-with-city-skyline-morning_649448-4081.jpg?_wi=4",
-          authorName: "Admin",
-          authorAvatar: "asset://pillar-1",
-          date: "Oct 2024",
-        },
-        {
-          id: "b5",
-          category: "Market",
-          title: "Sandton Growth Trends",
-          excerpt: "Why investment still flows.",
-          imageSrc: "http://img.b2bpic.net/free-photo/several-lights-forming-triangular-patterns-flowing-forward-dark-background_181624-18130.jpg?_wi=2",
-          authorName: "Admin",
-          authorAvatar: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199321.jpg",
-          date: "Sep 2024",
-        },
+        { id: "b1", category: "Analysis", title: "2025 Property Outlook", excerpt: "Deep dive into sector shifts.", imageSrc: "asset://pillar-1?_wi=4", authorName: "Admin", authorAvatar: "asset://pillar-1", date: "Jan 2025" },
+        { id: "b2", category: "Policy", title: "Transformation Frameworks", excerpt: "The new legislative landscape.", imageSrc: "http://img.b2bpic.net/free-photo/vietnamese-strategy-presentation-teamwork-aged_1262-2156.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199321.jpg", date: "Dec 2024" },
       ]}
     />
   </div>
@@ -357,9 +163,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Contact Us"
       title="Sandton HQ Presence"
       description="Visit our headquarters in the heart of Sandton to discuss membership, partnership, and deal flow."
@@ -372,49 +176,13 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/modern-hotel-lobby-with-leather-sofa-chairs-lamp-round-tables_1262-12373.jpg"
       logoText="SAIBPP"
       columns={[
-        {
-          title: "Institute",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Events",
-              href: "#events",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Membership",
-              href: "#membership",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Institute", items: [{ label: "About", href: "#" }, { label: "Events", href: "#events" }] },
+        { title: "Support", items: [{ label: "Membership", href: "#membership" }, { label: "Contact", href: "/contact" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612;
-  --primary-cta: #C5A059;
+  --background: #fdfbf7;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #d4af37;
   --primary-cta-text: #000000;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #000612;
-  --accent: #E2C07D;
-  --background-accent: #f5f5f5;
+  --accent: #b8860b;
+  --background-accent: #f4ede0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);