diff --git a/src/app/components/page.tsx b/src/app/components/page.tsx
new file mode 100644
index 0000000..b5ea295
--- /dev/null
+++ b/src/app/components/page.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function ComponentsPage() {
+  const defaultTheme = {
+    defaultButtonVariant: "hover-magnetic",    defaultTextAnimation: "entrance-slide",    borderRadius: "rounded",    contentWidth: "medium",    sizing: "medium",    background: "none",    cardStyle: "soft-shadow",    primaryButtonStyle: "gradient",    secondaryButtonStyle: "glass",    headingFontWeight: "bold"};
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...defaultTheme}
+    >
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" }
+        ]}
+        brandName="Webild"
+        button={{ text: "Contact", href: "#contact" }}
+      />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            logoText="Webild"
+            description="Crafting innovative digital solutions for a connected world. We empower businesses with cutting-edge technology and design."
+            buttons={[
+              { text: "Learn More", href: "#features" },
+              { text: "Our Services", href: "/services" }
+            ]}
+            background={{ variant: 'radial-gradient' }}
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            tag="Capabilities"
+            title="Our Core Strengths"
+            description="Discover the diverse expertise that drives our innovative projects and client success."
+            features={[
+              { id: "1", title: "Web Development", subtitle: "Building robust and scalable web platforms.", category: "Development", value: "High Performance" },
+              { id: "2", title: "Mobile Apps", subtitle: "Delivering intuitive iOS & Android applications.", category: "Development", value: "User-Centric" },
+              { id: "3", title: "UI/UX Design", subtitle: "Crafting beautiful and seamless user experiences.", category: "Design", value: "Engagement" },
+              { id: "4", title: "Cloud Solutions", subtitle: "Managing secure and efficient cloud infrastructure.", category: "Infrastructure", value: "Scalability" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Get in Touch"
+            description="Ready to start your project? Fill out the form below and we'll get back to you shortly."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "Your Message", rows: 5 }}
+            buttonText="Send Message"
+            useInvertedBackground={false}
+            mediaPosition="right"
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file