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>
+  )
+}
@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }