diff --git a/src/app/page.tsx b/src/app/page.tsx
index e69de29..1d5cb77 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSignup from "@/components/sections/hero/HeroSignup";
+import { Sparkles } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "features" },
+  { name: "Pricing", id: "pricing" },
+  { name: "FAQ", id: "faq" },
+];
+
+const button = {
+  text: "Get Started",  onClick: () => console.log("Get Started clicked"),
+};
+
+export default function Home() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={navItems}
+        brandName="Webild"
+        button={button}
+      />
+
+      <div id="hero" data-section="hero">
+        <HeroSignup
+          background={{ variant: "sparkles-gradient" }}
+          tag="Welcome"
+          tagIcon={Sparkles}
+          title="How much it will take?"
+          description="Get instant answers to your questions. Sign up now to receive personalized estimates and detailed pricing information tailored to your specific needs."
+          inputPlaceholder="Enter your email"
+          buttonText="Get Estimate"
+          onSubmit={(email) => console.log("Email submitted:", email)}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}