Merge version_2 into main #2
@@ -1260,4 +1260,4 @@ export default function RootLayout({
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
445
src/app/page.tsx
445
src/app/page.tsx
@@ -1,17 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
||||
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
|
||||
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import BlogCardFive from '@/components/sections/blog/BlogCardFive';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import TestimonialCardFour from '@/components/sections/testimonial/TestimonialCardFour';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function StarWarsPage() {
|
||||
return (
|
||||
@@ -28,238 +17,262 @@ export default function StarWarsPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Star Wars Fans"
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Community", id: "about" },
|
||||
{ name: "News", id: "blog" },
|
||||
{ name: "Members", id: "team" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Join Us", href: "contact" }}
|
||||
/>
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="text-xl font-semibold">Star Wars Fans</div>
|
||||
<nav className="flex space-x-6">
|
||||
<a href="#home" className="hover:text-primary transition-colors">Home</a>
|
||||
<a href="#about" className="hover:text-primary transition-colors">Community</a>
|
||||
<a href="#blog" className="hover:text-primary transition-colors">News</a>
|
||||
<a href="#team" className="hover:text-primary transition-colors">Members</a>
|
||||
<a href="#contact" className="hover:text-primary transition-colors">Contact</a>
|
||||
</nav>
|
||||
<a href="#contact" className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Us</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="STAR WARS"
|
||||
description="Join the ultimate community for Star Wars fans. Connect with fellow enthusiasts, share your passion, and explore the galaxy together."
|
||||
buttons={[
|
||||
{ text: "Explore Community", href: "about" },
|
||||
{ text: "Latest News", href: "blog" }
|
||||
]}
|
||||
layoutOrder="default"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png"
|
||||
imageAlt="Star Wars galaxy backdrop"
|
||||
frameStyle="card"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<h1 className="text-5xl font-bold mb-6">STAR WARS</h1>
|
||||
<p className="text-xl mb-8 max-w-3xl mx-auto">Join the ultimate community for Star Wars fans. Connect with fellow enthusiasts, share your passion, and explore the galaxy together.</p>
|
||||
<div className="space-x-4">
|
||||
<a href="#about" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Explore Community</a>
|
||||
<a href="#blog" className="inline-block px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">Latest News</a>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" alt="Star Wars galaxy backdrop" className="w-full h-96 object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<ParallaxAbout
|
||||
title="Welcome to the Galaxy"
|
||||
description="We are a thriving community dedicated to celebrating everything Star Wars. From the original trilogy to the latest series, we bring fans together to discuss, celebrate, and share their love for this iconic universe."
|
||||
tag="About Us"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502904271-z2pntgqf.jpg"
|
||||
imageAlt="Star Wars universe"
|
||||
buttons={[{ text: "Learn More", href: "contact" }]}
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-primary mb-2 block">About Us</span>
|
||||
<h2 className="text-4xl font-bold mb-6">Welcome to the Galaxy</h2>
|
||||
<p className="text-lg mb-8">We are a thriving community dedicated to celebrating everything Star Wars. From the original trilogy to the latest series, we bring fans together to discuss, celebrate, and share their love for this iconic universe.</p>
|
||||
<a href="#contact" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Learn More</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502904271-z2pntgqf.jpg" alt="Star Wars universe" className="w-full h-96 object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwenty
|
||||
title="What We Offer"
|
||||
description="Connect with the community through various activities and resources designed for Star Wars enthusiasts of all levels."
|
||||
images={[
|
||||
{ id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502906375-82uc6wjl.jpg" },
|
||||
{ id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502907661-wjlq2nxn.jpg" },
|
||||
{ id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502910619-wwr2g7a8.jpg" },
|
||||
{ id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
buttons={[{ text: "Join Now", href: "contact" }]}
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold mb-6">What We Offer</h2>
|
||||
<p className="text-lg max-w-3xl mx-auto mb-8">Connect with the community through various activities and resources designed for Star Wars enthusiasts of all levels.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502906375-82uc6wjl.jpg" alt="Feature 1" className="w-full h-48 object-cover rounded-lg" />
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502907661-wjlq2nxn.jpg" alt="Feature 2" className="w-full h-48 object-cover rounded-lg" />
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502910619-wwr2g7a8.jpg" alt="Feature 3" className="w-full h-48 object-cover rounded-lg" />
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" alt="Feature 4" className="w-full h-48 object-cover rounded-lg" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<a href="#contact" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
title="Community Leaders"
|
||||
description="Meet the passionate individuals leading our Star Wars fan community."
|
||||
members={[
|
||||
{ id: "1", name: "Luke S.", role: "Community Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" },
|
||||
{ id: "2", name: "Leia M.", role: "Content Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" },
|
||||
{ id: "3", name: "Han C.", role: "Events Coordinator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold mb-6">Community Leaders</h2>
|
||||
<p className="text-lg max-w-3xl mx-auto">Meet the passionate individuals leading our Star Wars fan community.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" alt="Luke S." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h3 className="text-xl font-semibold mb-2">Luke S.</h3>
|
||||
<p className="text-gray-600">Community Manager</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" alt="Leia M." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h3 className="text-xl font-semibold mb-2">Leia M.</h3>
|
||||
<p className="text-gray-600">Content Director</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" alt="Han C." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h3 className="text-xl font-semibold mb-2">Han C.</h3>
|
||||
<p className="text-gray-600">Events Coordinator</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex J.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg" },
|
||||
{ id: "2", name: "Sarah K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg" },
|
||||
{ id: "3", name: "Michael T.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg" },
|
||||
{ id: "4", name: "Emma R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg" }
|
||||
]}
|
||||
cardTitle="Join thousands of Star Wars fans connecting and sharing their passion every day"
|
||||
cardTag="Community Stories"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-sm font-medium text-primary mb-2 block">Community Stories</span>
|
||||
<h2 className="text-4xl font-bold mb-6">Join thousands of Star Wars fans connecting and sharing their passion every day</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg" alt="Alex J." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h4 className="font-semibold">Alex J.</h4>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg" alt="Sarah K." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h4 className="font-semibold">Sarah K.</h4>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg" alt="Michael T." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h4 className="font-semibold">Michael T.</h4>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg" alt="Emma R." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
|
||||
<h4 className="font-semibold">Emma R.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our community and membership."
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I join the community?",
|
||||
content: "Joining is simple! Complete our registration form on the contact page and you will receive confirmation within 24 hours. Membership is free and open to all Star Wars enthusiasts."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What events do you organize?",
|
||||
content: "We organize monthly movie screenings, discussion forums, fan meetups, and exclusive viewing events for new releases. Check our news section for upcoming events."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Is there a membership fee?",
|
||||
content: "No, our community is completely free to join. We rely on volunteer members and donations to keep our community running smoothly."
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can I share fan content?",
|
||||
content: "Absolutely! We encourage members to share fan art, theories, reviews, and creative content. Please respect copyright and community guidelines when sharing."
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg"
|
||||
imageAlt="Star Wars galaxy"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold mb-6">Frequently Asked Questions</h2>
|
||||
<p className="text-lg mb-8">Find answers to common questions about our community and membership.</p>
|
||||
<div className="space-y-6">
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-semibold mb-2">How do I join the community?</h3>
|
||||
<p>Joining is simple! Complete our registration form on the contact page and you will receive confirmation within 24 hours. Membership is free and open to all Star Wars enthusiasts.</p>
|
||||
</div>
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-semibold mb-2">What events do you organize?</h3>
|
||||
<p>We organize monthly movie screenings, discussion forums, fan meetups, and exclusive viewing events for new releases. Check our news section for upcoming events.</p>
|
||||
</div>
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-semibold mb-2">Is there a membership fee?</h3>
|
||||
<p>No, our community is completely free to join. We rely on volunteer members and donations to keep our community running smoothly.</p>
|
||||
</div>
|
||||
<div className="border-b pb-4">
|
||||
<h3 className="text-xl font-semibold mb-2">Can I share fan content?</h3>
|
||||
<p>Absolutely! We encourage members to share fan art, theories, reviews, and creative content. Please respect copyright and community guidelines when sharing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg" alt="Star Wars galaxy" className="w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardFive
|
||||
title="Latest Updates"
|
||||
description="Stay informed with the latest news, reviews, and discussions from the Star Wars universe."
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "A New Hope: The Latest Series Announcement",
|
||||
items: ["News", "Jan 15, 2025", "5 min read"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502908501-qegkac9j.jpg"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Fan Theories: Exploring Character Connections Across the Saga",
|
||||
items: ["Analysis", "Jan 12, 2025", "8 min read"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502909492-uldg0gxd.jpg"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold mb-6">Latest Updates</h2>
|
||||
<p className="text-lg max-w-3xl mx-auto">Stay informed with the latest news, reviews, and discussions from the Star Wars universe.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502908501-qegkac9j.jpg" alt="A New Hope" className="w-full h-48 object-cover" />
|
||||
<div className="p-6">
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
|
||||
<span>News</span>
|
||||
<span>•</span>
|
||||
<span>Jan 15, 2025</span>
|
||||
<span>•</span>
|
||||
<span>5 min read</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">A New Hope: The Latest Series Announcement</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502909492-uldg0gxd.jpg" alt="Fan Theories" className="w-full h-48 object-cover" />
|
||||
<div className="p-6">
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
|
||||
<span>Analysis</span>
|
||||
<span>•</span>
|
||||
<span>Jan 12, 2025</span>
|
||||
<span>•</span>
|
||||
<span>8 min read</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Fan Theories: Exploring Character Connections Across the Saga</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Join the Community"
|
||||
description="Ready to connect with fellow Star Wars fans? Sign up for our newsletter and become part of our growing community today."
|
||||
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: false
|
||||
}}
|
||||
useInvertedBackground="noInvert"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502916033-zltpd7vx.jpg"
|
||||
imageAlt="Star Wars community connection"
|
||||
mediaPosition="right"
|
||||
buttonText="Join Community"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials-four" data-section="testimonials-four">
|
||||
<TestimonialCardFour
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex J.",
|
||||
role: "Star Wars Enthusiast",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg",
|
||||
content: "This community has been incredible for connecting with other fans and sharing our passion."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah K.",
|
||||
role: "Collector & Fan",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg",
|
||||
content: "The events and discussions here are top-notch. I've made so many friends who share my love for Star Wars."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Michael T.",
|
||||
role: "Content Creator",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg",
|
||||
content: "An amazing platform to share fan theories and connect with a supportive community."
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emma R.",
|
||||
role: "Long-Time Fan",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg",
|
||||
content: "The best Star Wars community I've found. Everyone is welcoming and enthusiastic."
|
||||
}
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold mb-6">Join the Community</h2>
|
||||
<p className="text-lg mb-8">Ready to connect with fellow Star Wars fans? Sign up for our newsletter and become part of our growing community today.</p>
|
||||
<form className="space-y-6">
|
||||
<input type="text" name="name" placeholder="Your Name" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" />
|
||||
<input type="email" name="email" placeholder="Your Email" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" />
|
||||
<textarea name="message" placeholder="Tell us about your favorite Star Wars moment..." rows={4} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"></textarea>
|
||||
<button type="submit" className="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Community</button>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502916033-zltpd7vx.jpg" alt="Star Wars community connection" className="w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Star Wars Fans"
|
||||
copyrightText="© 2025 Star Wars Fan Community. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{ label: "About Us", href: "about" },
|
||||
{ label: "Members", href: "team" },
|
||||
{ label: "Events", href: "blog" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "News", href: "blog" },
|
||||
{ label: "FAQ", href: "faq" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "privacy" },
|
||||
{ label: "Terms of Service", href: "terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<footer className="py-20 px-6 bg-gray-900 text-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-4">Star Wars Fans</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Community</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#about" className="hover:text-primary transition-colors">About Us</a></li>
|
||||
<li><a href="#team" className="hover:text-primary transition-colors">Members</a></li>
|
||||
<li><a href="#blog" className="hover:text-primary transition-colors">Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Resources</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#blog" className="hover:text-primary transition-colors">News</a></li>
|
||||
<li><a href="#faq" className="hover:text-primary transition-colors">FAQ</a></li>
|
||||
<li><a href="#contact" className="hover:text-primary transition-colors">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Legal</h4>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#privacy" className="hover:text-primary transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#terms" className="hover:text-primary transition-colors">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-700 mt-12 pt-8 text-center">
|
||||
<p>© 2025 Star Wars Fan Community. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user