diff --git a/package-lock.json b/package-lock.json index aff288a..44edf37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index e711e91..2bc82f3 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/images/burlington.png b/public/images/burlington.png new file mode 100644 index 0000000..52ef3b7 Binary files /dev/null and b/public/images/burlington.png differ diff --git a/public/images/hero.png b/public/images/hero.png new file mode 100644 index 0000000..88e4cac Binary files /dev/null and b/public/images/hero.png differ diff --git a/public/images/kitchener.png b/public/images/kitchener.png new file mode 100644 index 0000000..1ec1a0f Binary files /dev/null and b/public/images/kitchener.png differ diff --git a/src/app/globals.css b/src/app/globals.css index 4c18fb3..582f1db 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1da6a2f..0334f21 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - + {children} ); diff --git a/src/app/page.tsx b/src/app/page.tsx index 7b947a2..1f35c10 100644 --- a/src/app/page.tsx +++ b/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 ( -
-
+
+ {/* Background Hero */} +
Next.js logo -
-

To get started, edit the page.tsx file.

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. +

+
+ + {/* Content */} +
+ + +
+ + Premium Cuisine +
+ + +

+ Antalya +

+

+ "Taste the Mediterranean Legacy. Select one of our prestigious locations to begin your journey."

+ + +
+ {locations.map((loc, index) => ( + handleLocationSelect(loc.url)} + > +
+ {loc.name} +
+ +
+ + + +
+ +
+
+ + Signature Spot +
+

{loc.name}

+
+ + {loc.address} +
+
+
+ +
+

+ {loc.description} +

+
+ Explore House +
+ +
+
+
+ + ))}
- -
-
+ + +
+

+ Turkish Excellence Since 2010 +

+
+ Home + Private Dining + Catering +
+

+ © {new Date().getFullYear()} ANTALYA RESTAURANT GROUP. ALL RIGHTS RESERVED. +

+ +
+ + {/* Decorative Elements */} +
+
+ ); }