13 Commits

Author SHA1 Message Date
d077ac7499 Update src/app/page.tsx 2025-12-22 12:53:29 +00:00
dee5d7883a Update src/app/page.tsx 2025-12-22 12:51:40 +00:00
3da121a330 Update src/app/page.tsx 2025-12-22 12:49:46 +00:00
e2cec9940f Update src/app/layout.tsx 2025-12-22 12:49:45 +00:00
4250296300 Update src/app/page.tsx 2025-12-22 12:24:22 +00:00
12755c736b Update src/app/globals.css 2025-12-22 12:24:22 +00:00
533cf9b942 Update src/app/page.tsx 2025-12-22 12:17:26 +00:00
67463bd44e Update src/app/globals.css 2025-12-22 12:17:25 +00:00
6328e94328 Update src/app/page.tsx 2025-12-22 12:10:05 +00:00
fe535f0337 Update src/app/layout.tsx 2025-12-22 12:10:04 +00:00
2ebe7452ed Update src/app/globals.css 2025-12-22 12:10:04 +00:00
1a92c18e0a Update src/app/page.tsx 2025-12-22 11:56:18 +00:00
9a654a87e4 Update src/app/page.tsx 2025-12-22 11:53:28 +00:00
3 changed files with 185 additions and 200 deletions

View File

@@ -4,13 +4,13 @@
/* Base units */
/* --vw is set by ThemeProvider */
--background: #fffcfa;;
--card: #fffaf7;;
--foreground: #220a00;;
--primary-cta: #e8590c;;
--secondary-cta: #ffffff;;
--accent: #ff8c42;;
--background-accent: #e8590c;;
--background: #1a0a0a;
--card: #2a1414;
--foreground: #ffffff;
--primary-cta: #cc0000;
--secondary-cta: #2a1414;
--accent: #ff3333;
--background-accent: #660000;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-work-sans), sans-serif;
font-family: var(--font-inter-tight), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-work-sans), sans-serif;
font-family: var(--font-inter-tight), sans-serif;
}

View File

