Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 96a05cf652 | |||
| ad9a94e8e2 | |||
| f6b04b9875 | |||
| 014b0799af | |||
| 60079df56f | |||
| 6f2263b233 | |||
| 9e34b7f066 | |||
| 451f7617ae | |||
| c1db71c509 | |||
| bc08d46941 | |||
| 8c6099e1c5 | |||
| 320239433c |
@@ -1,92 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { Mail, Clock } from "lucide-react";
|
||||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
||||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
||||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
||||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
||||||
import { Coffee, MapPin, Phone } from "lucide-react";
|
|
||||||
|
|
||||||
export default function ContactPage() {
|
export default function ContactPage() {
|
||||||
const navItems = [
|
|
||||||
{ name: "Home", id: "/" },
|
|
||||||
{ name: "About", id: "about" },
|
|
||||||
{ name: "Services", id: "services" },
|
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<div className="flex flex-col items-center justify-center min-h-screen p-8">
|
||||||
defaultButtonVariant="hover-magnetic"
|
<h1 className="text-4xl font-bold mb-4">Contact Page</h1>
|
||||||
defaultTextAnimation="background-highlight"
|
<div className="flex gap-4">
|
||||||
borderRadius="rounded"
|
<Mail className="w-6 h-6" />
|
||||||
contentWidth="small"
|
<Clock className="w-6 h-6" />
|
||||||
sizing="large"
|
|
||||||
background="fluid"
|
|
||||||
cardStyle="gradient-radial"
|
|
||||||
primaryButtonStyle="gradient"
|
|
||||||
secondaryButtonStyle="radial-glow"
|
|
||||||
headingFontWeight="normal"
|
|
||||||
>
|
|
||||||
<div id="nav" data-section="nav">
|
|
||||||
<NavbarStyleApple
|
|
||||||
brandName="Aroma Café 100. Yıl"
|
|
||||||
navItems={navItems}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="contact-hero" data-section="contact-hero">
|
|
||||||
<TextSplitAbout
|
|
||||||
title="Get In Touch"
|
|
||||||
description={[
|
|
||||||
"We'd love to hear from you! Whether you have questions about our menu, want to make a reservation, or are interested in hosting an event at Aroma Café 100. Yıl, we're here to help.",
|
|
||||||
"Located in the heart of İşçi Blokları, Ankara, we welcome your inquiries and look forward to welcoming you to our café.",
|
|
||||||
"Call us directly, send us an email, or fill out the form below. We typically respond to all inquiries within 2 hours during business hours.",
|
|
||||||
]}
|
|
||||||
buttons={[{ text: "View Location", href: "https://maps.app.goo.gl/kpHbpCi5318z68Fu7" }]}
|
|
||||||
showBorder={false}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact-section" data-section="contact-section">
|
|
||||||
<ContactCenter
|
|
||||||
tag="Contact Info"
|
|
||||||
title="Reach Out to Us"
|
|
||||||
description="Subscribe to our newsletter for updates, or contact us directly for reservations and special event inquiries."
|
|
||||||
tagIcon={Coffee}
|
|
||||||
background={{ variant: "rotated-rays-animated" }}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
inputPlaceholder="your@email.com"
|
|
||||||
buttonText="Subscribe"
|
|
||||||
termsText="We respect your privacy. By subscribing, you agree to receive updates about our café, promotions, and special events."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="business-info" data-section="business-info">
|
|
||||||
<TextSplitAbout
|
|
||||||
title="Business Information"
|
|
||||||
description={[
|
|
||||||
"📍 Address: İşçi Blokları, 1524. Sk. No:3, 06530 Çankaya/Ankara, Türkiye",
|
|
||||||
"📞 Phone: +90 536 584 01 68 | WhatsApp: +90 536 584 01 68",
|
|
||||||
"⏰ Hours: Mon-Thu 08:00-22:00 | Fri 08:00-23:00 | Sat 09:00-23:00 | Sun 09:00-22:00",
|
|
||||||
]}
|
|
||||||
buttons={[
|
|
||||||
{ text: "Call Now", href: "tel:+905365840168" },
|
|
||||||
{ text: "WhatsApp", href: "https://wa.me/905365840168" },
|
|
||||||
]}
|
|
||||||
showBorder={true}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterLogoReveal
|
|
||||||
logoText="Aroma Café 100. Yıl"
|
|
||||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
||||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,20 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
(function() {
|
||||||
|
const savedLang = localStorage.getItem('siteLanguage') || 'en';
|
||||||
|
window.siteLanguage = savedLang;
|
||||||
|
document.documentElement.lang = savedLang;
|
||||||
|
})();
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
<body className={dmSans.variable}>
|
<body className={dmSans.variable}>
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
|
|||||||
267
src/app/page.tsx
267
src/app/page.tsx
File diff suppressed because one or more lines are too long
93
src/components/language/LanguageToggle.tsx
Normal file
93
src/components/language/LanguageToggle.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { Globe } from "lucide-react";
|
||||||
|
|
||||||
|
interface LanguageToggleProps {
|
||||||
|
currentLanguage: 'en' | 'tr';
|
||||||
|
onLanguageChange: (lang: 'en' | 'tr') => void;
|
||||||
|
isTransitioning: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LanguageToggle({
|
||||||
|
currentLanguage,
|
||||||
|
onLanguageChange,
|
||||||
|
isTransitioning,
|
||||||
|
}: LanguageToggleProps) {
|
||||||
|
return (
|
||||||
|
<div className="fixed top-6 right-6 z-50 md:top-8 md:right-8">
|
||||||
|
{/* Glassmorphism Background */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-[#d4af37] to-[#3e2723] opacity-70 rounded-full blur-xl"></div>
|
||||||
|
|
||||||
|
{/* Premium Glass Button Container */}
|
||||||
|
<div className="relative px-4 py-3 rounded-full backdrop-blur-2xl bg-white/10 border border-white/20 shadow-2xl hover:shadow-[0_0_40px_rgba(212,175,55,0.5)] transition-all duration-300 hover:border-[#d4af37]/50">
|
||||||
|
{/* Toggle Content */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Language Icon */}
|
||||||
|
<Globe className="w-5 h-5 text-[#d4af37] animate-pulse" />
|
||||||
|
|
||||||
|
{/* Button Container with Smooth Sliding Animation */}
|
||||||
|
<div className="flex items-center gap-2 bg-white/5 rounded-full p-1 border border-white/10">
|
||||||
|
{/* TR Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => onLanguageChange('tr')}
|
||||||
|
className={`px-3 py-1.5 rounded-full font-semibold text-sm transition-all duration-300 ${
|
||||||
|
currentLanguage === 'tr'
|
||||||
|
? 'bg-gradient-to-r from-[#d4af37] to-[#ffd700] text-[#3e2723] shadow-lg shadow-[#d4af37]/50 scale-105'
|
||||||
|
: 'text-white/60 hover:text-white/80 hover:bg-white/5'
|
||||||
|
}`}
|
||||||
|
disabled={isTransitioning}
|
||||||
|
aria-label="Switch to Turkish"
|
||||||
|
>
|
||||||
|
TR
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* EN Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => onLanguageChange('en')}
|
||||||
|
className={`px-3 py-1.5 rounded-full font-semibold text-sm transition-all duration-300 ${
|
||||||
|
currentLanguage === 'en'
|
||||||
|
? 'bg-gradient-to-r from-[#d4af37] to-[#ffd700] text-[#3e2723] shadow-lg shadow-[#d4af37]/50 scale-105'
|
||||||
|
: 'text-white/60 hover:text-white/80 hover:bg-white/5'
|
||||||
|
}`}
|
||||||
|
disabled={isTransitioning}
|
||||||
|
aria-label="Switch to English"
|
||||||
|
>
|
||||||
|
EN
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hover Glow Effect */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-[#d4af37]/0 via-[#d4af37]/0 to-[#ffd700]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl pointer-events-none"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ambient Glow Background */}
|
||||||
|
<style jsx>{`
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in-button {
|
||||||
|
from {
|
||||||
|
transform: translateX(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slide-in {
|
||||||
|
animation: slide-in-button 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user