Merge version_2 into main #8
280
src/app/page.tsx
280
src/app/page.tsx
@@ -12,25 +12,15 @@ import BlogCardOne from "@/components/sections/blog/BlogCardOne";
|
||||
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Sparkles, Zap, Shield, TrendingUp, Phone, MapPin } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "story" },
|
||||
{ name: "Services", id: "experience" },
|
||||
{ name: "Contact", id: "visit" },
|
||||
];
|
||||
import { Star, Zap, Shield, TrendingUp, Users, Globe, CheckCircle, Sparkles } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
const handleCallClick = () => {
|
||||
window.location.href = "tel:+36302345678";
|
||||
};
|
||||
|
||||
const handleDirectionsClick = () => {
|
||||
window.open(
|
||||
"https://maps.google.com/?q=Vito's+Napoletana+Pizzeria+Szekesfehervár", "_blank"
|
||||
);
|
||||
};
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "story" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Contact", id: "cta" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -45,91 +35,32 @@ export default function Home() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
{/* Sticky Top Navigation */}
|
||||
<div className="fixed top-0 left-0 right-0 z-40 bg-background/80 backdrop-blur-md border-b border-border/10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
|
||||
<div className="text-sm font-semibold">Vito's Napoletana Pizzéria</div>
|
||||
<div className="flex gap-2 sm:gap-4">
|
||||
<button
|
||||
onClick={handleCallClick}
|
||||
className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg bg-primary-cta/10 hover:bg-primary-cta/20 text-primary-cta transition-colors text-sm"
|
||||
aria-label="Call restaurant"
|
||||
>
|
||||
<Phone size={16} />
|
||||
<span className="hidden sm:inline">Call</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDirectionsClick}
|
||||
className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg bg-secondary-cta/10 hover:bg-secondary-cta/20 text-secondary-cta transition-colors text-sm"
|
||||
aria-label="Get directions"
|
||||
>
|
||||
<MapPin size={16} />
|
||||
<span className="hidden sm:inline">Directions</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Action Buttons */}
|
||||
<div className="fixed bottom-6 right-6 z-30 flex flex-col gap-3 sm:bottom-8 sm:right-8">
|
||||
<button
|
||||
onClick={handleCallClick}
|
||||
className="w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-primary-cta text-white shadow-lg hover:shadow-xl hover:scale-110 transition-all flex items-center justify-center"
|
||||
aria-label="Call restaurant"
|
||||
>
|
||||
<Phone size={24} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDirectionsClick}
|
||||
className="w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-accent text-white shadow-lg hover:shadow-xl hover:scale-110 transition-all flex items-center justify-center"
|
||||
aria-label="Get directions"
|
||||
>
|
||||
<MapPin size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Google Rating Widget */}
|
||||
<div className="fixed bottom-6 left-6 z-30 bg-white rounded-lg shadow-lg p-3 sm:p-4 max-w-xs sm:max-w-sm hidden sm:block">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400 text-lg">★</span>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-gray-900">4.8</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mt-1">Based on 247 reviews</p>
|
||||
<p className="text-xs font-medium text-gray-800 mt-2">Vito's Napoletana Pizzéria</p>
|
||||
</div>
|
||||
|
||||
{/* Main Navigation */}
|
||||
<div id="nav" data-section="nav" className="pt-16 sm:pt-20">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
logoText="Pizzeria"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Transform Your Workflow"
|
||||
description="Experience the power of seamless collaboration and productivity tools designed for modern teams"
|
||||
background={{ variant: "plain" }}
|
||||
tag="New Release"
|
||||
tagIcon={Sparkles}
|
||||
title="Authentic Italian Pizza Experience"
|
||||
description="Savor the taste of Italy with our handcrafted pizzas made from the finest ingredients"
|
||||
background={{ variant: "circleGradient" }}
|
||||
tag="Premium Quality"
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Get Started" },
|
||||
{ text: "Learn More" },
|
||||
{ text: "Order Now", href: "pizzas" },
|
||||
{ text: "Menu", href: "experience" }
|
||||
]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 1" },
|
||||
{ id: "2", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 2" },
|
||||
{ id: "3", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 3" },
|
||||
{ id: "4", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 4" },
|
||||
{ id: "5", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 5" },
|
||||
{ id: "6", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Product 6" },
|
||||
{ id: "1", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Margherita Pizza" },
|
||||
{ id: "2", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Pepperoni Pizza" },
|
||||
{ id: "3", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Vegetarian Pizza" },
|
||||
{ id: "4", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Quattro Formaggi" },
|
||||
{ id: "5", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Prosciutto Pizza" },
|
||||
{ id: "6", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Truffle Pizza" }
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
@@ -138,69 +69,67 @@ export default function Home() {
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Join thousands of companies using our platform"
|
||||
names={["Milano Pizzeria", "Naples Kitchen", "Roma Ristorante", "Venice Dining", "Florence Eats"]}
|
||||
title="Trusted by Premium Restaurants"
|
||||
description="Join the finest establishments serving authentic Italian cuisine"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Acme Corp", "TechFlow", "Innovate Inc", "CloudSync"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureBorderGlow
|
||||
features={[
|
||||
{ icon: Zap, title: "Lightning Fast", description: "Optimized for performance with minimal overhead and blazing fast load times" },
|
||||
{ icon: Shield, title: "Secure by Default", description: "Built with security best practices and enterprise-grade encryption" },
|
||||
{ icon: TrendingUp, title: "Scale Effortlessly", description: "Grow your business without worrying about infrastructure" },
|
||||
]}
|
||||
title="Powerful Features with Border Glow"
|
||||
description="Hover over each card to reveal the glowing border effect"
|
||||
title="The Pizza Experience"
|
||||
description="Discover what makes our pizzas extraordinary"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ icon: Star, title: "Premium Ingredients", description: "Imported directly from Italy for authentic flavor" },
|
||||
{ icon: Zap, title: "Wood-Fired Oven", description: "Traditional ovens heated to 900 degrees" },
|
||||
{ icon: Shield, title: "Quality Assured", description: "Every pizza meets our strict quality standards" },
|
||||
{ icon: TrendingUp, title: "Award Winning", description: "Recognized by international pizza competitions" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pizzas" data-section="pizzas">
|
||||
<ProductCardOne
|
||||
products={[
|
||||
{ id: "1", name: "Premium Pizza", price: "$15", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Premium Pizza" },
|
||||
{ id: "2", name: "Deluxe Pizza", price: "$18", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Deluxe Pizza" },
|
||||
{ id: "3", name: "Classic Pizza", price: "$12", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Classic Pizza" },
|
||||
]}
|
||||
title="Featured Products"
|
||||
description="Discover our latest collection of premium products"
|
||||
title="Our Signature Pizzas"
|
||||
description="Hand-tossed pizzas with the finest toppings"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{ id: "1", name: "Margherita", price: "$14.99", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Margherita Pizza" },
|
||||
{ id: "2", name: "Pepperoni", price: "$15.99", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Pepperoni Pizza" },
|
||||
{ id: "3", name: "Quattro Formaggi", price: "$16.99", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Quattro Formaggi Pizza" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="story" data-section="story">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Building the future with" },
|
||||
{ type: "text", content: "innovative solutions" },
|
||||
{ type: "text", content: "Our Story: A Family Tradition Since 1995" },
|
||||
{ type: "image", src: "/placeholders/placeholder1.webp", alt: "Family pizzeria" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "/" },
|
||||
{ text: "Learn More", href: "/" },
|
||||
{ text: "Learn More", href: "experience" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="community" data-section="community">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="This product has completely transformed how we work. The results speak for themselves."
|
||||
testimonial="The best pizza I've ever had. Authentic Italian flavors combined with exceptional service. Highly recommend!"
|
||||
rating={5}
|
||||
author="James Carter, Journalist"
|
||||
author="Marco Rossi"
|
||||
avatars={[
|
||||
{ src: "/placeholders/placeholder1.webp", alt: "User 1" },
|
||||
{ src: "/placeholders/placeholder1.webp", alt: "User 2" },
|
||||
{ src: "/placeholders/placeholder1.webp", alt: "Marco" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -211,76 +140,57 @@ export default function Home() {
|
||||
<div id="atmosphere" data-section="atmosphere">
|
||||
<BlogCardOne
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Design", title: "UX review presentations", excerpt: "How to create compelling presentations that wow your audience", imageSrc: "/placeholders/placeholder1.webp", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder1.webp", date: "20 Jan 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Development", title: "Building scalable systems", excerpt: "Best practices for architecting modern applications", imageSrc: "/placeholders/placeholder1.webp", authorName: "Alex Chen", authorAvatar: "/placeholders/placeholder1.webp", date: "18 Jan 2025"
|
||||
},
|
||||
{ id: "1", category: "Food Culture", title: "The Art of Pizza Making", excerpt: "Learn the techniques that make Italian pizza special", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Pizza making", authorName: "Chef Antonio", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 15, 2025" },
|
||||
{ id: "2", category: "Dining Experience", title: "Pizza Pairing with Wine", excerpt: "Discover perfect wine pairings for every pizza", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Wine pairing", authorName: "Sommelier Luigi", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 10, 2025" }
|
||||
]}
|
||||
title="Latest Articles"
|
||||
description="Stay updated with our latest insights"
|
||||
title="Pizza Stories"
|
||||
description="Explore the culture and traditions of Italian pizza"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<MetricCardTwo
|
||||
metrics={[
|
||||
{ id: "1", value: "98%", description: "Customer Satisfaction Rate" },
|
||||
{ id: "2", value: "50K+", description: "Active Users Worldwide" },
|
||||
]}
|
||||
title="Key Metrics"
|
||||
description="See how we're making a difference"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="By The Numbers"
|
||||
description="Our commitment to excellence"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "1", value: "10K+", description: "Happy customers served annually" },
|
||||
{ id: "2", value: "30+", description: "Years of pizza-making excellence" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<div id="cta" data-section="cta" className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">Ready to Get Started?</h2>
|
||||
<p className="text-base sm:text-lg text-foreground/70 mb-8 sm:mb-10">Join thousands of satisfied customers experiencing the difference. Contact us today or visit our restaurant for authentic Neapolitan pizza.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button
|
||||
onClick={handleCallClick}
|
||||
className="w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold text-sm sm:text-base"
|
||||
>
|
||||
Call Now
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDirectionsClick}
|
||||
className="w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 bg-secondary-cta/20 text-secondary-cta rounded-lg hover:bg-secondary-cta/30 transition-colors font-semibold text-sm sm:text-base border border-secondary-cta/30"
|
||||
>
|
||||
Get Directions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactSplitForm
|
||||
title="Get Special Offers"
|
||||
description="Subscribe to our newsletter for exclusive deals and new pizza launches"
|
||||
inputs={[
|
||||
{ name: "email", type: "email", placeholder: "Your email", required: true },
|
||||
{ name: "name", type: "text", placeholder: "Your name", required: true }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="visit" data-section="visit">
|
||||
<ContactSplitForm
|
||||
title="Get in touch"
|
||||
description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
|
||||
title="Visit Us"
|
||||
description="Find our location and reserve a table for your next pizza night"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "date", type: "date", placeholder: "Date", required: true },
|
||||
{ name: "time", type: "time", placeholder: "Time", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your message", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="/placeholders/placeholder1.webp"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
onSubmit={(data) => console.log("Form submitted:", data)}
|
||||
buttonText="Reserve Table"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -288,27 +198,23 @@ export default function Home() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "experience" },
|
||||
{ label: "Pricing", href: "hero" },
|
||||
],
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "#experience" },
|
||||
{ label: "About", href: "#story" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "story" },
|
||||
{ label: "Blog", href: "atmosphere" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "/" },
|
||||
{ label: "Terms", href: "/" },
|
||||
],
|
||||
},
|
||||
title: "Contact", items: [
|
||||
{ label: "Email", href: "mailto:info@pizzeria.com" },
|
||||
{ label: "Phone", href: "tel:+1234567890" },
|
||||
{ label: "Address", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 | Webild"
|
||||
copyrightText="© 2025 Pizzeria. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user