initialize Antalya restaurant location landing page with responsive grid and custom styling
This commit is contained in:
Alaguraj0361
parent
877731ed1a
commit
b44c1e8c76
BIN
public/images/burlington.webp
Normal file
BIN
public/images/burlington.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
public/images/home-banner.webp
Normal file
BIN
public/images/home-banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@ -274,10 +274,27 @@ h1, h2, h3, h4 {
|
||||
.mt-12 { margin-top: 48px; }
|
||||
.mt-24 { margin-top: 96px; }
|
||||
|
||||
.footer {
|
||||
margin-top: 128px;
|
||||
.footer-copyright {
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
padding-bottom: 48px;
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid rgba(210, 136, 57, 0.15);
|
||||
color: rgba(196, 156, 92, 0.6);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.footer-copyright a {
|
||||
color: var(--color-gold);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-copyright a:hover {
|
||||
text-shadow: 0 0 10px rgba(210, 136, 57, 0.4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.decorative-blob {
|
||||
|
||||
161
src/app/page.tsx
161
src/app/page.tsx
@ -10,7 +10,7 @@ const locations = [
|
||||
name: "Burlington",
|
||||
address: "2444 New St, Burlington, ON L7R 1J6",
|
||||
image: "/images/burlington.png",
|
||||
url: "#",
|
||||
url: "https://burlington.antalyarestaurant.ca",
|
||||
description: "Discover the Anatolian fire-kissed flavours in Burlington. Where elegance meets authentic Turkish taste for a truly memorable dining experience.",
|
||||
},
|
||||
{
|
||||
@ -18,7 +18,7 @@ const locations = [
|
||||
name: "Kitchener",
|
||||
address: "1600 Ottawa St S, Kitchener, ON N2E 3K1",
|
||||
image: "/images/kitchener.png",
|
||||
url: "#",
|
||||
url: "https://kitchener.antalyarestaurant.ca",
|
||||
description: "Experience the charcoal-grilled kebabs and signature classics in Kitchener. A refined atmosphere meets time-tested traditional Mediterranean recipes.",
|
||||
},
|
||||
];
|
||||
@ -56,8 +56,8 @@ const child: Variants = {
|
||||
|
||||
export default function Home() {
|
||||
const handleLocationSelect = (url: string) => {
|
||||
if (url !== "#") {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
if (url && url !== "#") {
|
||||
window.open(url, "_blank");
|
||||
} else {
|
||||
alert("Website coming soon!");
|
||||
}
|
||||
@ -68,21 +68,31 @@ export default function Home() {
|
||||
{/* Background Hero */}
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
|
||||
<Image
|
||||
src="/images/hero_luxury.webp"
|
||||
alt="Luxury Turkish Dining"
|
||||
src="/images/home-banner.webp"
|
||||
alt="Luxury Turkish Dining Experience"
|
||||
fill
|
||||
style={{ objectFit: 'cover', opacity: 0.3, transform: 'scale(1.05)' }}
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
opacity: 0.55,
|
||||
animation: 'slowZoom 30s infinite alternate ease-in-out'
|
||||
}}
|
||||
priority
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'linear-gradient(to bottom, black, transparent, black)'
|
||||
<style jsx global>{`
|
||||
@keyframes slowZoom {
|
||||
from { transform: scale(1); }
|
||||
to { transform: scale(1.15); }
|
||||
}
|
||||
`}</style>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 100%)'
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
opacity: 0.1,
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
opacity: 0.1,
|
||||
backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")',
|
||||
pointerEvents: 'none'
|
||||
}} />
|
||||
@ -96,7 +106,7 @@ export default function Home() {
|
||||
transition={{ duration: 0.8 }}
|
||||
className="hero-section"
|
||||
>
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
@ -116,29 +126,31 @@ export default function Home() {
|
||||
transition={{ duration: 1 }}
|
||||
style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<Image
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="Antalya Logo"
|
||||
width={160}
|
||||
height={80}
|
||||
style={{ objectFit: 'contain' }}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
|
||||
<motion.h1
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{
|
||||
fontSize: 'clamp(3.5rem, 12vw, 8rem)',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '32px',
|
||||
letterSpacing: '0.05em',
|
||||
style={{
|
||||
fontSize: 'clamp(3.5rem, 12vw, 8rem)',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '32px',
|
||||
letterSpacing: '0.05em',
|
||||
marginTop: '-10px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
}}
|
||||
className="grand-text shine-effect"
|
||||
>
|
||||
{titleLetters.map((letter, index) => (
|
||||
@ -151,8 +163,8 @@ export default function Home() {
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1, duration: 1 }}
|
||||
@ -181,66 +193,67 @@ export default function Home() {
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
className="transition-image"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
<div className="overlay" />
|
||||
|
||||
|
||||
<div style={{ position: 'absolute', top: '24px', right: '24px', zIndex: 20 }}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '12px',
|
||||
borderRadius: '9999px',
|
||||
border: '1px solid rgba(210, 136, 57, 0.4)'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={20} style={{ color: '#d3cab3' }} />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '12px',
|
||||
borderRadius: '9999px',
|
||||
border: '1px solid rgba(210, 136, 57, 0.4)'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={20} style={{ color: '#d3cab3' }} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '40px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
zIndex: 20,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start'
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '40px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
zIndex: 20,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
|
||||
<Globe size={14} style={{ color: '#d28839' }} />
|
||||
<span style={{ fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 'bold', color: '#d28839' }}>
|
||||
Signature Spot
|
||||
</span>
|
||||
</div>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 'bold', marginBottom: '16px', color: '#d3cab3' }}>
|
||||
{loc.name}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', color: '#d1d5db', fontSize: '0.875rem' }}>
|
||||
<MapPin size={16} style={{ marginTop: '4px', flexShrink: 0, color: '#d28839' }} />
|
||||
<span style={{ fontWeight: 300 }}>{loc.address}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
|
||||
<Globe size={14} style={{ color: '#d28839' }} />
|
||||
<span style={{ fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 'bold', color: '#d28839' }}>
|
||||
Signature Spot
|
||||
</span>
|
||||
</div>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 'bold', marginBottom: '16px', color: '#d3cab3' }}>
|
||||
{loc.name}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', color: '#d1d5db', fontSize: '0.875rem' }}>
|
||||
<MapPin size={16} style={{ marginTop: '4px', flexShrink: 0, color: '#d28839' }} />
|
||||
<span style={{ fontWeight: 300 }}>{loc.address}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-content">
|
||||
<p style={{ fontSize: '1rem', color: 'rgba(196, 156, 92, 0.8)', marginBottom: '32px', fontWeight: 300, lineHeight: 1.6 }}>
|
||||
{loc.description}
|
||||
{loc.description}
|
||||
</p>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', color: 'white', fontWeight: 500 }}>
|
||||
<span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', fontSize: '0.875rem', borderBottom: '1px solid transparent' }}>
|
||||
Explore House
|
||||
</span>
|
||||
<div style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
<div style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<Globe size={14} color="white" />
|
||||
</div>
|
||||
@ -249,8 +262,12 @@ export default function Home() {
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<footer className="footer-copyright">
|
||||
<p>© Copyright 2025 Antalya Restaurant | Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a> All Rights Reserved</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="decorative-blob blob-1" />
|
||||
<div className="decorative-blob blob-2" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user