Update src/app/page.tsx

Merge version_2 into main

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/layout.tsx

@@ -1,57 +1,18 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Manrope } from "next/font/google";
-import { DM_Sans } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const manrope = Manrope({
-  variable: "--font-manrope",  subsets: ["latin"],
-});
-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Youth Center Sport Field | Fitness Gym in Addis Ababa",  description: "Premium fitness gym located at Comoros Street, Addis Ababa. Professional training, modern equipment, and community-focused fitness programs.",  keywords: "gym, fitness, Addis Ababa, Youth Center, training, sports field",  metadataBase: new URL("https://youth-center-sport-field.com"),
-  alternates: {
-    canonical: "https://youth-center-sport-field.com"},
-  openGraph: {
-    title: "Youth Center Sport Field | Transform Your Fitness",    description: "Premium fitness gym in Addis Ababa offering professional training and modern facilities",    url: "https://youth-center-sport-field.com",    siteName: "Youth Center Sport Field",    type: "website"},
-  twitter: {
-    card: "summary_large_image",    title: "Youth Center Sport Field | Fitness Gym",    description: "Join Ethiopia's premier fitness community in Addis Ababa"},
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Youth Center Sport Field",  description: "Experience world-class fitness in the heart of Addis Ababa"};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1419,7 +1380,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

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" },
           ]}
         />
@@ -127,10 +128,6 @@ export default function LandingPage() {
               id: "3",              name: "Desalegn Mekonnen",              handle: "@Desalegn_Fit",              testimonial: "Best gym facility in the city. The outdoor sports field and professional environment make it worth every penny.",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-fit-man-working-out-indoors-with-dumbbells_23-2149175334.jpg",              imageAlt: "Desalegn Mekonnen"},
             {
               id: "4",              name: "Selamawit Alemu",              handle: "@SelamFitnessJourney",              testimonial: "The trainers here understand my goals and push me to be better every single day. Highly recommend Youth Center!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-diversity-sport-woman-training_23-2149174802.jpg",              imageAlt: "Selamawit Alemu"},
-            {
-              id: "5",              name: "Yohannes Kebede",              handle: "@YohannesTone",              testimonial: "Perfect location, amazing facilities, and the community spirit is what makes Youth Center special. This is my second home.",              imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-red-headband-looking-confident-smiling-with-arms-crossed-standing-orange-wall_141793-55561.jpg",              imageAlt: "Yohannes Kebede"},
-            {
-              id: "6",              name: "Alemayehu Assefa",              handle: "@AlemayehuStrong",              testimonial: "Joining Youth Center was the best decision for my fitness. The professional atmosphere motivates me every day.",              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-cool-confident-young-afro-american-20-year-old-man-wearing-white-sleeveless-t-shirt-posing-isolated-handsome-serious-dark-skinned-guy-with-muscular-shoulders-resting-indoors_343059-403.jpg",              imageAlt: "Alemayehu Assefa"},
           ]}
           animationType="slide-up"
           title="What Our Members Say"
@@ -152,7 +149,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 +158,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,9 +178,9 @@ 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>
   );
-}
+}