development/21d5bd4b-d352-4db2-84d9-7d997b7754b8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-07 12:15:18 +02:00
commit 0022c9b360
308 changed files with 62233 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

518
src/app/globals.css Normal file
View File

@@ -0,0 +1,518 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #f8fcff;;
--card: #ffffff;;
--foreground: #00101f;;
--primary-cta: #409fff;;
--secondary-cta: #ffffff;;
--accent: #c7e2fc;;
--background-accent: #9bcfff;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-source-serif-4), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-source-serif-4), sans-serif;
}

1263
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

275
src/app/page.tsx Normal file
View File

@@ -0,0 +1,275 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, ChefHat, Crown, Flame, MapPin, Mail, Phone, Sparkles, Wine } from "lucide-react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterSplit from '@/components/sections/footer/FooterSplit';
export default function SteakhousePage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight"
borderRadius="sharp"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="none"
cardStyle="outline-light"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Steak To Happy"
navItems={[
{ name: "Menu", id: "menu" },
{ name: "About", id: "about" },
{ name: "Experience", id: "experience" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Reserve Now", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Experience Prime Perfection"
description="Savor the finest cuts of beef, expertly grilled to your preference, in an atmosphere of timeless elegance."
tag="Premium Steakhouse"
tagIcon={Flame}
buttons={[
{
text: "Reserve Your Table", href: "contact"
},
{
text: "View Menu", href: "menu"
}
]}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780817109-an1fpejm.jpg", imageAlt: "Premium grilled steak with garnish"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780818745-chfmjsoy.jpg", imageAlt: "Perfectly cooked ribeye steak"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780820400-m26nvjck.jpg", imageAlt: "Gourmet filet mignon plating"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780821747-qu98h7rz.jpg", imageAlt: "Premium wagyu steak presentation"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780823454-dompuace.jpg", imageAlt: "Classic porterhouse steak"
}
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="A Legacy of Excellence"
description="Since opening our doors, Steak To Happy has been dedicated to delivering exceptional steakhouse experiences. We source only the finest premium beef, dry-aged for perfect tenderness, and prepare each cut with meticulous attention to detail."
textboxLayout="default"
useInvertedBackground="invertDefault"
bulletPoints={[
{
title: "Premium Sourcing", description: "Hand-selected prime and wagyu beef, aged 28-45 days for optimal flavor and texture", icon: Award
},
{
title: "Expert Preparation", description: "Our certified grill masters use traditional techniques and modern precision to perfect every steak", icon: ChefHat
},
{
title: "Curated Wines", description: "Extensive wine collection featuring bold reds that complement our signature cuts", icon: Wine
},
{
title: "Timeless Ambiance", description: "Classic steakhouse elegance with warm lighting, leather seating, and refined hospitality"
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780827923-j7ohjz41.jpg"
imageAlt="Elegant steakhouse interior with intimate dining"
imagePosition="right"
/>
</div>
<div id="menu" data-section="menu">
<FeatureCardFourteen
title="Signature Menu Highlights"
description="Discover our most celebrated dishes, crafted with premium ingredients and culinary expertise"
textboxLayout="default"
useInvertedBackground="noInvert"
tag="Featured"
features={[
{
id: "1", title: "The Steakhouse Experience", description: "Our flagship ambiance featuring intimate lighting and sophisticated seating arrangements", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780828937-l4gtwmhh.jpg", imageAlt: "Fine dining steakhouse ambiance"
},
{
id: "2", title: "Wine Pairings & Selection", description: "Expert sommelier recommendations to complement your prime cuts", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780825391-sjwd9z2t.jpg", imageAlt: "Premium wine collection for steakhouse dining"
},
{
id: "3", title: "Premium Side Dishes", description: "Artisanal sides including truffle mac & cheese, twice-baked potatoes, and seasonal vegetables", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780826464-kv1okkxy.jpg", imageAlt: "Gourmet side dish selections"
}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Dining Experiences"
description="Choose from our curated tasting menus and à la carte options"
textboxLayout="default"
useInvertedBackground="invertCard"
animationType="slide-up"
plans={[
{
id: "classic", tag: "The Classic Cut", tagIcon: Flame,
price: "$65", period: "per person", description: "Premium steak, choice of sides, and house wine selection", button: {
text: "Book Now", href: "contact"
},
featuresTitle: "Included:", features: [
"Choice of prime cuts", "Two premium sides", "House wine pairing", "Dessert selection", "Coffee or tea"
]
},
{
id: "premium", tag: "The Premium Experience", tagIcon: Sparkles,
price: "$95", period: "per person", description: "Wagyu selection, sommelier wine pairing, and multi-course tasting", button: {
text: "Reserve Now", href: "contact"
},
featuresTitle: "Included:", features: [
"Premium wagyu cuts", "Three artisanal sides", "Sommelier wine pairing", "Multi-course experience", "Chef's special dessert", "Complimentary digestif"
]
},
{
id: "vip", tag: "The Ultimate Celebration", tagIcon: Crown,
price: "$145", period: "per person", description: "Exclusive cuts, private wine experience, and personalized service", button: {
text: "Schedule Tasting", href: "contact"
},
featuresTitle: "Included:", features: [
"Exclusive cuts & special aged beef", "Four premium sides", "Private wine tasting selection", "Seven-course tasting menu", "Chef's table available", "Personalized sommelier service", "Premium cigar selection"
]
}
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Meet Our Culinary Team"
description="Master craftspeople dedicated to elevating your steakhouse experience"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
team={[
{
id: "1", name: "Chef Marcus Sterling", role: "Executive Chef & Founder", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780831680-ewfp4m5u.jpg"
},
{
id: "2", name: "James Mitchell", role: "Sous Chef, Grill Master", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780833165-1h323ppv.jpg"
},
{
id: "3", name: "Robert Collins", role: "Head Sommelier", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780834452-sk1euqdl.jpg"
},
{
id: "4", name: "Elena Rodriguez", role: "Pastry Chef", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780835380-wsas7ofx.jpg"
}
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="Steak To Happy delivered an unforgettable dining experience. The perfectly grilled steak, impeccable service, and extensive wine selection made our anniversary dinner truly special. We've already booked our next reservation!"
rating={5}
author="Victoria & Michael Thompson"
useInvertedBackground="invertDefault"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780837983-x8aiz065.jpg", alt: "Victoria Thompson"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780839141-0sv57l3v.jpg", alt: "Michael Thompson"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780840406-jwgmqqs8.jpg", alt: "Customer testimonial"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780841610-0coy1g4x.jpg", alt: "Customer testimonial"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780843201-3961su3t.jpg", alt: "Customer testimonial"
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767780844660-i4a0prte.jpg", alt: "Customer testimonial"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactInline
text="Ready to indulge in the perfect steak?"
animationType="background-highlight"
inputPlaceholder="Enter your email"
buttonText="Reserve Your Table"
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterSplit
logoText="Steak To Happy"
title="Experience Premium Steakhouse Excellence"
columns={[
{
title: "Restaurant", items: [
{ label: "Menu", href: "#menu" },
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#team" },
{ label: "Private Events", href: "contact" }
]
},
{
title: "Dining", items: [
{ label: "Reservations", href: "#contact" },
{ label: "Wine List", href: "#experience" },
{ label: "Dress Code", href: "#" },
{ label: "Gift Cards", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
contactItems={[
{
icon: MapPin,
text: "123 Fine Dining Street, Culinary District, NY 10001"
},
{
icon: Phone,
text: "(555) 723-8456"
},
{
icon: Mail,
text: "reservations@steaktohappy.com"
}
]}
/>
</div>
</ThemeProvider>
);
}