Merge version_5 into main

2025-12-24 12:48:47 +00:00 · 2025-12-24 12:47:18 +00:00 · 2025-12-24 12:45:18 +00:00 · 2025-12-24 12:41:24 +00:00 · 2025-12-24 12:23:44 +00:00 · 2025-12-24 12:13:12 +00:00
3 changed files with 134 additions and 184 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,13 +4,13 @@
  /* Base units */
  /* --vw is set by ThemeProvider */
-  --background: #000000;
+  --background: #0a0a0a;
-  --card: #1b1b1b;
+  --card: #1a1a1a;
-  --foreground: #ffffff;
+  --foreground: #fffef5e6;
-  --primary-cta: #ffcc00;
+  --primary-cta: #facc15;
-  --secondary-cta: #151515;
+  --secondary-cta: #1a1a1a;
-  --accent: #303030;
+  --accent: #737373;
-  --background-accent: #303030;
+  --background-accent: #737373;
  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,34 +1,58 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
-const geistSans = localFont({
+const inter = Inter({
-  src: "./fonts/GeistVF.woff2",
+  variable: "--font-inter",
-  variable: "--font-geist-sans",
+  subsets: ["latin"],
  weight: "100 900",
 });
 const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff2",
  variable: "--font-geist-mono",
  weight: "100 900",
 });
 export const metadata: Metadata = {
-  title: "Star Wars - Join the Galactic Saga",
+  title: "Star Wars Fans Community - Explore the Galaxy",
-  description: "Explore the galaxy far, far away with millions of fans. Discover movies, characters, collectibles and more from the Star Wars universe.",
+  description: "Join millions of Star Wars fans worldwide. Discover exclusive content, connect with the community, and celebrate the epic saga.",
-  keywords: ["star wars", "movies", "collectibles", "lightsaber", "millennium falcon", "yoda", "force"]
+  keywords: "Star Wars, fans, community, movies, series, Jedi, galaxy",
  metadataBase: new URL("https://starwarsfans.com"),
  alternates: {
    canonical: "https://starwarsfans.com"
  },
  openGraph: {
    title: "Star Wars Fans Community",
    description: "Join the Force. Connect with Star Wars fans, explore content, and celebrate the greatest saga.",
    siteName: "STAR WARS",
    type: "website",
    images: [
      {
        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg",
        alt: "Star Wars galaxy"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: "Star Wars Fans Community",
    description: "Join millions of fans exploring the galaxy's greatest saga",
    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"]
  },
  robots: {
    index: true,
    follow: true
  }
 };
 export default function RootLayout({
  children,
-}: {
+}: Readonly<{
  children: React.ReactNode;
-}) {
+}>) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+          className={inter.variable}
        >
          <Tag />
          {children}
        <script
@@ -1249,6 +1273,7 @@ export default function RootLayout({
          }}
        />
      </body>
      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,6 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import HeroBillboardCarouselSplit from "@/components/sections/hero/HeroBillboardCarouselSplit";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import ParallaxAbout from "@/components/sections/about/ParallaxAbout";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import FooterSocial from "@/components/sections/footer/FooterSocial";
 import { Youtube, Twitter, Linkedin, Film, Users, Calendar } from "lucide-react";
 export default function StarWarsPage() {
  return (
@@ -23,155 +16,87 @@ export default function StarWarsPage() {
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
-      <div id="hero" data-section="hero">
+      <div className="min-h-screen flex flex-col items-center justify-center p-8">
-        <HeroBillboardCarouselSplit
+        <div className="max-w-4xl mx-auto text-center space-y-8">
-          title="STAR WARS: Join millions of fans exploring the galaxy's greatest saga"
+          <h1 className="text-6xl font-extrabold text-gradient bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
-          mediaItems={[
+            STAR WARS
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 1" },
+          </h1>
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 2" },
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 3" },
+            Join millions of fans exploring the galaxy's greatest saga. Discover exclusive content, connect with the community, and celebrate the Force.
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 4" },
+          </p>
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 5" },
+          <div className="flex gap-4 justify-center flex-wrap">
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Star Wars galaxy 6" }
+            <button className="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-300">
-          ]}
+              Enter the Galaxy
-          buttons={[{ text: "Join the Force", href: "#contact" }]}
+            </button>
-        />
+            <button className="px-8 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-gray-700 rounded-full font-semibold hover:bg-white/20 transition-all duration-300">
              Join Community
            </button>
          </div>
        </div>
-      <div id="metrics" data-section="metrics">
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
-        <MetricCardThree
+          <div className="text-center p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-          title="Our Galactic Impact"
+            <div className="text-3xl font-bold text-blue-500">40+</div>
-          description="Experience the epic saga spanning decades of storytelling"
+            <div className="text-lg font-semibold mt-2">Years</div>
-          metrics={[
+            <div className="text-sm text-gray-600 mt-1">Of Star Wars storytelling</div>
-            { id: "1", icon: Calendar, title: "Years", value: "40+" },
+          </div>
-            { id: "2", icon: Film, title: "Films", value: "11" },
+          <div className="text-center p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-            { id: "3", icon: Users, title: "Fans", value: "100M+" }
+            <div className="text-3xl font-bold text-purple-500">11</div>
-          ]}
+            <div className="text-lg font-semibold mt-2">Main Films</div>
-          gridVariant="uniform-all-items-equal"
+            <div className="text-sm text-gray-600 mt-1">Complete Skywalker saga</div>
-          textboxLayout="default"
+          </div>
-          animationType="slide-up"
+          <div className="text-center p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-          useInvertedBackground="noInvert"
+            <div className="text-3xl font-bold text-blue-500">100M+</div>
-        />
+            <div className="text-lg font-semibold mt-2">Fans</div>
            <div className="text-sm text-gray-600 mt-1">Worldwide united by Force</div>
          </div>
          <div className="text-center p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
            <div className="text-3xl font-bold text-purple-500">∞</div>
            <div className="text-lg font-semibold mt-2">Stories</div>
            <div className="text-sm text-gray-600 mt-1">In expanding galaxy</div>
          </div>
        </div>
-      <div id="products" data-section="products">
+        <div className="mt-16 max-w-4xl mx-auto">
-        <ProductCardTwo
+          <h2 className="text-3xl font-bold text-center mb-8">About the Universe</h2>
-          title="Featured Products"
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          description="Explore our premium Star Wars collection with top-rated items"
+            <div className="p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-          tag="Best Sellers"
+              <h3 className="text-xl font-semibold mb-3">The Saga</h3>
-          products={[
+              <p className="text-gray-600 text-sm leading-relaxed">
-            {
+                From Episode I through IX, experience the epic story of the Skywalker family and the eternal battle between light and dark sides of the Force.
-              id: "1",
+              </p>
-              brand: "Lucasfilm Collectibles",
+            </div>
-              name: "Premium Lightsaber Replica",
+            <div className="p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-              price: "$199.99",
+              <h3 className="text-xl font-semibold mb-3">Expanded Universe</h3>
-              rating: 5,
+              <p className="text-gray-600 text-sm leading-relaxed">
-              reviewCount: "2.3k",
+                Venture into incredible stories beyond the main saga. Explore the Old Republic, High Republic era, and countless tales of heroes and villains.
-              imageSrc: "/placeholders/placeholder1.webp",
+              </p>
-              imageAlt: "Premium Lightsaber Replica",
+            </div>
-              starColor: "#ff0000"
+            <div className="p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-            },
+              <h3 className="text-xl font-semibold mb-3">Iconic Characters</h3>
-            {
+              <p className="text-gray-600 text-sm leading-relaxed">
-              id: "2",
+                Meet legendary heroes like Luke Skywalker, Princess Leia, Han Solo, and Darth Vader who define the Star Wars legacy.
-              brand: "Star Wars Universe",
+              </p>
-              name: "Millennium Falcon Model Kit",
+            </div>
-              price: "$149.99",
+          </div>
              rating: 4,
              reviewCount: "1.8k",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Millennium Falcon Model Kit",
              starColor: "#ff0000"
            },
            {
              id: "3",
              brand: "Force Masters",
              name: "Yoda Statue Figurine",
              price: "$89.99",
              rating: 5,
              reviewCount: "3.1k",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Yoda Statue Figurine",
              starColor: "#ff0000"
            },
            {
              id: "4",
              brand: "Imperial Design",
              name: "Death Star Lamp",
              price: "$129.99",
              rating: 4,
              reviewCount: "956",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Death Star Lamp",
              starColor: "#ff0000"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
        </div>
-      <div id="about" data-section="about">
+        <div className="mt-16 max-w-2xl mx-auto text-center">
-        <ParallaxAbout
+          <h2 className="text-3xl font-bold mb-4">Join the Force</h2>
-          title="Elevate Your Experience"
+          <p className="text-gray-600 mb-8">
-          description="From Episode I through IX, experience the story of the Skywalker family and the eternal battle between light and dark sides of the Force."
+            Subscribe for exclusive Star Wars news, community updates, and behind-the-scenes content.
-          imageSrc="/placeholders/placeholder1.webp"
+          </p>
-          imageAlt="Star Wars background"
+          <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
-          buttons={[{ text: "Discover More", href: "#contact" }]}
+            <input 
              type="email" 
              placeholder="Your email" 
              className="flex-1 px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/80 backdrop-blur-sm"
            />
            <button className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Subscribe
            </button>
          </div>
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch with the Force"
          description="Subscribe to our newsletter for exclusive Star Wars content, updates, and announcements from the galaxy far, far away."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your favorite Star Wars moment...",
            rows: 4,
            required: true
          }}
          imageSrc="/placeholders/placeholder1.webp"
          imageAlt="Star Wars Contact"
          mediaPosition="right"
          buttonText="Send Message"
          useInvertedBackground="noInvert"
        />
        </div>
      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="STAR WARS"
          columns={[
            {
              title: "Explore",
              items: [
                { label: "Movies", href: "#" },
                { label: "Series", href: "#" },
                { label: "Characters", href: "#" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Forums", href: "#" },
                { label: "Events", href: "#" },
                { label: "Merch", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
          ]}
          copyrightText="© 2024 STAR WARS. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
Author	SHA1	Message	Date
mulika-local	06abe78f58	Merge version_5 into main Merge version_5 into main	2025-12-24 12:48:47 +00:00
mulika-local	9be88da2b1	Merge version_5 into main Merge version_5 into main	2025-12-24 12:47:18 +00:00
mulika-local	9610eb709a	Merge version_5 into main Merge version_5 into main	2025-12-24 12:45:18 +00:00
mulika-local	68f4a67133	Merge version_4 into main Merge version_4 into main	2025-12-24 12:41:24 +00:00
mulika-local	ea228313f7	Merge version_3 into main Merge version_3 into main	2025-12-24 12:23:44 +00:00
mulika-local	af56b4ac15	Merge version_2 into main Merge version_2 into main	2025-12-24 12:13:12 +00:00