src/app/contact/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Mail, Phone, User } from "lucide-react";
+import { useState } from "react";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    fullName: "",    email: "",    phoneNumber: ""});
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    // Reset form
+    setFormData({
+      fullName: "",      email: "",      phoneNumber: ""});
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="large"
+      background="noise"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Youth Center"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Join", id: "contact" },
+            { name: "Contact", id: "/contact" },
+            { name: "Location", id: "location" },
+          ]}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form" className="w-full py-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl font-bold mb-4">Contact Us</h1>
+            <p className="text-xl text-foreground/80">Join Youth Center Sport Field with our clean registration form</p>
+          </div>
+
+          <div className="bg-card rounded-lg p-8 shadow-lg border border-accent/20">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Full Name Field */}
+              <div className="space-y-2">
+                <label htmlFor="fullName" className="block text-sm font-medium text-foreground">
+                  <div className="flex items-center gap-2 mb-2">
+                    <User size={18} className="text-primary-cta" />
+                    <span>Full Name</span>
+                  </div>
+                </label>
+                <input
+                  type="text"
+                  id="fullName"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleInputChange}
+                  placeholder="Enter your full name"
+                  required
+                  className="w-full px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              {/* Email Address Field */}
+              <div className="space-y-2">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Mail size={18} className="text-primary-cta" />
+                    <span>Email Address</span>
+                  </div>
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  placeholder="Enter your email address"
+                  required
+                  className="w-full px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              {/* Phone Number Field */}
+              <div className="space-y-2">
+                <label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Phone size={18} className="text-primary-cta" />
+                    <span>Phone Number</span>
+                  </div>
+                </label>
+                <input
+                  type="tel"
+                  id="phoneNumber"
+                  name="phoneNumber"
+                  value={formData.phoneNumber}
+                  onChange={handleInputChange}
+                  placeholder="Enter your phone number"
+                  required
+                  className="w-full px-4 py-3 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                />
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                className="w-full bg-primary-cta hover:opacity-90 text-primary-cta-text font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 mt-8"
+              >
+                Join Now
+              </button>
+            </form>
+          </div>
+
+          <div className="text-center mt-8 text-foreground/60">
+            <p>We'll contact you soon to confirm your membership and get you started on your fitness journey.</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Youth Center"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Home", href: "/" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,6 +32,7 @@ export default function LandingPage() {
             { name: "Features", id: "features" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Join", id: "contact" },
+            { name: "Contact", id: "/contact" },
             { name: "Location", id: "location" },
           ]}
         />
@@ -152,7 +153,7 @@ export default function LandingPage() {
           title="Join Youth Center Sport Field Today"
           description="Take the first step towards your fitness goals. Register now and become part of our thriving fitness community in Addis Ababa."
           buttons={[
-            { text: "Register Now", href: "#registration" },
+            { text: "Register Now", href: "/contact" },
             { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
@@ -161,22 +162,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="registration" data-section="registration">
-        <ContactCTA
-          tag="Join Our Gym"
-          tagIcon={CheckCircle}
-          tagAnimation="slide-up"
-          title="Registration Form"
-          description="Fill out the form below to join Youth Center Sport Field. We'll contact you soon to confirm your membership."
-          buttons={[
-            { text: "Submit Registration", href: "#contact" },
-          ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-        />
-      </div>
-
       <div id="location" data-section="location">
         <ContactCTA
           tag="Find Us"
@@ -197,7 +182,7 @@ export default function LandingPage() {
         <FooterLogoReveal
           logoText="Youth Center"
           leftLink={{ text: "Privacy Policy", href: "#" }}
-          rightLink={{ text: "Contact Us", href: "#contact" }}
+          rightLink={{ text: "Contact Us", href: "/contact" }}
         />
       </div>
     </ThemeProvider>