initialize Antalya locations landing page with responsive grid and animation styles
This commit is contained in:
Alaguraj0361
parent
f0f5d85532
commit
4230a41692
@ -1,14 +1,17 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--color-heading: #d3cab3;
|
||||
--color-button: #d28839;
|
||||
--color-paragraph: #c49c5c;
|
||||
--color-gold: #d28839;
|
||||
--color-gold-light: #f5e6d3;
|
||||
--color-dark: #0a0a0a;
|
||||
--color-dark-accent: #110908;
|
||||
--color-text-light: #f5f5f5;
|
||||
--font-heading: var(--font-playfair), serif;
|
||||
--font-body: var(--font-inter), sans-serif;
|
||||
--font-heading: 'Playfair Display', serif;
|
||||
--font-accent: 'Outfit', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -34,15 +37,16 @@ h3,
|
||||
h4 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--color-heading);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.grand-text {
|
||||
font-family: var(--font-heading);
|
||||
background: linear-gradient(45deg,
|
||||
background: linear-gradient(135deg,
|
||||
#d3cab3 0%,
|
||||
#d28839 25%,
|
||||
#c49c5c 50%,
|
||||
#d28839 75%,
|
||||
#fff 25%,
|
||||
#d28839 50%,
|
||||
#fff 75%,
|
||||
#d3cab3 100%);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
@ -50,20 +54,19 @@ h4 {
|
||||
-webkit-text-fill-color: transparent;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
animation: colorShift 8s linear infinite;
|
||||
animation: colorShift 12s linear infinite;
|
||||
filter: drop-shadow(0 0 10px rgba(210, 136, 57, 0.2));
|
||||
}
|
||||
|
||||
@keyframes colorShift {
|
||||
0% {
|
||||
background-position: 0% center;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.shine-effect {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -73,41 +76,32 @@ h4 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
left: -200%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(210, 136, 57, 0.4) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 100%);
|
||||
transform: skewX(-25deg);
|
||||
animation: shine 6s infinite;
|
||||
animation: shine 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
20% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
0% { left: -200%; }
|
||||
35% { left: 200%; }
|
||||
100% { left: 200%; }
|
||||
}
|
||||
|
||||
|
||||
.glass-card {
|
||||
background: rgba(15, 15, 15, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
background: rgba(15, 15, 15, 0.45);
|
||||
backdrop-filter: blur(25px) saturate(180%);
|
||||
border: 1px solid rgba(210, 136, 57, 0.15);
|
||||
border-radius: 24px;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: 32px;
|
||||
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.glass-card::before {
|
||||
@ -117,17 +111,29 @@ h4 {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(210, 136, 57, 0.5), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
border-color: rgba(210, 136, 57, 0.8);
|
||||
transform: translateY(-20px) scale(1.02);
|
||||
border-color: rgba(210, 136, 57, 0.6);
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.7),
|
||||
0 0 30px rgba(210, 136, 57, 0.25);
|
||||
0 40px 80px rgba(0, 0, 0, 0.6),
|
||||
0 0 40px rgba(210, 136, 57, 0.3);
|
||||
background: rgba(20, 10, 10, 0.6);
|
||||
}
|
||||
|
||||
.card-frame {
|
||||
position: absolute;
|
||||
inset: 16px;
|
||||
border: 1px solid rgba(210, 136, 57, 0.2);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.glass-card:hover .card-frame {
|
||||
@ -135,90 +141,43 @@ h4 {
|
||||
inset: 12px;
|
||||
}
|
||||
|
||||
.card-frame {
|
||||
position: absolute;
|
||||
inset: 24px;
|
||||
border: 1px solid rgba(210, 136, 57, 0.3);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease;
|
||||
border-radius: 12px;
|
||||
.transition-image {
|
||||
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-heading);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
.glass-card:hover .transition-image {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--color-gold);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.4) 50%, transparent 100%);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0,0,0,0.1) 0%,
|
||||
rgba(0,0,0,0.4) 40%,
|
||||
rgba(0,0,0,0.9) 100%);
|
||||
z-index: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-button);
|
||||
color: white;
|
||||
padding: 12px 28px;
|
||||
border-radius: 50px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #e39a4a;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 20px rgba(210, 136, 57, 0.3);
|
||||
}
|
||||
|
||||
/* Layout Utilities */
|
||||
.main-container {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
justify-content: flex-start;
|
||||
padding: 40px 24px;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-container {
|
||||
padding: 48px;
|
||||
padding: 80px 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -226,149 +185,180 @@ h4 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
max-width: 1152px;
|
||||
/* 6xl */
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.locations-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
margin-top: 48px;
|
||||
gap: 48px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 860px) {
|
||||
.locations-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.locations-grid {
|
||||
gap: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Specifics */
|
||||
.card-image-container {
|
||||
position: relative;
|
||||
height: 384px;
|
||||
/* 24rem / 96 */
|
||||
height: 440px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.card-image-container {
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 40px;
|
||||
border-top: 1px solid rgba(176, 124, 75, 0.1);
|
||||
background-color: #410d0a;
|
||||
padding: 48px;
|
||||
border-top: 1px solid rgba(210, 136, 57, 0.1);
|
||||
background: linear-gradient(180deg, rgba(65, 13, 10, 0.8) 0%, rgba(15, 0, 0, 0.95) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Text & Typography */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
.card-content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: radial-gradient(circle at bottom right, rgba(210, 136, 57, 0.1), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.text-gold {
|
||||
.signature-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(210, 136, 57, 0.15);
|
||||
border: 1px solid rgba(210, 136, 57, 0.3);
|
||||
padding: 6px 12px;
|
||||
border-radius: 99px;
|
||||
margin-bottom: 20px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.signature-text {
|
||||
font-family: var(--font-accent);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.explore-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #fff;
|
||||
font-family: var(--font-accent);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.mt-24 {
|
||||
margin-top: 96px;
|
||||
.glass-card:hover .explore-btn {
|
||||
color: var(--color-gold);
|
||||
border-bottom-color: var(--color-gold);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
margin-top: 80px;
|
||||
margin-top: 120px;
|
||||
text-align: center;
|
||||
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;
|
||||
padding: 60px 0;
|
||||
border-top: 1px solid rgba(210, 136, 57, 0.1);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.1em;
|
||||
font-family: var(--font-accent);
|
||||
}
|
||||
|
||||
.footer-copyright a {
|
||||
color: var(--color-gold);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-copyright a:hover {
|
||||
text-shadow: 0 0 10px rgba(210, 136, 57, 0.4);
|
||||
opacity: 0.8;
|
||||
.footer-copyright a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-gold);
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.footer-copyright a:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.noise-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
opacity: 0.04;
|
||||
background-image: url('https://grainy-gradients.vercel.app/noise.svg');
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(210, 136, 57, 0.08) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, rgba(65, 13, 10, 0.15) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.decorative-blob {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
filter: blur(120px);
|
||||
pointer-events: none;
|
||||
background: rgba(210, 136, 57, 0.1);
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
animation: pulse 12s infinite alternate ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1) translate(0, 0); }
|
||||
100% { transform: scale(1.2) translate(30px, 20px); }
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
background: radial-gradient(circle, rgba(210, 136, 57, 0.2), transparent);
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
bottom: -16px;
|
||||
right: -16px;
|
||||
width: 384px;
|
||||
height: 384px;
|
||||
bottom: -15%;
|
||||
right: -10%;
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
background: radial-gradient(circle, rgba(65, 13, 10, 0.3), transparent);
|
||||
}
|
||||
208
src/app/page.tsx
208
src/app/page.tsx
@ -2,7 +2,7 @@
|
||||
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Globe, ExternalLink, Utensils } from "lucide-react";
|
||||
import { MapPin, Globe, ExternalLink, Utensils, ArrowRight } from "lucide-react";
|
||||
|
||||
const locations = [
|
||||
{
|
||||
@ -23,13 +23,11 @@ const locations = [
|
||||
},
|
||||
];
|
||||
|
||||
const titleLetters = "Antalya".split("");
|
||||
|
||||
const container: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: (i = 1) => ({
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
|
||||
transition: { staggerChildren: 0.15, delayChildren: 0.2 * i },
|
||||
}),
|
||||
};
|
||||
|
||||
@ -39,18 +37,13 @@ const child: Variants = {
|
||||
y: 0,
|
||||
transition: {
|
||||
type: "spring",
|
||||
damping: 12,
|
||||
stiffness: 100,
|
||||
damping: 15,
|
||||
stiffness: 80,
|
||||
},
|
||||
},
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
transition: {
|
||||
type: "spring",
|
||||
damping: 12,
|
||||
stiffness: 100,
|
||||
},
|
||||
y: 40,
|
||||
},
|
||||
};
|
||||
|
||||
@ -65,7 +58,10 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<main className="main-container">
|
||||
{/* Background Hero */}
|
||||
{/* Dynamic Environment */}
|
||||
<div className="hero-gradient" />
|
||||
<div className="noise-bg" />
|
||||
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
|
||||
<Image
|
||||
src="/images/home-banner.webp"
|
||||
@ -73,67 +69,56 @@ export default function Home() {
|
||||
fill
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
opacity: 0.55,
|
||||
animation: 'slowZoom 30s infinite alternate ease-in-out'
|
||||
opacity: 0.25,
|
||||
filter: 'grayscale(0.3) contrast(1.1)'
|
||||
}}
|
||||
priority
|
||||
/>
|
||||
<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,
|
||||
backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")',
|
||||
pointerEvents: 'none'
|
||||
background: 'radial-gradient(circle at center, transparent 0%, rgba(10,10,10,0.95) 100%)'
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="decorative-blob blob-1" />
|
||||
<div className="decorative-blob blob-2" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="content-wrapper">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="hero-section"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="flex-center gap-2 mb-6"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex-center gap-4 mb-8"
|
||||
>
|
||||
<div style={{ height: '1px', width: '48px', backgroundColor: '#d28839' }} />
|
||||
<Utensils className="text-gold" size={16} style={{ color: '#d28839' }} />
|
||||
<span style={{ color: '#d28839', letterSpacing: '0.4em', fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase' }}>
|
||||
EXPERIENCE UNFORGETTABLE TURKISH FUSION
|
||||
<div style={{ height: '1px', width: '60px', background: 'linear-gradient(to right, transparent, var(--color-gold))' }} />
|
||||
<Utensils className="text-gold" size={18} />
|
||||
<span style={{ color: 'var(--color-gold)', letterSpacing: '0.5em', fontWeight: 600, fontSize: '0.75rem', textTransform: 'uppercase', fontFamily: 'var(--font-accent)' }}>
|
||||
Legacy of Flavor
|
||||
</span>
|
||||
<div style={{ height: '1px', width: '48px', backgroundColor: '#d28839' }} />
|
||||
<div style={{ height: '1px', width: '60px', background: 'linear-gradient(to left, transparent, var(--color-gold))' }} />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.4 }}
|
||||
style={{ marginBottom: '32px', display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="Antalya Logo"
|
||||
width={160}
|
||||
height={80}
|
||||
style={{ objectFit: 'contain' }}
|
||||
width={180}
|
||||
height={90}
|
||||
style={{ objectFit: 'contain', filter: 'drop-shadow(0 0 20px rgba(210, 136, 57, 0.3))' }}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
@ -142,45 +127,50 @@ export default function Home() {
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{
|
||||
fontSize: 'clamp(3.5rem, 12vw, 8rem)',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 'clamp(3.5rem, 15vw, 10rem)',
|
||||
lineHeight: 1.2,
|
||||
marginBottom: '32px',
|
||||
letterSpacing: '0.05em',
|
||||
marginTop: '-10px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden'
|
||||
gap: '0.02em',
|
||||
paddingBottom: '0.1em'
|
||||
}}
|
||||
className="grand-text shine-effect"
|
||||
>
|
||||
{titleLetters.map((letter, index) => (
|
||||
<motion.span
|
||||
variants={child}
|
||||
key={index}
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
{letter}
|
||||
</motion.span>
|
||||
{"Antalya".split("").map((letter, index) => (
|
||||
<motion.span variants={child} key={index}>{letter}</motion.span>
|
||||
))}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1, duration: 1 }}
|
||||
style={{ color: '#c49c5c', fontSize: 'clamp(1.1rem, 3vw, 1.5rem)', maxWidth: '850px', margin: '0 auto', fontWeight: 300, fontStyle: 'italic', lineHeight: 1.6 }}
|
||||
transition={{ delay: 1, duration: 1.5 }}
|
||||
style={{
|
||||
color: 'var(--color-paragraph)',
|
||||
fontSize: 'clamp(1rem, 2.5vw, 1.35rem)',
|
||||
maxWidth: '700px',
|
||||
margin: '0 auto',
|
||||
fontWeight: 300,
|
||||
lineHeight: 1.8,
|
||||
letterSpacing: '0.02em'
|
||||
}}
|
||||
>
|
||||
"Savour a journey through Turkish culture crafted on the grill. Traditional charcoal-grilled kebabs, handcrafted dishes, and warm hospitality since 2010."
|
||||
Experience the art of authentic Turkish charcoal grilling. A culinary heritage crafted with fire, passion, and Mediterranean excellence since 2010.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<div className="locations-grid">
|
||||
{locations.map((loc, index) => (
|
||||
<motion.div
|
||||
className="locations-grid"
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
custom={1.5}
|
||||
>
|
||||
{locations.map((loc) => (
|
||||
<motion.div
|
||||
key={loc.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 + 0.8 }}
|
||||
variants={child}
|
||||
className="glass-card group"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleLocationSelect(loc.url)}
|
||||
@ -193,84 +183,66 @@ export default function Home() {
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
className="transition-image"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
sizes="(max-width: 860px) 100vw, 50vw"
|
||||
/>
|
||||
<div className="overlay" />
|
||||
|
||||
<div style={{ position: 'absolute', top: '24px', right: '24px', zIndex: 20 }}>
|
||||
<div style={{ position: 'absolute', top: '32px', right: '32px', zIndex: 20 }}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
whileHover={{ scale: 1.1, rotate: 90 }}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
padding: '12px',
|
||||
borderRadius: '9999px',
|
||||
border: '1px solid rgba(210, 136, 57, 0.4)'
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
padding: '14px',
|
||||
borderRadius: '50%',
|
||||
border: '1px solid rgba(210, 136, 57, 0.4)',
|
||||
boxShadow: '0 0 20px rgba(0,0,0,0.4)'
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={20} style={{ color: '#d3cab3' }} />
|
||||
<ExternalLink size={20} style={{ color: 'var(--color-gold)' }} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '40px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
bottom: '48px',
|
||||
left: '48px',
|
||||
right: '48px',
|
||||
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' }}>
|
||||
<h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
|
||||
{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 style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}>
|
||||
<MapPin size={16} style={{ color: 'var(--color-gold)' }} />
|
||||
<span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{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 }}>
|
||||
<p style={{ fontSize: '1.05rem', color: 'rgba(245, 230, 211, 0.7)', marginBottom: '40px', fontWeight: 300, lineHeight: 1.8 }}>
|
||||
{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'
|
||||
}}>
|
||||
<Globe size={14} color="white" />
|
||||
</div>
|
||||
<div className="explore-btn">
|
||||
<span>Visit Restaurant</span>
|
||||
<ArrowRight size={18} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.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>
|
||||
<motion.footer
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="footer-copyright"
|
||||
>
|
||||
<p>© 2025 Antalya Restaurant Group | Handcrafted by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a></p>
|
||||
</motion.footer>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="decorative-blob blob-1" />
|
||||
<div className="decorative-blob blob-2" />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user