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 {
|
:root {
|
||||||
--color-heading: #d3cab3;
|
--color-heading: #d3cab3;
|
||||||
--color-button: #d28839;
|
--color-button: #d28839;
|
||||||
--color-paragraph: #c49c5c;
|
--color-paragraph: #c49c5c;
|
||||||
--color-gold: #d28839;
|
--color-gold: #d28839;
|
||||||
|
--color-gold-light: #f5e6d3;
|
||||||
--color-dark: #0a0a0a;
|
--color-dark: #0a0a0a;
|
||||||
|
--color-dark-accent: #110908;
|
||||||
--color-text-light: #f5f5f5;
|
--color-text-light: #f5f5f5;
|
||||||
--font-heading: var(--font-playfair), serif;
|
--font-heading: 'Playfair Display', serif;
|
||||||
--font-body: var(--font-inter), sans-serif;
|
--font-accent: 'Outfit', sans-serif;
|
||||||
|
--font-body: 'Inter', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -34,15 +37,16 @@ h3,
|
|||||||
h4 {
|
h4 {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
color: var(--color-heading);
|
color: var(--color-heading);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grand-text {
|
.grand-text {
|
||||||
font-family: var(--font-heading);
|
font-family: var(--font-heading);
|
||||||
background: linear-gradient(45deg,
|
background: linear-gradient(135deg,
|
||||||
#d3cab3 0%,
|
#d3cab3 0%,
|
||||||
#d28839 25%,
|
#fff 25%,
|
||||||
#c49c5c 50%,
|
#d28839 50%,
|
||||||
#d28839 75%,
|
#fff 75%,
|
||||||
#d3cab3 100%);
|
#d3cab3 100%);
|
||||||
background-size: 200% auto;
|
background-size: 200% auto;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@ -50,20 +54,19 @@ h4 {
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
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 {
|
@keyframes colorShift {
|
||||||
0% {
|
0% {
|
||||||
background-position: 0% center;
|
background-position: 0% center;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position: 200% center;
|
background-position: 200% center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.shine-effect {
|
.shine-effect {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -73,41 +76,32 @@ h4 {
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -100%;
|
left: -200%;
|
||||||
width: 50%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(to right,
|
||||||
rgba(255, 255, 255, 0) 0%,
|
transparent 0%,
|
||||||
rgba(210, 136, 57, 0.4) 50%,
|
rgba(255, 255, 255, 0.3) 50%,
|
||||||
rgba(255, 255, 255, 0) 100%);
|
transparent 100%);
|
||||||
transform: skewX(-25deg);
|
transform: skewX(-25deg);
|
||||||
animation: shine 6s infinite;
|
animation: shine 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
0% {
|
0% { left: -200%; }
|
||||||
left: -100%;
|
35% { left: 200%; }
|
||||||
}
|
100% { left: 200%; }
|
||||||
|
|
||||||
20% {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(15, 15, 15, 0.7);
|
background: rgba(15, 15, 15, 0.45);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(25px) saturate(180%);
|
||||||
border: 1px solid rgba(210, 136, 57, 0.15);
|
border: 1px solid rgba(210, 136, 57, 0.15);
|
||||||
border-radius: 24px;
|
border-radius: 32px;
|
||||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
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 {
|
.glass-card::before {
|
||||||
@ -117,17 +111,29 @@ h4 {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 1px;
|
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;
|
z-index: 5;
|
||||||
opacity: 0.5;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass-card:hover {
|
.glass-card:hover {
|
||||||
transform: translateY(-12px) scale(1.02);
|
transform: translateY(-20px) scale(1.02);
|
||||||
border-color: rgba(210, 136, 57, 0.8);
|
border-color: rgba(210, 136, 57, 0.6);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 25px 50px rgba(0, 0, 0, 0.7),
|
0 40px 80px rgba(0, 0, 0, 0.6),
|
||||||
0 0 30px rgba(210, 136, 57, 0.25);
|
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 {
|
.glass-card:hover .card-frame {
|
||||||
@ -135,90 +141,43 @@ h4 {
|
|||||||
inset: 12px;
|
inset: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-frame {
|
.transition-image {
|
||||||
position: absolute;
|
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.glass-card:hover .transition-image {
|
||||||
color: var(--color-heading);
|
transform: scale(1.1);
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 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;
|
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 {
|
.main-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
padding: 24px;
|
padding: 40px 24px;
|
||||||
overflow: hidden;
|
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) {
|
@media (min-width: 768px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
padding: 48px;
|
padding: 80px 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -226,149 +185,180 @@ h4 {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1152px;
|
max-width: 1280px;
|
||||||
/* 6xl */
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section {
|
.hero-section {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 64px;
|
margin-bottom: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.locations-grid {
|
.locations-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 40px;
|
gap: 48px;
|
||||||
margin-top: 48px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 860px) {
|
||||||
.locations-grid {
|
.locations-grid {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.locations-grid {
|
|
||||||
gap: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Card Specifics */
|
|
||||||
.card-image-container {
|
.card-image-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 384px;
|
height: 440px;
|
||||||
/* 24rem / 96 */
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.card-image-container {
|
|
||||||
height: 320px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
padding: 40px;
|
padding: 48px;
|
||||||
border-top: 1px solid rgba(176, 124, 75, 0.1);
|
border-top: 1px solid rgba(210, 136, 57, 0.1);
|
||||||
background-color: #410d0a;
|
background: linear-gradient(180deg, rgba(65, 13, 10, 0.8) 0%, rgba(15, 0, 0, 0.95) 100%);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text & Typography */
|
.card-content::after {
|
||||||
.text-center {
|
content: '';
|
||||||
text-align: center;
|
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);
|
color: var(--color-gold);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-center {
|
.explore-btn {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
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 {
|
.glass-card:hover .explore-btn {
|
||||||
display: flex;
|
color: var(--color-gold);
|
||||||
flex-direction: column;
|
border-bottom-color: var(--color-gold);
|
||||||
}
|
gap: 24px;
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-copyright {
|
.footer-copyright {
|
||||||
margin-top: 80px;
|
margin-top: 120px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 40px 0;
|
padding: 60px 0;
|
||||||
border-top: 1px solid rgba(210, 136, 57, 0.15);
|
border-top: 1px solid rgba(210, 136, 57, 0.1);
|
||||||
color: rgba(196, 156, 92, 0.6);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
font-size: 0.9rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 300;
|
letter-spacing: 0.1em;
|
||||||
letter-spacing: 0.05em;
|
font-family: var(--font-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-copyright a {
|
.footer-copyright a {
|
||||||
color: var(--color-gold);
|
color: var(--color-gold);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-copyright a:hover {
|
.footer-copyright a::after {
|
||||||
text-shadow: 0 0 10px rgba(210, 136, 57, 0.4);
|
content: '';
|
||||||
opacity: 0.8;
|
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 {
|
.decorative-blob {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
filter: blur(100px);
|
filter: blur(120px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: rgba(210, 136, 57, 0.1);
|
|
||||||
z-index: 0;
|
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 {
|
.blob-1 {
|
||||||
top: -16px;
|
top: -10%;
|
||||||
left: -16px;
|
left: -10%;
|
||||||
width: 256px;
|
width: 40vw;
|
||||||
height: 256px;
|
height: 40vw;
|
||||||
|
background: radial-gradient(circle, rgba(210, 136, 57, 0.2), transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blob-2 {
|
.blob-2 {
|
||||||
bottom: -16px;
|
bottom: -15%;
|
||||||
right: -16px;
|
right: -10%;
|
||||||
width: 384px;
|
width: 50vw;
|
||||||
height: 384px;
|
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 { motion, Variants } from "framer-motion";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { MapPin, Globe, ExternalLink, Utensils } from "lucide-react";
|
import { MapPin, Globe, ExternalLink, Utensils, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
const locations = [
|
const locations = [
|
||||||
{
|
{
|
||||||
@ -23,13 +23,11 @@ const locations = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const titleLetters = "Antalya".split("");
|
|
||||||
|
|
||||||
const container: Variants = {
|
const container: Variants = {
|
||||||
hidden: { opacity: 0 },
|
hidden: { opacity: 0 },
|
||||||
visible: (i = 1) => ({
|
visible: (i = 1) => ({
|
||||||
opacity: 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,
|
y: 0,
|
||||||
transition: {
|
transition: {
|
||||||
type: "spring",
|
type: "spring",
|
||||||
damping: 12,
|
damping: 15,
|
||||||
stiffness: 100,
|
stiffness: 80,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
hidden: {
|
hidden: {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
y: 20,
|
y: 40,
|
||||||
transition: {
|
|
||||||
type: "spring",
|
|
||||||
damping: 12,
|
|
||||||
stiffness: 100,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -65,7 +58,10 @@ export default function Home() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="main-container">
|
<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' }}>
|
<div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
|
||||||
<Image
|
<Image
|
||||||
src="/images/home-banner.webp"
|
src="/images/home-banner.webp"
|
||||||
@ -73,67 +69,56 @@ export default function Home() {
|
|||||||
fill
|
fill
|
||||||
style={{
|
style={{
|
||||||
objectFit: 'cover',
|
objectFit: 'cover',
|
||||||
opacity: 0.55,
|
opacity: 0.25,
|
||||||
animation: 'slowZoom 30s infinite alternate ease-in-out'
|
filter: 'grayscale(0.3) contrast(1.1)'
|
||||||
}}
|
}}
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<style jsx global>{`
|
|
||||||
@keyframes slowZoom {
|
|
||||||
from { transform: scale(1); }
|
|
||||||
to { transform: scale(1.15); }
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
inset: 0,
|
inset: 0,
|
||||||
background: 'radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 100%)'
|
background: 'radial-gradient(circle at center, transparent 0%, rgba(10,10,10,0.95) 100%)'
|
||||||
}} />
|
|
||||||
<div style={{
|
|
||||||
position: 'absolute',
|
|
||||||
inset: 0,
|
|
||||||
opacity: 0.1,
|
|
||||||
backgroundImage: 'url("https://grainy-gradients.vercel.app/noise.svg")',
|
|
||||||
pointerEvents: 'none'
|
|
||||||
}} />
|
}} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="decorative-blob blob-1" />
|
||||||
|
<div className="decorative-blob blob-2" />
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="content-wrapper">
|
<div className="content-wrapper">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 50 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="hero-section"
|
className="hero-section"
|
||||||
>
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ scale: 0.8 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ duration: 0.5, delay: 0.3 }}
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
className="flex-center gap-2 mb-6"
|
className="flex-center gap-4 mb-8"
|
||||||
>
|
>
|
||||||
<div style={{ height: '1px', width: '48px', backgroundColor: '#d28839' }} />
|
<div style={{ height: '1px', width: '60px', background: 'linear-gradient(to right, transparent, var(--color-gold))' }} />
|
||||||
<Utensils className="text-gold" size={16} style={{ color: '#d28839' }} />
|
<Utensils className="text-gold" size={18} />
|
||||||
<span style={{ color: '#d28839', letterSpacing: '0.4em', fontWeight: 600, fontSize: '0.8rem', textTransform: 'uppercase' }}>
|
<span style={{ color: 'var(--color-gold)', letterSpacing: '0.5em', fontWeight: 600, fontSize: '0.75rem', textTransform: 'uppercase', fontFamily: 'var(--font-accent)' }}>
|
||||||
EXPERIENCE UNFORGETTABLE TURKISH FUSION
|
Legacy of Flavor
|
||||||
</span>
|
</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>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 1 }}
|
transition={{ duration: 1, delay: 0.4 }}
|
||||||
style={{ marginBottom: '24px', display: 'flex', justifyContent: 'center' }}
|
style={{ marginBottom: '32px', display: 'flex', justifyContent: 'center' }}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/images/logo.png"
|
src="/images/logo.png"
|
||||||
alt="Antalya Logo"
|
alt="Antalya Logo"
|
||||||
width={160}
|
width={180}
|
||||||
height={80}
|
height={90}
|
||||||
style={{ objectFit: 'contain' }}
|
style={{ objectFit: 'contain', filter: 'drop-shadow(0 0 20px rgba(210, 136, 57, 0.3))' }}
|
||||||
priority
|
priority
|
||||||
loading="eager"
|
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
@ -142,45 +127,50 @@ export default function Home() {
|
|||||||
initial="hidden"
|
initial="hidden"
|
||||||
animate="visible"
|
animate="visible"
|
||||||
style={{
|
style={{
|
||||||
fontSize: 'clamp(3.5rem, 12vw, 8rem)',
|
fontSize: 'clamp(3.5rem, 15vw, 10rem)',
|
||||||
fontWeight: 'bold',
|
lineHeight: 1.2,
|
||||||
marginBottom: '32px',
|
marginBottom: '32px',
|
||||||
letterSpacing: '0.05em',
|
|
||||||
marginTop: '-10px',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
overflow: 'hidden'
|
gap: '0.02em',
|
||||||
|
paddingBottom: '0.1em'
|
||||||
}}
|
}}
|
||||||
className="grand-text shine-effect"
|
className="grand-text shine-effect"
|
||||||
>
|
>
|
||||||
{titleLetters.map((letter, index) => (
|
{"Antalya".split("").map((letter, index) => (
|
||||||
<motion.span
|
<motion.span variants={child} key={index}>{letter}</motion.span>
|
||||||
variants={child}
|
|
||||||
key={index}
|
|
||||||
style={{ display: 'inline-block' }}
|
|
||||||
>
|
|
||||||
{letter}
|
|
||||||
</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.5 }}
|
||||||
style={{ color: '#c49c5c', fontSize: 'clamp(1.1rem, 3vw, 1.5rem)', maxWidth: '850px', margin: '0 auto', fontWeight: 300, fontStyle: 'italic', lineHeight: 1.6 }}
|
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.p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="locations-grid">
|
<motion.div
|
||||||
{locations.map((loc, index) => (
|
className="locations-grid"
|
||||||
|
variants={container}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
custom={1.5}
|
||||||
|
>
|
||||||
|
{locations.map((loc) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={loc.id}
|
key={loc.id}
|
||||||
initial={{ opacity: 0, y: 40 }}
|
variants={child}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: index * 0.2 + 0.8 }}
|
|
||||||
className="glass-card group"
|
className="glass-card group"
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
onClick={() => handleLocationSelect(loc.url)}
|
onClick={() => handleLocationSelect(loc.url)}
|
||||||
@ -193,84 +183,66 @@ export default function Home() {
|
|||||||
fill
|
fill
|
||||||
style={{ objectFit: 'cover' }}
|
style={{ objectFit: 'cover' }}
|
||||||
className="transition-image"
|
className="transition-image"
|
||||||
sizes="(max-width: 768px) 100vw, 50vw"
|
sizes="(max-width: 860px) 100vw, 50vw"
|
||||||
/>
|
/>
|
||||||
<div className="overlay" />
|
<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
|
<motion.div
|
||||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
whileHover={{ scale: 1.1, rotate: 90 }}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||||
backdropFilter: 'blur(10px)',
|
backdropFilter: 'blur(12px)',
|
||||||
padding: '12px',
|
padding: '14px',
|
||||||
borderRadius: '9999px',
|
borderRadius: '50%',
|
||||||
border: '1px solid rgba(210, 136, 57, 0.4)'
|
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>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: '40px',
|
bottom: '48px',
|
||||||
left: '40px',
|
left: '48px',
|
||||||
right: '40px',
|
right: '48px',
|
||||||
zIndex: 20,
|
zIndex: 20,
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-start'
|
|
||||||
}}>
|
}}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
|
<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)' }}>
|
||||||
<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}
|
{loc.name}
|
||||||
</h2>
|
</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' }} />
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}>
|
||||||
<span style={{ fontWeight: 300 }}>{loc.address}</span>
|
<MapPin size={16} style={{ color: 'var(--color-gold)' }} />
|
||||||
|
<span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{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: '1.05rem', color: 'rgba(245, 230, 211, 0.7)', marginBottom: '40px', fontWeight: 300, lineHeight: 1.8 }}>
|
||||||
{loc.description}
|
{loc.description}
|
||||||
</p>
|
</p>
|
||||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', color: 'white', fontWeight: 500 }}>
|
<div className="explore-btn">
|
||||||
<span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', fontSize: '0.875rem', borderBottom: '1px solid transparent' }}>
|
<span>Visit Restaurant</span>
|
||||||
Explore House
|
<ArrowRight size={18} />
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</motion.div>
|
||||||
|
|
||||||
<footer className="footer-copyright">
|
<motion.footer
|
||||||
<p>© Copyright 2025 Antalya Restaurant | Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a> All Rights Reserved</p>
|
initial={{ opacity: 0 }}
|
||||||
</footer>
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Decorative Elements */}
|
|
||||||
<div className="decorative-blob blob-1" />
|
|
||||||
<div className="decorative-blob blob-2" />
|
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user