src/app/layout.tsx

@@ -1,11 +1,13 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "./styles/variables.css";
+import "./styles/base.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Old Boy Domino Club",  description: "Join a thriving community of domino enthusiasts where tradition meets fellowship."};
+  title: "Old Boy Domino Club",  description: "Join a thriving community of domino enthusiasts"};
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import HeroSplitKpi from '@/components/sections/metrics/HeroSplitKpi';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterCard from '@/components/sections/footer/FooterCard';
@@ -42,8 +42,8 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Old Boy Domino Club"
+        <HeroSplit
+          title="Old Boy Domino Club"
           description="Join a thriving community of domino enthusiasts where tradition meets fellowship. Experience the timeless joy of classic domino gaming with friends who share your passion."
           buttons={[
             { text: "Join Our Club", href: "contact" },
@@ -53,7 +53,7 @@ export default function LandingPage() {
           imageSrc="https://img.b2bpic.net/free-photo/side-view-glass-tea-with-backgammon-jam-carpet-table_176474-3102.jpg"
           imageAlt="Classic domino table game in session"
           mediaAnimation="slide-up"
-          frameStyle="card"
+          imagePosition="right"
         />
       </div>
 
@@ -125,7 +125,7 @@ export default function LandingPage() {
       </div>
 
       <div id="metrics" data-section="metrics">
-        <HeroSplitKpi
+        <MetricCardSeven
           title="By The Numbers"
           description="Our impact and growth over the decades"
           tag="Statistics"
@@ -153,7 +153,7 @@ export default function LandingPage() {
             }
           ]}
           animationType="slide-up"
-          textboxLayout="split"
+          textboxLayout="default"
           useInvertedBackground={true}
         />
       </div>