Add src/app/teams/page.tsx

src/app/teams/page.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useState } from "react";
+import { Users, MapPin, Trophy, Users2, Mail, Phone } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function TeamsPage() {
+  const [formData, setFormData] = useState({
+    teamName: "",    captain: "",    email: "",    phone: "",    region: "",    skillLevel: ""});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle");
+
+  const validateForm = () => {
+    const errors: Record<string, string> = {};
+
+    if (!formData.teamName.trim()) {
+      errors.teamName = "Team name is required";
+    }
+    if (!formData.captain.trim()) {
+      errors.captain = "Captain name is required";
+    }
+    if (!formData.email.trim()) {
+      errors.email = "Email is required";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      errors.email = "Please enter a valid email";
+    }
+    if (!formData.phone.trim()) {
+      errors.phone = "Phone number is required";
+    }
+    if (!formData.region) {
+      errors.region = "Region is required";
+    }
+    if (!formData.skillLevel) {
+      errors.skillLevel = "Skill level is required";
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      setSubmitStatus("error");
+      return;
+    }
+
+    console.log("Form submitted:", formData);
+    setSubmitStatus("success");
+    setFormData({
+      teamName: "",      captain: "",      email: "",      phone: "",      region: "",      skillLevel: ""});
+
+    setTimeout(() => {
+      setSubmitStatus("idle");
+    }, 3000);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (formErrors[name]) {
+      setFormErrors((prev) => {
+        const updated = { ...prev };
+        delete updated[name];
+        return updated;
+      });
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="inset"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Counter-Strike"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Competitive", id: "competitive" },
+            { name: "Community", id: "testimonials" },
+            { name: "Teams", id: "/teams" },
+            { name: "FAQ", id: "faq" },
+          ]}
+        />
+      </div>
+
+      <div id="featured-teams" data-section="featured-teams" className="py-20">
+        <TeamCardTen
+          title="Professional Counter-Strike Teams"
+          tag="Featured Teams"
+          tagAnimation="slide-up"
+          membersAnimation="slide-up"
+          members={[
+            {
+              id: "1",              name: "Natus Vincere",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-esports-player-headshot-wea-1772794208774-cede4231.png",              imageAlt: "Natus Vincere team logo"},
+            {
+              id: "2",              name: "FaZe Clan",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-team-coach-or-analyst-pro-1772794208496-4864025f.png",              imageAlt: "FaZe Clan team logo"},
+            {
+              id: "3",              name: "Vitality",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/esports-caster-or-streamer-professional--1772794209359-97fb478d.png",              imageAlt: "Vitality team logo"},
+            {
+              id: "4",              name: "Cloud9",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/esports-community-manager-or-event-organ-1772794208847-1bb5069c.png",              imageAlt: "Cloud9 team logo"},
+          ]}
+          memberVariant="card"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="team-registration" data-section="team-registration" className="py-20">
+        <div className="w-full max-w-4xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Register Your Team</h2>
+            <p className="text-lg text-foreground/70">
+              Join the competitive Counter-Strike community. Register your team to participate in tournaments and events.
+            </p>
+          </div>
+
+          <form
+            onSubmit={handleSubmit}
+            className="bg-card rounded-lg p-8 border border-accent/20 shadow-lg"
+          >
+            {submitStatus === "success" && (
+              <div className="mb-6 p-4 bg-green-500/20 border border-green-500/50 rounded-lg text-green-700 dark:text-green-300">
+                ✓ Team registration submitted successfully!
+              </div>
+            )}
+
+            {submitStatus === "error" && Object.keys(formErrors).length > 0 && (
+              <div className="mb-6 p-4 bg-red-500/20 border border-red-500/50 rounded-lg text-red-700 dark:text-red-300">
+                Please fix the errors below.
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Users className="inline mr-2 w-4 h-4" />
+                  Team Name *
+                </label>
+                <input
+                  type="text"
+                  name="teamName"
+                  value={formData.teamName}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.teamName
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="Enter team name"
+                />
+                {formErrors.teamName && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.teamName}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Users2 className="inline mr-2 w-4 h-4" />
+                  Captain Name *
+                </label>
+                <input
+                  type="text"
+                  name="captain"
+                  value={formData.captain}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.captain
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="Captain name"
+                />
+                {formErrors.captain && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.captain}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Mail className="inline mr-2 w-4 h-4" />
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.email
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="team@example.com"
+                />
+                {formErrors.email && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.email}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Phone className="inline mr-2 w-4 h-4" />
+                  Phone Number *
+                </label>
+                <input
+                  type="tel"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.phone
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="+1 (555) 000-0000"
+                />
+                {formErrors.phone && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.phone}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <MapPin className="inline mr-2 w-4 h-4" />
+                  Region *
+                </label>
+                <select
+                  name="region"
+                  value={formData.region}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.region
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                >
+                  <option value="">Select region</option>
+                  <option value="na">North America</option>
+                  <option value="eu">Europe</option>
+                  <option value="asia">Asia</option>
+                  <option value="sa">South America</option>
+                  <option value="oce">Oceania</option>
+                </select>
+                {formErrors.region && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.region}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Trophy className="inline mr-2 w-4 h-4" />
+                  Skill Level *
+                </label>
+                <select
+                  name="skillLevel"
+                  value={formData.skillLevel}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.skillLevel
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                >
+                  <option value="">Select skill level</option>
+                  <option value="amateur">Amateur</option>
+                  <option value="semi-pro">Semi-Pro</option>
+                  <option value="professional">Professional</option>
+                  <option value="elite">Elite</option>
+                </select>
+                {formErrors.skillLevel && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.skillLevel}</p>
+                )}
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full mt-8 px-6 py-3 bg-primary-cta text-white rounded-lg font-medium hover:opacity-90 transition-opacity"
+            >
+              Register Team
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <div id="contact" data-section="contact" className="py-20">
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What is required to register a team?",              content:
+                "You need a team name, captain name, valid email, phone number, region, and skill level. Minimum 5 players are required for competitive tournaments."},
+            {
+              id: "2",              title: "When can my team start competing?",              content:
+                "Once registered and verified, your team can participate in upcoming tournaments. Verification typically takes 24-48 hours during business days."},
+            {
+              id: "3",              title: "Are there team fees?",              content:
+                "Team registration is free. However, individual tournament participation may have entry fees that vary by event. Check specific tournament details for pricing."},
+            {
+              id: "4",              title: "How do I update team information?",              content:
+                "Contact our support team with your team registration ID. We can help you update team roster, captain, or contact information at any time."},
+            {
+              id: "5",              title: "What support do you provide?",              content:
+                "We provide tournament scheduling, anti-cheat support, dispute resolution, and community management. Our support team is available 24/7 for assistance."},
+            {
+              id: "6",              title: "Can I register multiple teams?",              content:
+                "Yes, you can register multiple teams under the same organization. Each team must have unique members and a designated captain for tournament participation."},
+          ]}
+          ctaTitle="Ready to Register?"
+          ctaDescription="Get your team set up and start competing in Counter-Strike tournaments today. Our team is here to help."
+          ctaButton={{ text: "Contact Support", href: "#" }}
+          ctaIcon={Users}
+          useInvertedBackground={false}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Counter-Strike"
+          copyrightText="© 2024 Counter-Strike. All rights reserved."
+          columns={[
+            {
+              title: "Game",              items: [
+                { label: "Download", href: "https://www.counter-strike.net" },
+                { label: "Updates", href: "#" },
+                { label: "System Requirements", href: "#" },
+                { label: "Support", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forums", href: "https://forums.steampowered.com" },
+                { label: "Teams", href: "/teams" },
+                { label: "Esports", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Code of Conduct", href: "#" },
+                { label: "Contact", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}