mulika-local/47f2230a-b9f8-4109-a088-4b5d1a9cfc89
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Compare commits

base: mulika-local:version_10
Branches Tags
mulika-local:main mulika-local:version_16 mulika-local:version_15 mulika-local:version_14 mulika-local:version_13 mulika-local:version_12 mulika-local:version_11 mulika-local:version_10 mulika-local:version_9 mulika-local:version_8 mulika-local:version_7 mulika-local:version_5 mulika-local:version_6 mulika-local:version_4 mulika-local:version_3 mulika-local:version_2 mulika-local:version_1
..
compare: mulika-local:f92f3e51f4a763f7e5eabcce5754144d833f4db9
Branches Tags
mulika-local:version_16 mulika-local:main mulika-local:version_15 mulika-local:version_14 mulika-local:version_13 mulika-local:version_12 mulika-local:version_11 mulika-local:version_10 mulika-local:version_9 mulika-local:version_8 mulika-local:version_7 mulika-local:version_5 mulika-local:version_6 mulika-local:version_4 mulika-local:version_3 mulika-local:version_2 mulika-local:version_1

11 Commits
version_10 ... f92f3e51f4

Author SHA1 Message Date
mulika-local
f92f3e51f4 Merge version_9 into main 
Merge version_9 into main
 2025-12-24 13:22:51 +00:00
mulika-local
476ada74d9 Merge version_8 into main 
Merge version_8 into main
 2025-12-24 13:10:01 +00:00
mulika-local
0190e9d3e0 Merge version_8 into main 
Merge version_8 into main
 2025-12-24 13:08:32 +00:00
mulika-local
55b314aaa2 Merge version_8 into main 
Merge version_8 into main
 2025-12-24 13:07:08 +00:00
mulika-local
d50e44645a Merge version_7 into main 
Merge version_7 into main
 2025-12-24 13:03:38 +00:00
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
3 changed files with 121 additions and 143 deletions
Expand all files Collapse all files

14
src/app/globals.css
View File

@@ -4,13 +4,13 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
--background: #ffffff; --background: #0a0a0a;
--card: #fafafa; --card: #1a1a1a;
--foreground: #000000; --foreground: #fffef5e6;
--primary-cta: #ff0000; --primary-cta: #facc15;
--secondary-cta: #ffffff; --secondary-cta: #1a1a1a;
--accent: #e5e5e5; --accent: #737373;
--background-accent: #f5f5f5; --background-accent: #737373;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

246
src/app/page.tsx
View File

