Switch to version 1: remove src/app/contact/page.tsx

Merge version_3 into main

src/app/contact/page.tsx

@@ -1,150 +0,0 @@
-"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,18 +1,57 @@
 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",  description: "Experience world-class fitness in the heart of Addis Ababa"};
+  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,
+  },
+};
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
-      <body>
+      <ServiceWrapper>
-        {children}
+        <body
-      
+          className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
+        >
+          <Tag />
+          {children}
+        
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1380,6 +1419,7 @@ export default function RootLayout({
           }}
         />
       </body>
+      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -32,7 +32,6 @@ export default function LandingPage() {
             { name: "Features", id: "features" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Join", id: "contact" },
-            { name: "Contact", id: "/contact" },
             { name: "Location", id: "location" },
           ]}
         />
@@ -128,6 +127,10 @@ 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"
@@ -149,7 +152,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: "/contact" },
+            { text: "Register Now", href: "#registration" },
             { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
@@ -158,6 +161,22 @@ 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"
@@ -178,9 +197,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>
   );
-}
+}