@@ -1,31 +1,32 @@
import type { Metadata } from "next";
import { Work_Sans } from "next/font/google";
import { Cormorant_Garamond } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const workSans = Work_Sans({
variable: "--font-work-sans",
const cormorantGaramond = Cormorant_Garamond({
variable: "--font-cormorant-garamond",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
export const metadata: Metadata = {
title: "Steak & Fire - Premium Steakhouse Dining",
description: "Experience fine dining at Steak & Fire. Premium aged beef, expertly grilled, paired with exceptional wines. Reserve your table today.",
title: "Steak & Love - Premium Steakhouse Dining",
description: "Experience fine dining at Steak & Love. Premium aged beef, expertly grilled, paired with exceptional wines. Reserve your table today.",
keywords: "steakhouse, fine dining, grilled steak, premium beef, restaurant",
metadataBase: new URL("https://steakandfire.com"),
metadataBase: new URL("https://steakandlove.com"),
alternates: {
canonical: "https://steakandfire.com"
canonical: "https://steakandlove.com"
},
openGraph: {
title: "Steak & Fire - Premium Steakhouse",
title: "Steak & Love - Premium Steakhouse",
description: "Fine dining steakhouse serving premium aged beef and gourmet cuisine",
type: "website",
siteName: "Steak & Fire"
siteName: "Steak & Love"
},
twitter: {
card: "summary_large_image",
title: "Steak & Fire Steakhouse",
title: "Steak & Love Steakhouse",
description: "Premium steakhouse with expertly grilled cuts and fine dining"
}
};
@@ -39,7 +40,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${workSans.variable} antialiased`}
className={`${cormorantGaramond.variable} antialiased`}
>
<Tag />
{children}

View File

@@ -1,14 +1,6 @@
"use client"
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Flame, Instagram, Facebook } from "lucide-react";
export default function LandingPage() {
return (
@@ -18,201 +10,193 @@ export default function LandingPage() {
borderRadius="pill"
contentWidth="large"
sizing="largeSizeExtraLargeSpacing"
background="dotGrid"
background="aurora"
cardStyle="shadow-colored"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Steak & Fire"
navItems={[
{ name: "Menu", id: "menu" },
{ name: "About", id: "about" },
{ name: "Reserve", id: "contact" },
{ name: "Contact", id: "https://example.com/contact" }
]}
/>
<div className="p-8">
<h1 className="text-2xl font-bold">Steak & Love</h1>
<nav className="mt-4">
<ul className="flex space-x-6">
<li><a href="#hero" className="hover:text-gray-600">Home</a></li>
<li><a href="#about" className="hover:text-gray-600">Our History</a></li>
<li><a href="#menu" className="hover:text-gray-600">Menu</a></li>
<li><a href="#testimonials" className="hover:text-gray-600">Reviews</a></li>
<li><a href="#contact" className="hover:text-gray-600">Reserve</a></li>
</ul>
</nav>
</div>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplitImage
logoText="STEAK & FIRE"
description="Premium grilled perfection in every bite. From handpicked cuts to expert preparation, we craft the finest steakhouse experience. Reserve your table for an unforgettable evening."
buttons={[
{ text: "Reserve Now", href: "#contact" },
{ text: "View Menu", href: "#menu" }
]}
layoutOrder="default"
splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402514973-ca2unbho.jpg"
splitImageAlt="Premium grilled steak"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402895294-kbbq7otk.jpg"
imageAlt="Fine dining steakhouse atmosphere"
frameStyle="card"
/>
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-amber-100 to-orange-200">
<div className="text-center px-8">
<h1 className="text-6xl font-bold mb-6 text-gray-800">STEAK & LOVE</h1>
<p className="text-xl mb-8 max-w-2xl mx-auto text-gray-700">
Premium grilled perfection in every bite. From handpicked cuts to expert preparation, we craft the finest steakhouse experience. Reserve your table for an unforgettable evening.
</p>
<div className="flex gap-4 justify-center">
<a href="#contact" className="bg-red-600 text-white px-8 py-3 rounded-full hover:bg-red-700 transition-colors">Reserve Now</a>
<a href="#menu" className="bg-white text-red-600 border-2 border-red-600 px-8 py-3 rounded-full hover:bg-red-50 transition-colors">View Menu</a>
</div>
</div>
</div>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Crafted Excellence" },
{ type: "text", content: "meets timeless tradition at Steak & Fire. We believe in sourcing the finest beef, aging it to perfection, and grilling it with passion." }
]}
buttons={[
{ text: "Our Story", href: "#" }
]}
useInvertedBackground="noInvert"
/>
<div className="py-16 px-8">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-4xl font-bold mb-8 text-gray-800">Our Story</h2>
<p className="text-lg text-gray-600 leading-relaxed">
Crafted Excellence meets timeless tradition at Steak & Love. We believe in sourcing the finest beef, aging it to perfection, and grilling it with passion. Our heritage spans over two decades of dedicated service.
</p>
<div className="mt-8">
<a href="#" className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors">Our History</a>
</div>
</div>
</div>
</div>
<div id="menu" data-section="menu">
<FeatureCardTwenty
images={[
{ id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402516921-vpmy34lv.jpg", imageAlt: "Signature premium steak" },
{ id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402517785-zwa4dhhq.jpg", imageAlt: "Grilled ribs" },
{ id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402518744-cskcaoc8.jpg", imageAlt: "Gourmet side dishes" },
{ id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766403043544-zy98pt2q.jpg", imageAlt: "Wine pairings" }
]}
title="Signature Selections"
description="Experience our carefully curated menu featuring prime cuts aged to perfection, complemented by house specialties and an exceptional wine collection."
tag="Premium Offerings"
tagIcon={Flame}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
<div className="py-16 px-8 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<span className="inline-block bg-red-100 text-red-800 px-4 py-2 rounded-full text-sm font-medium mb-4">Premium Offerings</span>
<h2 className="text-4xl font-bold mb-6 text-gray-800">Signature Selections</h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
Discover our meticulously crafted signature selections, featuring premium cuts aged to absolute perfection. Each dish represents our culinary mastery, blending traditional steakhouse excellence with innovative preparation techniques.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402516921-vpmy34lv.jpg" alt="Signature premium steak" className="w-full h-48 object-cover" />
<div className="p-4">
<h3 className="font-semibold text-gray-800">Premium Cuts</h3>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402517785-zwa4dhhq.jpg" alt="Grilled ribs" className="w-full h-48 object-cover" />
<div className="p-4">
<h3 className="font-semibold text-gray-800">Signature Ribs</h3>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402518744-cskcaoc8.jpg" alt="Gourmet side dishes" className="w-full h-48 object-cover" />
<div className="p-4">
<h3 className="font-semibold text-gray-800">Gourmet Sides</h3>
</div>
</div>
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766403043544-zy98pt2q.jpg" alt="Wine pairings" className="w-full h-48 object-cover" />
<div className="p-4">
<h3 className="font-semibold text-gray-800">Wine Selection</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
testimonials={[
{
id: "1",
name: "Michael Chen, Chef & Food Critic",
date: "Date: 15 December 2024",
title: "The finest steakhouse in the city",
quote: "Steak & Fire delivers an exceptional dining experience. The quality of their beef is outstanding, and the grilling technique is masterful. Every bite reflects their commitment to excellence.",
tag: "Five Stars",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
avatarAlt: "Michael Chen",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402514973-ca2unbho.jpg",
imageAlt: "Perfectly grilled steak"
},
{
id: "2",
name: "Sarah Williams, Restaurant Owner",
date: "Date: 22 December 2024",
title: "Authentic steakhouse perfection",
quote: "I've dined at steakhouses around the world, and Steak & Fire ranks among the very best. The attention to detail in every aspect is remarkable.",
tag: "Highly Recommended",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg",
avatarAlt: "Sarah Williams",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402517785-zwa4dhhq.jpg",
imageAlt: "Grilled ribs"
},
{
id: "3",
name: "David Martinez, Corporate Executive",
date: "Date: 28 December 2024",
title: "Perfect for business dinners",
quote: "The ambiance, service, and food at Steak & Fire create an ideal setting for important business meetings. Our clients were thoroughly impressed.",
tag: "Business Dining",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
avatarAlt: "David Martinez",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402519971-7oehke6v.jpg",
imageAlt: "Upscale dining atmosphere"
},
{
id: "4",
name: "Jessica Thompson, Event Planner",
date: "Date: 10 January 2025",
title: "Exceptional private dining",
quote: "We hosted our company anniversary at Steak & Fire. The private dining room, impeccable service, and outstanding cuisine made it an unforgettable night.",
tag: "Event Hosting",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
avatarAlt: "Jessica Thompson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402516921-vpmy34lv.jpg",
imageAlt: "Signature plated dish"
},
{
id: "5",
name: "Robert Jackson, Sommelier",
date: "Date: 18 January 2025",
title: "Wine selection is superb",
quote: "The wine collection at Steak & Fire is expertly curated. Perfect pairings for every cut, and the staff's knowledge is impressive.",
tag: "Wine Pairing",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399071735-aq7lptqc.jpg",
avatarAlt: "Robert Jackson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766403043842-08p3g3gu.jpg",
imageAlt: "Wine glass"
},
{
id: "6",
name: "Elena Rodriguez, Frequent Diner",
date: "Date: 25 January 2025",
title: "My favorite steakhouse",
quote: "I've been coming to Steak & Fire for special occasions, and they never disappoint. Consistency, quality, and genuine hospitality keep me coming back.",
tag: "Loyal Customer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
avatarAlt: "Elena Rodriguez",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402515950-mo2skfyc.jpg",
imageAlt: "Grilled meat selection"
}
]}
title="What Our Guests Say"
description="Discover why Steak & Fire is the premier destination for discerning diners and special occasions."
textboxLayout="default"
useInvertedBackground="noInvert"
/>
<div className="py-16 px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-4xl font-bold mb-6 text-gray-800">What Our Guests Say</h2>
<p className="text-lg text-gray-600">Discover why Steak & Love is the premier destination for discerning diners and special occasions.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg" alt="Michael Chen" className="w-12 h-12 rounded-full mr-4" />
<div>
<h4 className="font-semibold text-gray-800">Michael Chen</h4>
<p className="text-sm text-gray-600">Chef & Food Critic</p>
</div>
</div>
<p className="text-gray-600 mb-4">"Steak & Love delivers an exceptional dining experience. The quality of their beef is outstanding, and the grilling technique is masterful."</p>
<span className="text-sm bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">Five Stars</span>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg" alt="Sarah Williams" className="w-12 h-12 rounded-full mr-4" />
<div>
<h4 className="font-semibold text-gray-800">Sarah Williams</h4>
<p className="text-sm text-gray-600">Restaurant Owner</p>
</div>
</div>
<p className="text-gray-600 mb-4">"I have dined at steakhouses around the world, and Steak & Love ranks among the very best. The attention to detail is remarkable."</p>
<span className="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full">Highly Recommended</span>
</div>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg" alt="David Martinez" className="w-12 h-12 rounded-full mr-4" />
<div>
<h4 className="font-semibold text-gray-800">David Martinez</h4>
<p className="text-sm text-gray-600">Corporate Executive</p>
</div>
</div>
<p className="text-gray-600 mb-4">"The ambiance, service, and food create an ideal setting for important business meetings. Our clients were thoroughly impressed."</p>
<span className="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">Business Dining</span>
</div>
</div>
</div>
</div>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to experience the finest steakhouse dining? Reserve your table today and join us for an unforgettable evening of premium cuts and exceptional service."
animationType="entrance-slide"
buttons={[
{ text: "Reserve Table", href: "#" },
{ text: "Call Us", href: "tel:+1234567890" }
]}
useInvertedBackground="noInvert"
/>
<div className="py-16 px-8 bg-red-50">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-4xl font-bold mb-6 text-gray-800">Ready to Reserve?</h2>
<p className="text-xl mb-8 text-gray-700">Send message for us for hot reserve for your party</p>
<div className="flex gap-4 justify-center">
<a href="#" className="bg-red-600 text-white px-8 py-3 rounded-full hover:bg-red-700 transition-colors">Hot reserve</a>
<a href="tel:+1234567890" className="bg-white text-red-600 border-2 border-red-600 px-8 py-3 rounded-full hover:bg-red-50 transition-colors">Call Us</a>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterSocial
logoText="Steak & Fire"
columns={[
{
title: "Hours",
items: [
{ label: "Monday - Thursday: 5PM - 11PM", href: "#" },
{ label: "Friday - Saturday: 5PM - 12AM", href: "#" },
{ label: "Sunday: 5PM - 10PM", href: "#" }
]
},
{
title: "Location",
items: [
{ label: "123 Prime Street", href: "#" },
{ label: "Downtown District", href: "#" },
{ label: "(555) 123-4567", href: "tel:+15551234567" }
]
},
{
title: "Dining",
items: [
{ label: "Reservations", href: "#" },
{ label: "Private Events", href: "#" },
{ label: "Gift Cards", href: "#" }
]
}
]}
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
copyrightText="© Steak & Fire Restaurant, 2025. All rights reserved."
/>
<div className="bg-gray-800 text-white py-12 px-8">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-2xl font-bold mb-4 text-yellow-400">Steak & Love</h3>
<p className="text-gray-300">Premium steakhouse experience since 2005</p>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Hours</h4>
<ul className="space-y-2 text-gray-300">
<li>Monday - Thursday: 5PM - 11PM</li>
<li>Friday - Saturday: 5PM - 12AM</li>
<li>Sunday: 5PM - 10PM</li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Location</h4>
<ul className="space-y-2 text-gray-300">
<li>123 Prime Street</li>
<li>Downtown District</li>
<li><a href="tel:+15551234567" className="hover:text-yellow-400">(555) 123-4567</a></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Dining</h4>
<ul className="space-y-2 text-gray-300">
<li><a href="#" className="hover:text-yellow-400">Reservations</a></li>
<li><a href="#" className="hover:text-yellow-400">Private Events</a></li>
<li><a href="#" className="hover:text-yellow-400">Gift Cards</a></li>
</ul>
</div>
</div>
<div className="border-t border-gray-700 mt-8 pt-8 text-center">
<p className="text-yellow-400">© Steak & Love Restaurant, 2025. All rights reserved.</p>
</div>
</div>
</div>
</div>
</ThemeProvider>
);