@@ -1,6 +1,12 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroBillboardMetrics from "@/components/sections/hero/HeroBillboardMetrics";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ParallaxAbout from "@/components/sections/about/ParallaxAbout";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSplit from "@/components/sections/footer/FooterSplit";
import { Phone, Mail, MapPin } from "lucide-react";
export default function StarWarsPage() { export default function StarWarsPage() {
return ( return (
@@ -17,152 +23,124 @@ export default function StarWarsPage() {
headingFontWeight="extrabold" headingFontWeight="extrabold"
> >
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-purple-900 to-black text-white"> <HeroBillboardMetrics
<div className="text-center space-y-8 max-w-4xl mx-auto px-6"> title="STAR WARS"
<h1 className="text-6xl font-bold mb-6">STAR WARS</h1> description="Join millions of fans exploring the galaxy's greatest saga. Discover exclusive content, connect with the community, and celebrate the Force."
<p className="text-xl mb-8">Join millions of fans exploring the galaxy's greatest saga. Discover exclusive content, connect with the community, and celebrate the Force.</p> imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12"> imageAlt="Star Wars galaxy"
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6"> frameStyle="card"
<div className="text-3xl font-bold">40+</div> metricsLabel="Witness the scale of the Star Wars universe and its influence across generations"
<div className="text-lg">Years</div> metrics={[
<div className="text-sm text-gray-300">Of Star Wars storytelling</div> { id: "1", value: "40+", label: "Years of Star Wars storytelling" },
</div> { id: "2", value: "11", label: "Films in Complete Skywalker saga" },
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6"> { id: "3", value: "100M+", label: "Fans Worldwide united by Force" }
<div className="text-3xl font-bold">11</div> ]}
<div className="text-lg">Films</div> buttons={[
<div className="text-sm text-gray-300">Complete Skywalker saga</div> { text: "Enter the Galaxy", href: "#community" },
</div> { text: "Join Community", href: "#about" }
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6"> ]}
<div className="text-3xl font-bold">100M+</div> />
<div className="text-lg">Fans</div>
<div className="text-sm text-gray-300">Worldwide united by Force</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<div className="py-20 px-6"> <MetricCardEleven
<div className="max-w-6xl mx-auto"> title="Our Galactic Impact"
<div className="text-center mb-16"> description="Experience the epic saga spanning decades of storytelling"
<h2 className="text-4xl font-bold mb-4">Our Galactic Impact</h2> textboxLayout="default"
<p className="text-lg text-gray-600">Experience the epic saga spanning decades of storytelling</p> useInvertedBackground="noInvert"
</div> animationType="slide-up"
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> metrics={[
<div className="bg-white rounded-lg shadow-lg p-8 text-center"> {
<img src="/placeholders/placeholder1.webp" alt="Star Wars years" className="w-16 h-16 mx-auto mb-4 rounded-full" /> id: "1",
<div className="text-3xl font-bold mb-2">40+</div> value: "40+",
<div className="text-lg font-semibold mb-2">Years</div> title: "Years",
<div className="text-gray-600 mb-4">Of Star Wars storytelling</div> description: "Of Star Wars storytelling",
<div className="text-yellow-500">★★★★★ 4.8</div> imageSrc: "/images/noise.webp",
</div> imageAlt: "Star Wars years"
<div className="bg-white rounded-lg shadow-lg p-8 text-center"> },
<img src="/placeholders/placeholder1.webp" alt="Star Wars films" className="w-16 h-16 mx-auto mb-4 rounded-full" /> {
<div className="text-3xl font-bold mb-2">11</div> id: "2",
<div className="text-lg font-semibold mb-2">Films</div> value: "11",
<div className="text-gray-600 mb-4">Complete Skywalker saga</div> title: "Films",
<div className="text-yellow-500">★★★★★ 4.9</div> description: "Complete Skywalker saga",
</div> imageSrc: "/images/noise.webp",
<div className="bg-white rounded-lg shadow-lg p-8 text-center"> imageAlt: "Star Wars films"
<img src="/placeholders/placeholder1.webp" alt="Star Wars fans" className="w-16 h-16 mx-auto mb-4 rounded-full" /> },
<div className="text-3xl font-bold mb-2">100M+</div> {
<div className="text-lg font-semibold mb-2">Fans</div> id: "3",
<div className="text-gray-600 mb-4">Worldwide united by Force</div> value: "100M+",
<div className="text-yellow-500">★★★★☆ 4.7</div> title: "Fans",
</div> description: "Worldwide united by Force",
</div> imageSrc: "/images/noise.webp",
</div> imageAlt: "Star Wars fans"
</div> }
]}
/>
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<div className="py-20 px-6 bg-gray-50"> <ParallaxAbout
<div className="max-w-6xl mx-auto"> title="Elevate Your Experience"
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> description="Experience the epic saga spanning decades of storytelling across multiple eras and universes. From Episode I through IX, experience the story of the Skywalker family and the eternal battle between light and dark sides of the Force."
<div> tag="About Us"
<div className="text-sm font-semibold text-blue-600 mb-4">About Us</div> imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
<h2 className="text-4xl font-bold mb-6">Elevate Your Experience</h2> imageAlt="Star Wars background"
<p className="text-lg text-gray-600 mb-8">Experience the epic saga spanning decades of storytelling across multiple eras and universes. From Episode I through IX, experience the story of the Skywalker family and the eternal battle between light and dark sides of the Force.</p> buttons={[
<button className="bg-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition-colors"> { text: "Discover More", href: "#contact" }
Discover More ]}
</button> />
</div>
<div>
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg" alt="Star Wars background" className="w-full h-96 object-cover rounded-lg shadow-lg" />
</div>
</div>
</div>
</div>
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<div className="py-20 px-6"> <ContactSplitForm
<div className="max-w-6xl mx-auto"> title="Join the Force"
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> description="Subscribe for exclusive Star Wars news, community updates, and behind-the-scenes content."
<div> inputs={[
<h2 className="text-4xl font-bold mb-6">Join the Force</h2> { name: "email", type: "email", placeholder: "Your email address", required: true }
<p className="text-lg text-gray-600 mb-8">Subscribe for exclusive Star Wars news, community updates, and behind-the-scenes content.</p> ]}
<form className="space-y-6"> useInvertedBackground="noInvert"
<input type="text" placeholder="Your name" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" /> imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
<input type="email" placeholder="Your email address" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" /> buttonText="Send email"
<button type="submit" className="bg-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-blue-700 transition-colors"> onSubmit={(data) => console.log(data)}
Send Message />
</button>
</form>
</div>
<div>
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg" alt="Contact background" className="w-full h-96 object-cover rounded-lg shadow-lg" />
</div>
</div>
</div>
</div>
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<div className="bg-gray-900 text-white py-16 px-6"> <FooterSplit
<div className="max-w-6xl mx-auto"> logoText="STAR WARS"
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> columns={[
<div className="col-span-1 md:col-span-2"> {
<h3 className="text-2xl font-bold mb-4">STAR WARS</h3> title: "Explore",
<p className="text-gray-400 mb-6">Join millions of Star Wars fans worldwide. Discover exclusive content, connect with the community, and celebrate the epic saga.</p> items: [
<div className="space-y-2"> { label: "Movies", href: "#movies" },
<div className="flex items-center space-x-3"> { label: "Series", href: "#series" },
<span className="text-gray-400">📞</span> { label: "Characters", href: "#characters" }
<span>(914) 820-5734</span> ]
</div> },
<div className="flex items-center space-x-3"> {
<span className="text-gray-400">📧</span> title: "Community",
<span>contact@starwars.com</span> items: [
</div> { label: "Forums", href: "#forums" },
<div className="flex items-center space-x-3"> { label: "Events", href: "#events" },
<span className="text-gray-400">📍</span> { label: "Merch", href: "#merch" }
<span>Galaxy, Universe</span> ]
</div> },
</div> {
</div> title: "More",
<div> items: [
<h4 className="text-lg font-semibold mb-4">Explore</h4> { label: "About Us", href: "#about" },
<ul className="space-y-2"> { label: "Blog", href: "#blog" },
<li><a href="#movies" className="text-gray-400 hover:text-white transition-colors">Movies</a></li> { label: "Contact", href: "#contact" }
<li><a href="#series" className="text-gray-400 hover:text-white transition-colors">Series</a></li> ]
<li><a href="#characters" className="text-gray-400 hover:text-white transition-colors">Characters</a></li> }
</ul> ]}
</div> title="Join millions of Star Wars fans worldwide. Discover exclusive content, connect with the community, and celebrate the epic saga."
<div> contactItems={[
<h4 className="text-lg font-semibold mb-4">Community</h4> { icon: Phone, text: "(914) 820-5734" },
<ul className="space-y-2"> { icon: Mail, text: "contact@starwars.com" },
<li><a href="#forums" className="text-gray-400 hover:text-white transition-colors">Forums</a></li> { icon: MapPin, text: "Galaxy, Universe" }
<li><a href="#events" className="text-gray-400 hover:text-white transition-colors">Events</a></li> ]}
<li><a href="#merch" className="text-gray-400 hover:text-white transition-colors">Merch</a></li> />
</ul>
</div>
</div>
<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
<p>&copy; 2024 STAR WARS. All rights reserved.</p>
</div>
</div>
</div>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );