first commit
This commit is contained in:
Alaguraj0361
parent
8e8d8db199
commit
a1d86c5961
53
package-lock.json
generated
53
package-lock.json
generated
@ -8,6 +8,8 @@
|
||||
"name": "antalya-all-locations",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.38.0",
|
||||
"lucide-react": "^1.7.0",
|
||||
"next": "16.2.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
@ -3297,6 +3299,33 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.38.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
|
||||
"integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.38.0",
|
||||
"motion-utils": "^12.36.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
@ -4267,6 +4296,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
|
||||
"integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
@ -4324,6 +4362,21 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.38.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
|
||||
"integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.36.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.36.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
|
||||
"integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.38.0",
|
||||
"lucide-react": "^1.7.0",
|
||||
"next": "16.2.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
|
||||
BIN
public/images/burlington.png
Normal file
BIN
public/images/burlington.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 912 KiB |
BIN
public/images/hero.png
Normal file
BIN
public/images/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
BIN
public/images/kitchener.png
Normal file
BIN
public/images/kitchener.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@ -1,34 +1,14 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--color-heading: #d3cab3;
|
||||
--color-button: #d28839;
|
||||
--color-paragraph: #c49c5c;
|
||||
--color-gold: #d28839;
|
||||
--color-dark: #0a0a0a;
|
||||
--color-text-light: #f5f5f5;
|
||||
--font-heading: var(--font-playfair), serif;
|
||||
--font-body: var(--font-inter), sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -37,13 +17,73 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-text-light);
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.grand-text {
|
||||
font-family: var(--font-heading);
|
||||
background: linear-gradient(to bottom, #d3cab3, #c49c5c);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(210, 136, 57, 0.2);
|
||||
border-radius: 20px;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-10px);
|
||||
border-color: rgba(210, 136, 57, 0.6);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(210, 136, 57, 0.1);
|
||||
}
|
||||
|
||||
.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%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Playfair_Display, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const playfair = Playfair_Display({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-playfair",
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Antalya Turkish Restaurant | Our Locations",
|
||||
description: "Experience the finest Turkish Mediterranean cuisine. Choose your location: Burlington or Kitchener.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -23,7 +23,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
<html lang="en" className={`${playfair.variable} ${inter.variable}`}>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
189
src/app/page.tsx
189
src/app/page.tsx
@ -1,66 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import styles from "./page.module.css";
|
||||
import { MapPin, Globe, ExternalLink, Utensils } from "lucide-react";
|
||||
|
||||
const locations = [
|
||||
{
|
||||
id: "burlington",
|
||||
name: "Burlington",
|
||||
address: "2444 New St, Burlington, ON L7R 1J6",
|
||||
image: "/images/burlington.png",
|
||||
url: "#", // Placeholder URL
|
||||
description: "Experience the authentic flavors of Turkey in the heart of Burlington. Traditional recipes meet modern elegance.",
|
||||
},
|
||||
{
|
||||
id: "kitchener",
|
||||
name: "Kitchener",
|
||||
address: "1600 Ottawa St S, Kitchener, ON N2E 3K1",
|
||||
image: "/images/kitchener.png",
|
||||
url: "#", // Placeholder URL
|
||||
description: "Our Kitchener location brings you a unique Mediterranean dining experience with a touch of authentic Turkish hospitality.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const handleLocationSelect = (url: string) => {
|
||||
if (url !== "#") {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
} else {
|
||||
alert("Website coming soon!");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<main className={styles.main}>
|
||||
<main className="min-h-screen relative flex flex-col items-center justify-center p-6 md:p-12 overflow-hidden bg-[#0a0a0a]">
|
||||
{/* Background Hero */}
|
||||
<div className="fixed inset-0 z-0 pointer-events-none">
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
src="/images/hero.png"
|
||||
alt="Grand Interior"
|
||||
fill
|
||||
className="object-cover opacity-20 scale-105"
|
||||
priority
|
||||
/>
|
||||
<div className={styles.intro}>
|
||||
<h1>To get started, edit the page.tsx file.</h1>
|
||||
<p>
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 w-full max-w-6xl py-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
<div className="h-[1px] w-12 bg-[#d28839]" />
|
||||
<Utensils className="text-[#d28839]" size={20} />
|
||||
<span className="text-[#d28839] tracking-[0.4em] font-medium text-xs uppercase">Premium Cuisine</span>
|
||||
<div className="h-[1px] w-12 bg-[#d28839]" />
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-5xl md:text-8xl font-bold mb-8 grand-text tracking-tight">
|
||||
Antalya
|
||||
</h1>
|
||||
<p className="text-[#c49c5c] text-xl md:text-2xl max-w-3xl mx-auto font-light italic leading-relaxed">
|
||||
"Taste the Mediterranean Legacy. Select one of our prestigious locations to begin your journey."
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.ctas}>
|
||||
<a
|
||||
className={styles.primary}
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-16 mt-12 px-2 md:px-0">
|
||||
{locations.map((loc, index) => (
|
||||
<motion.div
|
||||
key={loc.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 + 0.5 }}
|
||||
className="glass-card group cursor-pointer"
|
||||
onClick={() => handleLocationSelect(loc.url)}
|
||||
>
|
||||
<div className="relative h-[24rem] md:h-96 overflow-hidden">
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
src={loc.image}
|
||||
alt={loc.name}
|
||||
fill
|
||||
className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className={styles.secondary}
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div className="overlay" />
|
||||
|
||||
<div className="absolute top-6 right-6 z-20">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
className="bg-black/40 backdrop-blur-xl p-3 rounded-full border border-[#d28839]/40"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<ExternalLink size={20} className="text-[#d3cab3]" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-10 left-10 right-10 z-20 flex flex-col items-start translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
|
||||
<div className="flex items-center gap-2 mb-3 text-[#d28839]">
|
||||
<Globe size={14} className="animate-pulse" />
|
||||
<span className="text-[10px] tracking-[0.3em] uppercase font-bold text-[#d28839]">Signature Spot</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-[#d3cab3]">{loc.name}</h2>
|
||||
<div className="flex items-start gap-2 text-gray-300 text-sm mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100">
|
||||
<MapPin size={16} className="mt-1 flex-shrink-0 text-[#d28839]" />
|
||||
<span className="font-light">{loc.address}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-10 border-t border-[#b07c4b]/10">
|
||||
<p className="text-base text-[#c49c5c]/80 mb-8 font-light leading-relaxed">
|
||||
{loc.description}
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-3 text-white font-medium group/btn">
|
||||
<span className="border-b border-transparent group-hover/btn:border-[#d28839] transition-all duration-300 tracking-[0.2em] uppercase text-sm">Explore House</span>
|
||||
<div className="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center group-hover/btn:bg-[#d28839] group-hover/btn:border-[#d28839] transition-all duration-300">
|
||||
<Globe size={14} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.footer
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.5 }}
|
||||
className="mt-32 text-center pb-12"
|
||||
>
|
||||
<div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#b07c4b]/30 to-transparent mb-12" />
|
||||
<p className="uppercase tracking-[0.5em] font-medium text-[10px] text-[#c49c5c] mb-6 opacity-60">
|
||||
Turkish Excellence Since 2010
|
||||
</p>
|
||||
<div className="flex justify-center gap-8 text-[#d3cab3] font-light text-sm tracking-widest uppercase">
|
||||
<a href="#" className="hover:text-[#d28839] transition-colors duration-300">Home</a>
|
||||
<a href="#" className="hover:text-[#d28839] transition-colors duration-300">Private Dining</a>
|
||||
<a href="#" className="hover:text-[#d28839] transition-colors duration-300">Catering</a>
|
||||
</div>
|
||||
<p className="mt-12 text-[10px] text-gray-600 tracking-wider">
|
||||
© {new Date().getFullYear()} ANTALYA RESTAURANT GROUP. ALL RIGHTS RESERVED.
|
||||
</p>
|
||||
</motion.footer>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="fixed -top-4 -left-4 w-64 h-64 bg-[#d28839]/10 rounded-full blur-[100px] pointer-events-none" />
|
||||
<div className="fixed -bottom-4 -right-4 w-96 h-96 bg-[#d28839]/10 rounded-full blur-[120px] pointer-events-none" />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user