htamas1210/MotionWebStudio
1
0
Fork 0
mirror of https://github.com/Motion-Games/MotionWebStudio.git synced 2026-04-21 09:00:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
htom
2025-12-21 20:40:32 +01:00
commit c7f669fc11
54 changed files with 7575 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
pages/demos/SweetCraving.tsx Normal file
View File

@@ -0,0 +1,266 @@
import React, { useEffect, useState } from 'react';
import { ArrowLeft, Instagram, Facebook, MapPin, Phone, Mail, Clock, Heart, Star, ChevronDown } from 'lucide-react';
import { Link } from 'react-router-dom';
export const SweetCraving: React.FC = () => {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 50);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div className="font-serif bg-[#FFF5F5] text-[#5D4037] min-h-screen scroll-smooth">
{/* Return to Main Site Button */}
<div className="fixed bottom-6 right-6 z-[60]">
<Link to="/#references">
<button className="bg-white/90 backdrop-blur-md shadow-lg px-5 py-2.5 rounded-full text-sm font-sans font-medium flex items-center hover:bg-white hover:scale-105 transition-all duration-300 group text-[#E91E63]">
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
Vissza a referenciákhoz
</button>
</Link>
</div>
{/* Dynamic Navigation */}
<nav
className={`fixed top-0 w-full z-40 transition-all duration-500 ${
scrolled
? 'bg-white/90 backdrop-blur-md shadow-lg py-3'
: 'bg-transparent py-6'
}`}
>
<div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
<div className={`text-3xl font-bold text-[#E91E63] italic transition-all duration-300 ${scrolled ? 'scale-90' : 'scale-100'}`}>
SweetCraving
</div>
<div className="hidden md:flex space-x-10 font-medium font-sans text-sm tracking-wide">
{['Kezdőlap', 'Rólunk', 'Kínálat', 'Vélemények'].map((item, i) => (
<a
key={i}
href={`#${item.toLowerCase() === 'kezdőlap' ? 'home' : item === 'Kínálat' ? 'menu' : item === 'Rólunk' ? 'about' : 'contact'}`}
className="hover:text-[#E91E63] relative group transition-colors"
>
{item}
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#E91E63] transition-all group-hover:w-full"></span>
</a>
))}
</div>
<button className="bg-[#E91E63] text-white px-8 py-2.5 rounded-full font-sans font-bold text-sm hover:bg-[#D81B60] transition-all shadow-lg hover:shadow-[#E91E63]/30 hover:-translate-y-0.5 transform">
Rendelés
</button>
</div>
</nav>
{/* Hero Section */}
<section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<img
src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&w=1920&q=80"
alt="Desszertműhely Hero"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-[#FFF5F5] via-white/20 to-transparent"></div>
</div>
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
<div className="animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
<span className="bg-white/80 backdrop-blur-md px-6 py-2 rounded-full text-[#E91E63] text-xs font-bold font-sans tracking-[0.2em] uppercase mb-8 inline-block shadow-sm">
Kézműves Desszertműhely
</span>
</div>
<h1 className="text-6xl md:text-8xl font-bold mb-8 drop-shadow-sm text-gray-900 leading-tight animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
Édes Álmok <br/>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#E91E63] to-[#FF80AB]">
Süteménybe Zárva
</span>
</h1>
<p className="text-xl md:text-2xl text-gray-800/80 max-w-2xl mx-auto mb-12 font-medium leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
Természetes alapanyagokból, szívvel-lélekkel készült desszertek minden alkalomra.
<br className="hidden md:block"/> Mert minden nap megérdemel egy kis kényeztetést.
</p>
<div className="flex flex-col sm:flex-row gap-5 justify-center animate-fade-in-up" style={{ animationDelay: '0.7s' }}>
<a href="#menu" className="bg-[#E91E63] text-white px-10 py-4 rounded-full font-sans font-bold hover:bg-[#D81B60] transition-all shadow-xl shadow-[#E91E63]/30 hover:-translate-y-1 hover:scale-105">
Kínálatunk Megtekintése
</a>
<a href="#about" className="bg-white text-[#5D4037] px-10 py-4 rounded-full font-sans font-bold hover:bg-gray-50 transition-all shadow-lg hover:-translate-y-1 hover:scale-105">
Ismerj meg minket
</a>
</div>
</div>
{/* Scroll Indicator */}
<div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<ChevronDown className="w-8 h-8 text-[#E91E63] opacity-60" />
</div>
</section>
{/* About Section */}
<section id="about" className="py-32 px-6 bg-white overflow-hidden">
<div className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-2 gap-20 items-center">
<div className="relative group">
<div className="absolute -top-6 -left-6 w-full h-full border-4 border-[#FF80AB]/30 rounded-[2rem] transition-transform duration-500 group-hover:translate-x-2 group-hover:translate-y-2"></div>
<img
src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=1000&q=80"
alt="Pék és Cukrászmunka"
className="rounded-[2rem] shadow-2xl relative z-10 transform transition-transform duration-700 hover:scale-[1.02]"
/>
{/* Floating Badge */}
<div className="absolute -bottom-10 -right-10 z-20 bg-white p-6 rounded-2xl shadow-xl animate-bounce-slow hidden lg:block">
<div className="text-center">
<p className="text-4xl font-bold text-[#E91E63]">5+</p>
<p className="text-sm font-sans text-gray-500 uppercase tracking-wider">Év Tapasztalat</p>
</div>
</div>
</div>
<div className="space-y-8">
<h2 className="text-5xl font-bold text-[#5D4037] leading-tight">
A szenvedélyünk <br/>
<span className="text-[#E91E63] italic">a minőség</span>
</h2>
<p className="text-lg leading-relaxed text-[#795548] font-sans">
2018 óta készítjük desszertjeinket Budapest szívében. Hiszünk abban, hogy egy sütemény nemcsak étel, hanem élmény. Ezért kizárólag prémium belga csokoládét, termelői tejet és friss gyümölcsöket használunk.
</p>
<div className="grid gap-6">
{[
{ text: '100% Természetes alapanyagok', icon: Heart },
{ text: 'Glutén- és laktózmentes opciók', icon: Star },
{ text: 'Egyedi tortarendelés 48 órán belül', icon: Clock }
].map((item, i) => (
<div key={i} className="flex items-center gap-4 p-4 rounded-xl bg-[#FFF5F5] border border-[#FF80AB]/20 transition-all hover:shadow-md hover:bg-[#fff0f0]">
<div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-[#E91E63] shadow-sm">
<item.icon className="w-5 h-5" />
</div>
<span className="font-bold text-[#5D4037]">{item.text}</span>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Menu Grid */}
<section id="menu" className="py-32 bg-[#FFF5F5]">
<div className="max-w-6xl mx-auto px-6">
<div className="text-center mb-20">
<h2 className="text-5xl font-bold mb-6 text-[#5D4037]">Legnépszerűbb Finomságok</h2>
<p className="text-[#795548] text-xl max-w-2xl mx-auto font-sans">
Válogasson kedvenc süteményeink közül, melyeket minden reggel frissen készítünk.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
{[
{ title: 'Macaron Válogatás', price: '3 490 Ft', img: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Best Seller' },
{ title: 'Epres Sajttorta', price: '1 290 Ft', img: 'https://images.unsplash.com/photo-1533134242443-d4fd215305ad?auto=format&fit=crop&w=800&q=80', tag: null },
{ title: 'Csokimousse', price: '1 490 Ft', img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&w=800&q=80', tag: 'Új' },
{ title: 'Gyümölcstorta', price: '8 990 Ft', img: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=800&q=80', tag: 'Rendelésre' },
{ title: 'Cupcake Mix', price: '2 990 Ft', img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&w=800&q=80', tag: null },
{ title: 'Vajas Croissant', price: '890 Ft', img: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Friss' }
].map((item, i) => (
<div key={i} className="group bg-white rounded-3xl p-4 shadow-md hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
<div className="overflow-hidden rounded-2xl mb-6 h-64 relative">
<img
src={item.img}
alt={item.title}
className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
/>
{item.tag && (
<div className="absolute top-4 left-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-[#E91E63] uppercase tracking-wider shadow-sm">
{item.tag}
</div>
)}
{/* Quick Add Overlay */}
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<button className="bg-white text-[#E91E63] px-6 py-2 rounded-full font-bold transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
Kosárba
</button>
</div>
</div>
<div className="px-2 pb-2">
<div className="flex justify-between items-start mb-2">
<h3 className="text-2xl font-bold text-[#5D4037] group-hover:text-[#E91E63] transition-colors">{item.title}</h3>
<span className="text-lg font-bold text-[#E91E63] bg-[#FFF5F5] px-3 py-1 rounded-lg">{item.price}</span>
</div>
<p className="text-gray-500 text-sm line-clamp-2">Krémes, ízletes finomság, amely elolvad a szádban.</p>
</div>
</div>
))}
</div>
<div className="mt-16 text-center">
<button className="border-2 border-[#E91E63] text-[#E91E63] px-10 py-3 rounded-full font-bold hover:bg-[#E91E63] hover:text-white transition-all duration-300 uppercase tracking-wider text-sm">
Teljes étlap letöltése
</button>
</div>
</div>
</section>
{/* Testimonials (Simple) */}
<section className="py-24 bg-white">
<div className="max-w-4xl mx-auto px-6 text-center">
<Star className="w-10 h-10 text-yellow-400 fill-current mx-auto mb-6" />
<h2 className="text-4xl font-bold mb-8 text-[#5D4037]">Vendégeink mondták</h2>
<blockquote className="text-2xl italic text-gray-600 font-serif leading-relaxed mb-8">
"A legfinomabb macaron, amit valaha ettem! A pisztáciás egyszerűen mennyei. Mindenkinek csak ajánlani tudom a helyet, igazi ékszerdoboz."
</blockquote>
<cite className="font-bold text-[#E91E63] not-italic">— Kovács Anna, Budapest</cite>
</div>
</section>
{/* Contact & Footer */}
<section id="contact" className="bg-[#5D4037] text-white py-24 px-6 relative overflow-hidden">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5" style={{backgroundImage: 'radial-gradient(circle, #ffffff 2px, transparent 2px)', backgroundSize: '30px 30px'}}></div>
<div className="max-w-4xl mx-auto text-center relative z-10">
<h2 className="text-4xl font-bold mb-16">Látogass el hozzánk</h2>
<div className="grid md:grid-cols-3 gap-12 mb-16">
<div className="flex flex-col items-center group">
<div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
<MapPin className="w-8 h-8" />
</div>
<h4 className="font-bold text-xl mb-3">Címünk</h4>
<p className="text-white/70 leading-relaxed">1052 Budapest,<br/>Petőfi Sándor utca 12.</p>
</div>
<div className="flex flex-col items-center group">
<div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
<Clock className="w-8 h-8" />
</div>
<h4 className="font-bold text-xl mb-3">Nyitvatartás</h4>
<p className="text-white/70 leading-relaxed">H-P: 08:00 - 19:00<br/>Szo-V: 09:00 - 16:00</p>
</div>
<div className="flex flex-col items-center group">
<div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
<Phone className="w-8 h-8" />
</div>
<h4 className="font-bold text-xl mb-3">Kapcsolat</h4>
<p className="text-white/70 leading-relaxed">+36 1 234 5678<br/>hello@sweetcraving.hu</p>
</div>
</div>
<div className="flex justify-center space-x-8">
<a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Facebook className="w-8 h-8" /></a>
<a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Instagram className="w-8 h-8" /></a>
<a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Mail className="w-8 h-8" /></a>
</div>
<div className="mt-16 pt-8 border-t border-white/10 text-white/40 text-sm font-sans">
&copy; 2024 SweetCraving. Ez egy demonstrációs weboldal a MotionWeb referenciáihoz.
</div>
</div>
</section>
</div>
);
};