first commit

2026-06-17 15:58:02 +03:00
commit 6b15d70955
45 changed files with 11598 additions and 0 deletions
@@ -0,0 +1,55 @@
+import { Link } from '@/i18n/routing'
+import { useTranslations } from 'next-intl'
+
+export function Footer() {
+  const contact = useTranslations('contact')
+  const nav = useTranslations('nav')
+  const f = useTranslations('footer')
+
+  return (
+    <footer className="bg-surface-container-lowest w-full border-t border-outline-variant/20">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-gutter)] px-[var(--spacing-gutter)] py-[var(--spacing-section-padding)] max-w-[var(--spacing-container-max)] mx-auto">
+        <div className="col-span-1 md:col-span-1">
+          <span className="font-headline-sm text-headline-sm text-primary block mb-6">Teras Steakhouse</span>
+          <p className="font-body-md text-body-md text-on-surface-variant">
+            Inspired by Open Fire.<br/>
+          </p>
+        </div>
+        
+        <div>
+          <span className="font-label-caps text-label-caps text-tertiary mb-6 block">Navigation</span>
+          <ul className="space-y-4">
+            <li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/menu">{nav('menu')}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/rezervasyon">{nav('reservation')}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/galeri">{nav('gallery')}</Link></li>
+            <li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/iletisim">{nav('contact')}</Link></li>
+          </ul>
+        </div>
+        
+        <div>
+          <span className="font-label-caps text-label-caps text-tertiary mb-6 block">Contact</span>
+          <ul className="space-y-4">
+            <li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="https://www.instagram.com/terassteakhouse/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
+            <li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="https://www.facebook.com/terassteakhoue/" target="_blank" rel="noopener noreferrer">Facebook</a></li>
+            <li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href={`tel:${contact('phone').replace(/\s/g, '')}`}>{contact('phone')}</a></li>
+            <li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href={`mailto:${contact('email')}`}>{contact('email')}</a></li>
+          </ul>
+        </div>
+        
+        <div>
+          <span className="font-label-caps text-label-caps text-tertiary mb-6 block">Hours</span>
+          <p className="text-on-surface-variant font-body-md text-body-md">
+            17:00 - 00:00<br/>
+          </p>
+        </div>
+      </div>
+      
+      <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] py-8 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center">
+        <p className="font-body-md text-body-md text-on-surface-variant/50">© 2024 Teras Steakhouse. {f('rights')}</p>
+        <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="font-label-caps text-[10px] text-tertiary/60 hover:text-tertiary transition-colors tracking-[0.2em] uppercase mt-4 md:mt-0">
+          {f('created_by')}
+        </a>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,75 @@
+'use client'
+
+import { Link, usePathname, useRouter } from '@/i18n/routing'
+import { useTranslations, useLocale } from 'next-intl'
+import { useState } from 'react'
+
+export function Header() {
+  const t = useTranslations('nav')
+  const locale = useLocale()
+  const pathname = usePathname()
+  const router = useRouter()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleLanguage = () => {
+    const nextLang = locale === 'tr' ? 'en' : 'tr'
+    router.replace(pathname, { locale: nextLang })
+  }
+
+  return (
+    <header className="bg-surface/90 backdrop-blur-md w-full top-0 sticky z-50 border-b border-outline-variant/30 shadow-sm">
+      <nav className="flex justify-between items-center w-full px-[var(--spacing-gutter)] py-4 max-w-[var(--spacing-container-max)] mx-auto">
+        <Link href="/" className="font-headline-md text-headline-md text-on-surface tracking-tighter hover:text-tertiary transition-colors">
+          Teras
+        </Link>
+        
+        <div className="hidden md:flex items-center gap-8">
+          <Link href="/" className={`font-label-caps text-label-caps uppercase ${pathname === '/' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
+            {t('home')}
+          </Link>
+          <Link href="/menu" className={`font-label-caps text-label-caps uppercase ${pathname === '/menu' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
+            {t('menu')}
+          </Link>
+          <Link href="/galeri" className={`font-label-caps text-label-caps uppercase ${pathname === '/galeri' ? 'text-secondary font-bold border-b-2 border-secondary pb-1' : 'text-on-surface-variant hover:text-secondary transition-colors duration-300'}`}>
+            {t('gallery')}
+          </Link>
+          <button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase">
+            {locale}
+          </button>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <Link href="/rezervasyon" className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest hover:scale-95 transition-all duration-200 hidden md:inline-block">
+            {t('reservation')}
+          </Link>
+          
+          {/* Mobile menu button */}
+          <div className="md:hidden flex items-center gap-4">
+            <button onClick={toggleLanguage} className="font-label-caps text-label-caps text-on-surface-variant uppercase">
+              {locale}
+            </button>
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="text-on-surface-variant hover:text-secondary"
+            >
+              <span className="material-symbols-outlined">{isOpen ? 'close' : 'menu'}</span>
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Menu */}
+      {isOpen && (
+        <div className="md:hidden bg-surface border-b border-outline-variant/30">
+          <div className="px-4 pt-2 pb-4 space-y-2 flex flex-col">
+            <Link href="/" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('home')}</Link>
+            <Link href="/menu" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('menu')}</Link>
+            <Link href="/galeri" onClick={() => setIsOpen(false)} className="font-label-caps text-label-caps text-on-surface hover:text-secondary py-2 uppercase">{t('gallery')}</Link>
+            <Link href="/rezervasyon" onClick={() => setIsOpen(false)} className="bg-secondary-container text-on-secondary-container px-6 py-2 font-label-caps text-label-caps uppercase tracking-widest text-center mt-2">{t('reservation')}</Link>
+
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}