MetatroncubeSoftwareSolutions/Antalya-All-Locations
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initialize Antalya restaurant location landing page with responsive grid and custom styling

Browse Source
This commit is contained in:
Alaguraj0361 2026-04-03 18:35:35 +05:30
parent 877731ed1a
commit b44c1e8c76
4 changed files with 109 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/burlington.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
public/images/home-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

23
src/app/globals.css
View File

@ -274,10 +274,27 @@ h1, h2, h3, h4 {
.mt-12 { margin-top: 48px; } .mt-12 { margin-top: 48px; }
.mt-24 { margin-top: 96px; } .mt-24 { margin-top: 96px; }
.footer { .footer-copyright {
margin-top: 128px; margin-top: 80px;
text-align: center; 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 { .decorative-blob {

161
src/app/page.tsx
View File

@ -10,7 +10,7 @@ const locations = [
name: "Burlington", name: "Burlington",
address: "2444 New St, Burlington, ON L7R 1J6", address: "2444 New St, Burlington, ON L7R 1J6",
image: "/images/burlington.png", 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.", 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", name: "Kitchener",
address: "1600 Ottawa St S, Kitchener, ON N2E 3K1", address: "1600 Ottawa St S, Kitchener, ON N2E 3K1",
image: "/images/kitchener.png", 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.", 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() { export default function Home() {
const handleLocationSelect = (url: string) => { const handleLocationSelect = (url: string) => {
if (url !== "#") { if (url && url !== "#") {
window.open(url, "_blank", "noopener,noreferrer"); window.open(url, "_blank");
} else { } else {
alert("Website coming soon!"); alert("Website coming soon!");
} }
@ -68,21 +68,31 @@ export default function Home() {
{/* Background Hero */} {/* Background Hero */}
<div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}> <div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
<Image <Image
src="/images/hero_luxury.webp" src="/images/home-banner.webp"
alt="Luxury Turkish Dining" alt="Luxury Turkish Dining Experience"
fill 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 priority
/> />
<div style={{ <style jsx global>{`
position: 'absolute', @keyframes slowZoom {
inset: 0, from { transform: scale(1); }
background: 'linear-gradient(to bottom, black, transparent, black)' 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={{ <div style={{
position: 'absolute', position: 'absolute',
inset: 0, inset: 0,
opacity: 0.1, opacity: 0.1,
backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")', backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")',
pointerEvents: 'none' pointerEvents: 'none'
}} /> }} />
@ -96,7 +106,7 @@ export default function Home() {
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="hero-section" className="hero-section"
> >
<motion.div <motion.div
initial={{ scale: 0.8 }} initial={{ scale: 0.8 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
transition={{ duration: 0.5, delay: 0.3 }} transition={{ duration: 0.5, delay: 0.3 }}
@ -116,29 +126,31 @@ export default function Home() {
transition={{ duration: 1 }} transition={{ duration: 1 }}
style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }} style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }}
> >
<Image <Image
src="/images/logo.png" src="/images/logo.png"
alt="Antalya Logo" alt="Antalya Logo"
width={160} width={160}
height={80} height={80}
style={{ objectFit: 'contain' }} style={{ objectFit: 'contain' }}
priority
loading="eager"
/> />
</motion.div> </motion.div>
<motion.h1 <motion.h1
variants={container} variants={container}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
style={{ style={{
fontSize: 'clamp(3.5rem, 12vw, 8rem)', fontSize: 'clamp(3.5rem, 12vw, 8rem)',
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: '32px', marginBottom: '32px',
letterSpacing: '0.05em', letterSpacing: '0.05em',
marginTop: '-10px', marginTop: '-10px',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
overflow: 'hidden' overflow: 'hidden'
}} }}
className="grand-text shine-effect" className="grand-text shine-effect"
> >
{titleLetters.map((letter, index) => ( {titleLetters.map((letter, index) => (
@ -151,8 +163,8 @@ export default function Home() {
</motion.span> </motion.span>
))} ))}
</motion.h1> </motion.h1>
<motion.p <motion.p
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 1, duration: 1 }} transition={{ delay: 1, duration: 1 }}
@ -181,66 +193,67 @@ export default function Home() {
fill fill
style={{ objectFit: 'cover' }} style={{ objectFit: 'cover' }}
className="transition-image" className="transition-image"
sizes="(max-width: 768px) 100vw, 50vw"
/> />
<div className="overlay" /> <div className="overlay" />
<div style={{ position: 'absolute', top: '24px', right: '24px', zIndex: 20 }}> <div style={{ position: 'absolute', top: '24px', right: '24px', zIndex: 20 }}>
<motion.div <motion.div
whileHover={{ scale: 1.1, rotate: 5 }} whileHover={{ scale: 1.1, rotate: 5 }}
style={{ style={{
backgroundColor: 'rgba(0,0,0,0.4)', backgroundColor: 'rgba(0,0,0,0.4)',
backdropFilter: 'blur(10px)', backdropFilter: 'blur(10px)',
padding: '12px', padding: '12px',
borderRadius: '9999px', borderRadius: '9999px',
border: '1px solid rgba(210, 136, 57, 0.4)' border: '1px solid rgba(210, 136, 57, 0.4)'
}} }}
> >
<ExternalLink size={20} style={{ color: '#d3cab3' }} /> <ExternalLink size={20} style={{ color: '#d3cab3' }} />
</motion.div> </motion.div>
</div> </div>
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
bottom: '40px', bottom: '40px',
left: '40px', left: '40px',
right: '40px', right: '40px',
zIndex: 20, zIndex: 20,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start' alignItems: 'flex-start'
}}> }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
<Globe size={14} style={{ color: '#d28839' }} /> <Globe size={14} style={{ color: '#d28839' }} />
<span style={{ fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 'bold', color: '#d28839' }}> <span style={{ fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 'bold', color: '#d28839' }}>
Signature Spot Signature Spot
</span> </span>
</div> </div>
<h2 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 'bold', marginBottom: '16px', color: '#d3cab3' }}> <h2 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 'bold', marginBottom: '16px', color: '#d3cab3' }}>
{loc.name} {loc.name}
</h2> </h2>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', color: '#d1d5db', fontSize: '0.875rem' }}> <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', color: '#d1d5db', fontSize: '0.875rem' }}>
<MapPin size={16} style={{ marginTop: '4px', flexShrink: 0, color: '#d28839' }} /> <MapPin size={16} style={{ marginTop: '4px', flexShrink: 0, color: '#d28839' }} />
<span style={{ fontWeight: 300 }}>{loc.address}</span> <span style={{ fontWeight: 300 }}>{loc.address}</span>
</div> </div>
</div> </div>
</div> </div>
<div className="card-content"> <div className="card-content">
<p style={{ fontSize: '1rem', color: 'rgba(196, 156, 92, 0.8)', marginBottom: '32px', fontWeight: 300, lineHeight: 1.6 }}> <p style={{ fontSize: '1rem', color: 'rgba(196, 156, 92, 0.8)', marginBottom: '32px', fontWeight: 300, lineHeight: 1.6 }}>
{loc.description} {loc.description}
</p> </p>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', color: 'white', fontWeight: 500 }}> <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' }}> <span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', fontSize: '0.875rem', borderBottom: '1px solid transparent' }}>
Explore House Explore House
</span> </span>
<div style={{ <div style={{
width: '32px', width: '32px',
height: '32px', height: '32px',
borderRadius: '50%', borderRadius: '50%',
border: '1px solid rgba(255,255,255,0.2)', border: '1px solid rgba(255,255,255,0.2)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}}> }}>
<Globe size={14} color="white" /> <Globe size={14} color="white" />
</div> </div>
@ -249,8 +262,12 @@ export default function Home() {
</motion.div> </motion.div>
))} ))}
</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> </div>
{/* Decorative Elements */} {/* Decorative Elements */}
<div className="decorative-blob blob-1" /> <div className="decorative-blob blob-1" />
<div className="decorative-blob blob-2" /> <div className="decorative-blob blob-2" />