Compare commits
24 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 311480502c | |||
| 7600ee5604 | |||
| 4d5e77854a | |||
| 5159789b8f | |||
| c0d8cf36b2 | |||
| 6208adbbc2 | |||
| a79591ef32 | |||
| fbf6aa673c | |||
| 9ff3dfc044 | |||
| 70ab01b5d0 | |||
| 92ffcf5042 | |||
| 2de740e522 | |||
| 5c44b1d6f8 | |||
| a219213eab | |||
| f657b6d09c | |||
| 34b26dba66 | |||
| 951741ff2b | |||
| 2688b66f1d | |||
| 3507c88baf | |||
| 7494986d6f | |||
| 35dee43959 | |||
| dcd1886de4 | |||
| 61409d7a6f | |||
| e3553a2750 |
@@ -1,74 +1,39 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import { Poppins } from "next/font/google";
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
const inter = Inter({
|
||||||
variable: "--font-inter",
|
variable: "--font-inter", subsets: ["latin"],
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const poppins = Poppins({
|
|
||||||
variable: "--font-poppins",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "The Ora Cafe - Bhilwara's Premier Rooftop Cafe & Restaurant",
|
title: "The Ora Cafe | Bhilwara's Favorite Rooftop Cafe", description: "Experience The Ora Cafe - Bhilwara's most beloved rooftop dining destination with fusion cuisine, cozy vibes, and stunning views."};
|
||||||
description: "Discover The Ora Cafe in Bhilwara - your favorite rooftop hangout with delicious fusion food, cozy vibes, and Instagram-worthy ambience. Reserve a table today.",
|
|
||||||
keywords: "cafe in Bhilwara, best cafe Bhilwara, rooftop cafe, restaurant Bhilwara, hangout place Bhilwara, The Ora Cafe",
|
|
||||||
metadataBase: new URL("https://theoracafe.com"),
|
|
||||||
alternates: {
|
|
||||||
canonical: "https://theoracafe.com",
|
|
||||||
},
|
|
||||||
openGraph: {
|
|
||||||
title: "The Ora Cafe - Bhilwara's Favorite Rooftop Cafe",
|
|
||||||
description: "Experience premium dining at The Ora Cafe. Rooftop seating, creative fusion food, and the perfect vibe for friends and family.",
|
|
||||||
url: "https://theoracafe.com",
|
|
||||||
siteName: "The Ora Cafe",
|
|
||||||
type: "website",
|
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg",
|
|
||||||
alt: "The Ora Cafe rooftop dining experience",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
twitter: {
|
|
||||||
card: "summary_large_image",
|
|
||||||
title: "The Ora Cafe - Rooftop Dining in Bhilwara",
|
|
||||||
description: "Join us for an unforgettable rooftop dining experience. Book your table now!",
|
|
||||||
images: ["http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"],
|
|
||||||
},
|
|
||||||
robots: {
|
|
||||||
index: true,
|
|
||||||
follow: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<head>
|
||||||
<body
|
<script
|
||||||
className={`${halant.variable} ${inter.variable} ${poppins.variable} antialiased`}
|
dangerouslySetInnerHTML={{
|
||||||
>
|
__html: `
|
||||||
<Tag />
|
(function() {
|
||||||
{children}
|
try {
|
||||||
|
const theme = localStorage.getItem('theme') || 'light';
|
||||||
|
if (theme === 'dark') {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
})();
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body className={`${inter.variable} antialiased`}>
|
||||||
|
{children}
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
@@ -1437,7 +1402,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -2,23 +2,200 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
import { Coffee, Search, X } from "lucide-react";
|
||||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
||||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
interface MenuItem {
|
||||||
import Link from "next/link";
|
id: string;
|
||||||
import {
|
category: string;
|
||||||
Coffee,
|
name: string;
|
||||||
Star,
|
description: string;
|
||||||
Users,
|
price: string;
|
||||||
TrendingUp,
|
image: string;
|
||||||
MapPin,
|
}
|
||||||
Instagram,
|
|
||||||
Facebook,
|
const MENU_CATEGORIES = [
|
||||||
Phone,
|
"Beverages", "Breakfast", "Appetizers", "Burgers", "Pizzas", "Wraps", "Salads", "Mains", "Naans", "Breads", "Desserts", "Shakes", "Smoothies", "Mocktails", "Specials"
|
||||||
} from "lucide-react";
|
];
|
||||||
|
|
||||||
|
const MENU_ITEMS: MenuItem[] = [
|
||||||
|
{
|
||||||
|
id: "1", category: "Beverages", name: "Cold Coffee", description: "Chilled espresso with vanilla and whipped cream", price: "₹150", image: "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", category: "Beverages", name: "Iced Tea", description: "Refreshing homemade iced tea with lemon", price: "₹120", image: "http://img.b2bpic.net/free-photo/glass-iced-tea-with-lemon-mint_1203-7883.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", category: "Beverages", name: "Masala Chai", description: "Traditional Indian chai with aromatic spices", price: "₹80", image: "http://img.b2bpic.net/free-photo/cup-tea-with-spices_1203-4885.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", category: "Beverages", name: "Hot Coffee", description: "Premium espresso with steamed milk", price: "₹130", image: "http://img.b2bpic.net/free-photo/top-view-coffee-with-milk-beans_23-2149255391.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5", category: "Breakfast", name: "Paneer Paratha", description: "Soft paratha stuffed with cottage cheese", price: "₹140", image: "http://img.b2bpic.net/free-photo/indian-flatbread-paratha_1203-4520.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6", category: "Breakfast", name: "Eggs Benedict", description: "Toasted bread with poached eggs and hollandaise", price: "₹180", image: "http://img.b2bpic.net/free-photo/eggs-benedict-toast_1203-4521.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7", category: "Breakfast", name: "French Toast", description: "Crispy bread with maple syrup and berries", price: "₹160", image: "http://img.b2bpic.net/free-photo/french-toast-with-berries_1203-4522.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "8", category: "Breakfast", name: "Chur Chur Naan", description: "Crispy layered naan with butter and spices", price: "₹180", image: "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "9", category: "Appetizers", name: "Paneer Tikka", description: "Marinated cottage cheese grilled to perfection", price: "₹220", image: "http://img.b2bpic.net/free-photo/paneer-tikka-skewers_1203-4523.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "10", category: "Appetizers", name: "Chicken Wings", description: "Spiced chicken wings with tangy sauce", price: "₹240", image: "http://img.b2bpic.net/free-photo/grilled-chicken-wings_1203-4524.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "11", category: "Appetizers", name: "Cigar Rolls", description: "Crispy spring rolls with vegetable filling", price: "₹120", image: "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "12", category: "Appetizers", name: "Garlic Bread", description: "Toasted bread with garlic butter and herbs", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-bread-plate_1203-4525.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "13", category: "Burgers", name: "Classic Burger", description: "Beef patty with cheese, lettuce, and special sauce", price: "₹220", image: "http://img.b2bpic.net/free-photo/delicious-burger-wooden-table_23-2149246644.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "14", category: "Burgers", name: "Paneer Burger", description: "Grilled paneer with tomato and cucumber", price: "₹200", image: "http://img.b2bpic.net/free-photo/paneer-burger_1203-4526.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "15", category: "Burgers", name: "Chicken Burger", description: "Spiced chicken patty with coleslaw", price: "₹210", image: "http://img.b2bpic.net/free-photo/chicken-burger_1203-4527.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "16", category: "Pizzas", name: "Margherita Pizza", description: "Tomato, mozzarella, fresh basil", price: "₹280", image: "http://img.b2bpic.net/free-photo/margherita-pizza-with-basil_1203-4528.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "17", category: "Pizzas", name: "Pepperoni Pizza", description: "Classic pepperoni with mozzarella cheese", price: "₹300", image: "http://img.b2bpic.net/free-photo/pepperoni-pizza_1203-4529.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "18", category: "Pizzas", name: "Paneer Pizza", description: "Cottage cheese with onion and capsicum", price: "₹290", image: "http://img.b2bpic.net/free-photo/paneer-pizza_1203-4530.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "19", category: "Pizzas", name: "Special Pizza", description: "Mixed vegetables and sausage", price: "₹320", image: "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "20", category: "Wraps", name: "Chicken Wrap", description: "Grilled chicken with fresh vegetables", price: "₹180", image: "http://img.b2bpic.net/free-photo/chicken-wrap_1203-4531.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "21", category: "Wraps", name: "Paneer Wrap", description: "Grilled paneer with mint and yogurt", price: "₹160", image: "http://img.b2bpic.net/free-photo/paneer-wrap_1203-4532.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "22", category: "Wraps", name: "Veggie Wrap", description: "Mix of fresh vegetables and hummus", price: "₹140", image: "http://img.b2bpic.net/free-photo/veggie-wrap_1203-4533.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "23", category: "Salads", name: "Caesar Salad", description: "Crisp lettuce with parmesan and croutons", price: "₹200", image: "http://img.b2bpic.net/free-photo/caesar-salad-plate_1203-4534.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "24", category: "Salads", name: "Caprese Salad", description: "Tomato, mozzarella, basil with olive oil", price: "₹220", image: "http://img.b2bpic.net/free-photo/caprese-salad_1203-4535.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "25", category: "Salads", name: "Greek Salad", description: "Feta cheese, olives, cucumbers and tomatoes", price: "₹210", image: "http://img.b2bpic.net/free-photo/greek-salad_1203-4536.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "26", category: "Mains", name: "Butter Chicken", description: "Tender chicken in creamy tomato sauce", price: "₹320", image: "http://img.b2bpic.net/free-photo/butter-chicken-curry_1203-4537.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "27", category: "Mains", name: "Paneer Tikka Masala", description: "Grilled paneer in aromatic tomato cream sauce", price: "₹300", image: "http://img.b2bpic.net/free-photo/paneer-tikka-masala_1203-4538.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "28", category: "Mains", name: "Chicken Biryani", description: "Fragrant basmati rice with spiced chicken", price: "₹340", image: "http://img.b2bpic.net/free-photo/chicken-biryani_1203-4539.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "29", category: "Naans", name: "Plain Naan", description: "Soft tandoori-baked naan bread", price: "₹80", image: "http://img.b2bpic.net/free-photo/plain-naan-bread_1203-4540.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "30", category: "Naans", name: "Garlic Naan", description: "Naan infused with fresh garlic", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-naan_1203-4541.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "31", category: "Naans", name: "Paneer Naan", description: "Soft naan stuffed with spiced paneer", price: "₹140", image: "http://img.b2bpic.net/free-photo/paneer-naan_1203-4542.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "32", category: "Breads", name: "Roti", description: "Traditional Indian whole wheat bread", price: "₹30", image: "http://img.b2bpic.net/free-photo/indian-roti-bread_1203-4543.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "33", category: "Breads", name: "Paratha", description: "Layered flatbread with butter", price: "₹60", image: "http://img.b2bpic.net/free-photo/indian-paratha_1203-4544.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "34", category: "Desserts", name: "Gulab Jamun", description: "Sweet dumplings in sugar syrup", price: "₹120", image: "http://img.b2bpic.net/free-photo/gulab-jamun_1203-4545.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "35", category: "Desserts", name: "Chocolate Cake", description: "Rich chocolate cake with frosting", price: "₹150", image: "http://img.b2bpic.net/free-photo/chocolate-cake-slice_1203-4546.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "36", category: "Desserts", name: "Ice Cream", description: "Vanilla or chocolate ice cream", price: "₹100", image: "http://img.b2bpic.net/free-photo/ice-cream-bowl_1203-4547.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "37", category: "Shakes", name: "Chocolate Shake", description: "Creamy chocolate milkshake", price: "₹140", image: "http://img.b2bpic.net/free-photo/chocolate-milkshake_1203-4548.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "38", category: "Shakes", name: "Vanilla Shake", description: "Smooth vanilla milkshake", price: "₹130", image: "http://img.b2bpic.net/free-photo/vanilla-milkshake_1203-4549.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "39", category: "Shakes", name: "Strawberry Shake", description: "Fresh strawberry milkshake", price: "₹150", image: "http://img.b2bpic.net/free-photo/strawberry-milkshake_1203-4550.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "40", category: "Smoothies", name: "Mango Smoothie", description: "Blended mango with yogurt", price: "₹140", image: "http://img.b2bpic.net/free-photo/mango-smoothie_1203-4551.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "41", category: "Smoothies", name: "Berry Smoothie", description: "Mixed berries with yogurt", price: "₹150", image: "http://img.b2bpic.net/free-photo/berry-smoothie_1203-4552.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "42", category: "Smoothies", name: "Banana Smoothie", description: "Banana with milk and honey", price: "₹120", image: "http://img.b2bpic.net/free-photo/banana-smoothie_1203-4553.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "43", category: "Mocktails", name: "Mojito", description: "Refreshing mint and lime mocktail", price: "₹180", image: "http://img.b2bpic.net/free-photo/mojito-drink_1203-4554.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "44", category: "Mocktails", name: "Virgin Pina Colada", description: "Tropical coconut and pineapple drink", price: "₹190", image: "http://img.b2bpic.net/free-photo/pina-colada_1203-4555.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "45", category: "Mocktails", name: "Lemonade", description: "Fresh homemade lemonade", price: "₹100", image: "http://img.b2bpic.net/free-photo/lemonade-glass_1203-4556.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "46", category: "Specials", name: "Signature Bowl", description: "Chef's special fusion bowl", price: "₹280", image: "http://img.b2bpic.net/free-photo/food-bowl_1203-4557.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "47", category: "Specials", name: "Loaded Nachos", description: "Crispy nachos with cheese and toppings", price: "₹240", image: "http://img.b2bpic.net/free-photo/loaded-nachos_1203-4558.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "48", category: "Specials", name: "Truffle Fries", description: "Crispy fries with truffle oil and parmesan", price: "₹220", image: "http://img.b2bpic.net/free-photo/truffle-fries_1203-4559.jpg"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function MenuPage() {
|
export default function MenuPage() {
|
||||||
|
const [activeCategory, setActiveCategory] = useState("Beverages");
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [filteredItems, setFilteredItems] = useState<MenuItem[]>([]);
|
||||||
|
const contentRef = useRef<HTMLDivElement>(null);
|
||||||
|
const categoryRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const filtered = MENU_ITEMS.filter((item) => {
|
||||||
|
const matchesCategory = activeCategory === "All" || item.category === activeCategory;
|
||||||
|
const matchesSearch =
|
||||||
|
searchQuery === "" ||
|
||||||
|
item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
item.description.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
return matchesCategory && matchesSearch;
|
||||||
|
});
|
||||||
|
setFilteredItems(filtered);
|
||||||
|
}, [activeCategory, searchQuery]);
|
||||||
|
|
||||||
|
// Smooth scroll-spy navigation
|
||||||
|
const handleCategoryClick = (category: string) => {
|
||||||
|
setActiveCategory(category);
|
||||||
|
const element = categoryRefs.current[category];
|
||||||
|
if (element && contentRef.current) {
|
||||||
|
const topOffset = element.offsetTop - contentRef.current.offsetTop;
|
||||||
|
contentRef.current.scrollTo({
|
||||||
|
top: topOffset,
|
||||||
|
behavior: "smooth"});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="elastic-effect"
|
defaultButtonVariant="elastic-effect"
|
||||||
@@ -33,171 +210,215 @@ export default function MenuPage() {
|
|||||||
headingFontWeight="light"
|
headingFontWeight="light"
|
||||||
>
|
>
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav" className="sticky top-0 z-50">
|
||||||
<NavbarLayoutFloatingOverlay
|
<NavbarLayoutFloatingOverlay
|
||||||
brandName="The Ora Cafe"
|
brandName="The Ora Cafe"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "hero" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Menu", id: "popular-dishes" },
|
{ name: "Menu", id: "/menu" },
|
||||||
{ name: "Gallery", id: "gallery" },
|
{ name: "About", id: "/#rooftop-experience" },
|
||||||
{ name: "About", id: "rooftop-experience" },
|
{ name: "Contact", id: "/#contact" },
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
]}
|
]}
|
||||||
button={{
|
button={{
|
||||||
text: "Reserve Table",
|
text: "Reserve Table", href: "/#contact"
|
||||||
href: "#contact",
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Full Menu */}
|
{/* Menu Page */}
|
||||||
<div id="full-menu" data-section="full-menu">
|
<div className="min-h-screen pt-24 pb-20">
|
||||||
<ProductCardOne
|
{/* Header */}
|
||||||
title="Our Complete Menu"
|
<div className="text-center mb-12 px-4">
|
||||||
description="Explore our full selection of delicious dishes and beverages"
|
<h1 className="text-4xl md:text-6xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
|
||||||
tag="All Offerings"
|
Our Menu
|
||||||
products={[
|
</h1>
|
||||||
{
|
<p className="text-lg md:text-xl" style={{ color: "var(--foreground)" }}>
|
||||||
id: "1",
|
Explore our delicious selection of dishes and beverages
|
||||||
name: "Chur Chur Naan",
|
</p>
|
||||||
price: "₹180",
|
</div>
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=2",
|
{/* Search Bar */}
|
||||||
imageAlt: "Crispy Chur Chur Naan",
|
<div className="max-w-2xl mx-auto mb-12 px-4">
|
||||||
},
|
<div className="relative flex items-center" style={{ backgroundColor: "var(--card)", borderRadius: "9999px", padding: "0.75rem 1.5rem" }}>
|
||||||
{
|
<Search className="w-5 h-5 mr-3" style={{ color: "var(--foreground)" }} />
|
||||||
id: "2",
|
<input
|
||||||
name: "Cold Coffee",
|
type="text"
|
||||||
price: "₹150",
|
placeholder="Search menu items..."
|
||||||
imageSrc:
|
value={searchQuery}
|
||||||
"http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=2",
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
imageAlt: "Refreshing Cold Coffee",
|
className="flex-1 bg-transparent outline-none text-lg"
|
||||||
},
|
style={{ color: "var(--foreground)" }}
|
||||||
{
|
/>
|
||||||
id: "3",
|
{searchQuery && (
|
||||||
name: "Pizza",
|
<button
|
||||||
price: "₹250",
|
onClick={() => setSearchQuery("")}
|
||||||
imageSrc:
|
className="ml-2 p-1 hover:opacity-70 transition"
|
||||||
"http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=2",
|
>
|
||||||
imageAlt: "Wood-fired Pizza",
|
<X className="w-5 h-5" style={{ color: "var(--foreground)" }} />
|
||||||
},
|
</button>
|
||||||
{
|
)}
|
||||||
id: "4",
|
</div>
|
||||||
name: "Cigar Rolls",
|
</div>
|
||||||
price: "₹120",
|
|
||||||
imageSrc:
|
{/* Mobile Horizontal Tabs */}
|
||||||
"http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=2",
|
<div className="lg:hidden mb-8 px-4 overflow-x-auto">
|
||||||
imageAlt: "Crispy Cigar Rolls",
|
<div className="flex gap-2 pb-2">
|
||||||
},
|
{MENU_CATEGORIES.map((category) => (
|
||||||
{
|
<button
|
||||||
id: "5",
|
key={category}
|
||||||
name: "Fusion Appetizers",
|
onClick={() => handleCategoryClick(category)}
|
||||||
price: "₹200",
|
className={`px-4 py-2 rounded-full font-semibold whitespace-nowrap transition-all duration-300 ${
|
||||||
imageSrc:
|
activeCategory === category
|
||||||
"http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=2",
|
? "scale-110 shadow-lg"
|
||||||
imageAlt: "Creative fusion appetizers",
|
: "opacity-70 hover:opacity-100"
|
||||||
},
|
}`}
|
||||||
{
|
style={{
|
||||||
id: "6",
|
color: activeCategory === category ? "var(--primary-cta-text)" : "var(--foreground)", backgroundColor: activeCategory === category ? "var(--primary-cta)" : "var(--card)"}}
|
||||||
name: "Dessert Platter",
|
>
|
||||||
price: "₹180",
|
{category}
|
||||||
imageSrc:
|
</button>
|
||||||
"http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=2",
|
))}
|
||||||
imageAlt: "Assorted desserts",
|
</div>
|
||||||
},
|
</div>
|
||||||
]}
|
|
||||||
gridVariant="three-columns-all-equal-width"
|
{/* Main Content */}
|
||||||
animationType="slide-up"
|
<div className="flex flex-col lg:flex-row gap-8 px-4 max-w-7xl mx-auto">
|
||||||
textboxLayout="default"
|
{/* Left Sidebar Navigation - Desktop Only */}
|
||||||
useInvertedBackground={false}
|
<div className="hidden lg:block lg:w-48 flex-shrink-0">
|
||||||
buttons={[
|
<div
|
||||||
{
|
className="sticky top-32 rounded-xl p-4 border-2"
|
||||||
text: "Back to Home",
|
style={{
|
||||||
href: "/",
|
backgroundColor: "var(--card)", borderColor: "var(--background-accent)"}}
|
||||||
},
|
>
|
||||||
]}
|
<h3 className="font-bold text-lg mb-4" style={{ color: "var(--foreground)" }}>
|
||||||
/>
|
Categories
|
||||||
|
</h3>
|
||||||
|
<nav className="space-y-2 max-h-96 overflow-y-auto">
|
||||||
|
{MENU_CATEGORIES.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
onClick={() => handleCategoryClick(category)}
|
||||||
|
className={`w-full text-left px-3 py-2 rounded-lg transition-all duration-300 ${
|
||||||
|
activeCategory === category
|
||||||
|
? "font-bold scale-105 shadow-md"
|
||||||
|
: "hover:opacity-70"
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
color: activeCategory === category ? "var(--primary-cta)" : "var(--foreground)", backgroundColor: activeCategory === category ? "var(--background-accent)" : "transparent"}}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Content Area */}
|
||||||
|
<div className="flex-1" ref={contentRef}>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{filteredItems.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
ref={(el) => {
|
||||||
|
if (el) categoryRefs.current[item.category] = el;
|
||||||
|
}}
|
||||||
|
className="rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105 animate-fade-in-slide-up"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--card)", animationDelay: `${index * 0.1}s`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Image */}
|
||||||
|
<div className="relative overflow-hidden h-48 bg-gradient-to-br from-amber-100 to-orange-100">
|
||||||
|
<img
|
||||||
|
src={item.image}
|
||||||
|
alt={item.name}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<h3
|
||||||
|
className="text-lg font-bold"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</h3>
|
||||||
|
<span
|
||||||
|
className="text-xl font-bold"
|
||||||
|
style={{ color: "var(--primary-cta)" }}
|
||||||
|
>
|
||||||
|
{item.price}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="text-sm line-clamp-2"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="mt-4 w-full py-2 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--primary-cta)", color: "var(--primary-cta-text)"}}
|
||||||
|
>
|
||||||
|
Add to Cart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filteredItems.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Coffee className="w-16 h-16 mx-auto mb-4 opacity-50" />
|
||||||
|
<p
|
||||||
|
className="text-lg"
|
||||||
|
style={{ color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
No items found. Try adjusting your search or category.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Menu Highlights */}
|
<style jsx>{`
|
||||||
<div id="menu-highlights" data-section="menu-highlights">
|
@keyframes fadeInSlideUp {
|
||||||
<MetricCardThree
|
from {
|
||||||
title="Why Our Menu Stands Out"
|
opacity: 0;
|
||||||
description="Discover what makes The Ora Cafe's food special"
|
transform: translateY(20px);
|
||||||
tag="Menu Details"
|
}
|
||||||
metrics={[
|
to {
|
||||||
{
|
opacity: 1;
|
||||||
id: "1",
|
transform: translateY(0);
|
||||||
icon: Coffee,
|
}
|
||||||
title: "Fresh Ingredients",
|
}
|
||||||
value: "Daily",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
icon: Star,
|
|
||||||
title: "Quality Rating",
|
|
||||||
value: "5/5",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
icon: Users,
|
|
||||||
title: "Customer Choice",
|
|
||||||
value: "Top 3",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
icon: TrendingUp,
|
|
||||||
title: "Specialty Items",
|
|
||||||
value: "10+",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
animationType="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact for Orders */}
|
.animate-fade-in-slide-up {
|
||||||
<div id="contact" data-section="contact">
|
animation: fadeInSlideUp 0.6s ease-out forwards;
|
||||||
<ContactCenter
|
opacity: 0;
|
||||||
tag="Place Your Order"
|
}
|
||||||
title="Order Now or Make a Reservation"
|
|
||||||
description="Love our menu? Call us to place an order for pickup or reserve a table to dine in. We also offer special menu items for group gatherings and celebrations."
|
|
||||||
tagIcon={Phone}
|
|
||||||
background={{
|
|
||||||
variant: "rotated-rays-animated-grid",
|
|
||||||
}}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
inputPlaceholder="your.email@example.com"
|
|
||||||
buttonText="Subscribe to Updates"
|
|
||||||
termsText="Call us at +91 94603 51156 to place your order. Visit G38 Rooftop, The Grandstand, Bhilwara for dine-in experience."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
/* Scrollbar styling */
|
||||||
<div id="footer" data-section="footer">
|
nav::-webkit-scrollbar {
|
||||||
<FooterCard
|
width: 6px;
|
||||||
logoText="The Ora Cafe"
|
}
|
||||||
copyrightText="© 2025 The Ora Cafe | G38 Rooftop, Bhilwara, Rajasthan | +91 94603 51156"
|
nav::-webkit-scrollbar-track {
|
||||||
socialLinks={[
|
background: transparent;
|
||||||
{
|
}
|
||||||
icon: Instagram,
|
nav::-webkit-scrollbar-thumb {
|
||||||
href: "https://instagram.com",
|
background: var(--accent);
|
||||||
ariaLabel: "Instagram",
|
border-radius: 3px;
|
||||||
},
|
}
|
||||||
{
|
nav::-webkit-scrollbar-thumb:hover {
|
||||||
icon: Facebook,
|
background: var(--primary-cta);
|
||||||
href: "https://facebook.com",
|
}
|
||||||
ariaLabel: "Facebook",
|
`}</style>
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: MapPin,
|
|
||||||
href: "https://maps.google.com",
|
|
||||||
ariaLabel: "Google Maps",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
408
src/app/page.tsx
408
src/app/page.tsx
@@ -1,388 +1,28 @@
|
|||||||
"use client";
|
export default function Home() {
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
||||||
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
|
||||||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
|
||||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
||||||
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
||||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
||||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
||||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
||||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
||||||
import Link from "next/link";
|
|
||||||
import {
|
|
||||||
Coffee,
|
|
||||||
Star,
|
|
||||||
Users,
|
|
||||||
TrendingUp,
|
|
||||||
MapPin,
|
|
||||||
Instagram,
|
|
||||||
Facebook,
|
|
||||||
Phone,
|
|
||||||
} from "lucide-react";
|
|
||||||
|
|
||||||
export default function HomePage() {
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<main className="min-h-screen w-full">
|
||||||
defaultButtonVariant="elastic-effect"
|
<div id="hero" data-section="hero" className="relative w-full h-screen flex items-center justify-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-slate-900 dark:to-slate-800">
|
||||||
defaultTextAnimation="entrance-slide"
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
borderRadius="rounded"
|
<div className="absolute top-20 right-10 w-72 h-72 bg-orange-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 dark:opacity-10"></div>
|
||||||
contentWidth="smallMedium"
|
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-amber-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 dark:opacity-10"></div>
|
||||||
sizing="mediumSizeLargeTitles"
|
</div>
|
||||||
background="blurBottom"
|
<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
cardStyle="gradient-mesh"
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white mb-6 leading-tight">
|
||||||
primaryButtonStyle="shadow"
|
Welcome to The Ora Cafe
|
||||||
secondaryButtonStyle="radial-glow"
|
</h1>
|
||||||
headingFontWeight="light"
|
<p className="text-lg sm:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||||
>
|
Discover Bhilwara's most beloved rooftop dining destination. Enjoy fusion cuisine, cozy vibes, and stunning views that make every moment unforgettable.
|
||||||
{/* Navbar */}
|
</p>
|
||||||
<div id="nav" data-section="nav">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
<NavbarLayoutFloatingOverlay
|
<a href="#about" className="px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl">
|
||||||
brandName="The Ora Cafe"
|
Explore Now
|
||||||
navItems={[
|
</a>
|
||||||
{ name: "Home", id: "hero" },
|
<a href="#menu" className="px-8 py-4 border-2 border-slate-900 dark:border-white text-slate-900 dark:text-white font-semibold rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-200">
|
||||||
{ name: "Menu", id: "popular-dishes" },
|
View Menu
|
||||||
{ name: "Gallery", id: "gallery" },
|
</a>
|
||||||
{ name: "About", id: "rooftop-experience" },
|
</div>
|
||||||
{ name: "Contact", id: "contact" },
|
</div>
|
||||||
]}
|
|
||||||
button={{
|
|
||||||
text: "Reserve Table",
|
|
||||||
href: "#contact",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
{/* Hero Section */}
|
|
||||||
<div id="hero" data-section="hero">
|
|
||||||
<HeroLogo
|
|
||||||
logoText="The Ora Cafe"
|
|
||||||
description="Bhilwara's Favorite Rooftop Cafe Experience. Enjoy delicious food, cozy vibes, and the perfect place to hang out with friends and family."
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Call Now",
|
|
||||||
href: "tel:+919460351156",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "View Menu",
|
|
||||||
href: "/menu",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"
|
|
||||||
imageAlt="The Ora Cafe rooftop seating with warm evening lighting"
|
|
||||||
showDimOverlay={true}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Why People Love Ora Cafe */}
|
|
||||||
<div id="why-love-ora" data-section="why-love-ora">
|
|
||||||
<FeatureCardNine
|
|
||||||
title="Why People Love The Ora Cafe"
|
|
||||||
description="Discover what makes us Bhilwara's most beloved rooftop destination"
|
|
||||||
tag="Experience"
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: "Rooftop Ambience",
|
|
||||||
description:
|
|
||||||
"Beautiful rooftop seating with warm lighting and panoramic views of Bhilwara's skyline",
|
|
||||||
phoneOne: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/young-woman-using-phone-outside-night-street_1303-17020.jpg",
|
|
||||||
imageAlt: "Rooftop ambience with beautiful lighting",
|
|
||||||
},
|
|
||||||
phoneTwo: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/guy-brought-order-friends-have-meeting-evening-nice-outside-restaurant_146671-14492.jpg",
|
|
||||||
imageAlt: "Rooftop seating at night",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: "Perfect Hangout Spot",
|
|
||||||
description:
|
|
||||||
"Ideal for friends gathering, casual meetups, dates, and family celebrations with cozy seating",
|
|
||||||
phoneOne: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/positive-young-women-smiling-dinner-party_23-2148454161.jpg",
|
|
||||||
imageAlt: "Friends hanging out at cafe",
|
|
||||||
},
|
|
||||||
phoneTwo: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/roommates-sharing-meal-together_23-2149112123.jpg",
|
|
||||||
imageAlt: "Friends dining together",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: "Creative Food",
|
|
||||||
description:
|
|
||||||
"Delicious Indian fusion dishes and cafe favorites crafted by our talented culinary team",
|
|
||||||
phoneOne: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=1",
|
|
||||||
imageAlt: "Creative food plating",
|
|
||||||
},
|
|
||||||
phoneTwo: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=1",
|
|
||||||
imageAlt: "Fusion dishes",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: "Instagram-Worthy",
|
|
||||||
description:
|
|
||||||
"A photogenic cafe loved by social media users with stunning backdrops and beautiful plating",
|
|
||||||
phoneOne: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286401.jpg",
|
|
||||||
imageAlt: "Instagram worthy food photography",
|
|
||||||
},
|
|
||||||
phoneTwo: {
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/close-up-hands-taking-photos-with-phone_23-2149250092.jpg",
|
|
||||||
imageAlt: "Social media food photography",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
showStepNumbers={true}
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Popular Dishes */}
|
|
||||||
<div id="popular-dishes" data-section="popular-dishes">
|
|
||||||
<ProductCardOne
|
|
||||||
title="Popular Dishes"
|
|
||||||
description="Try our signature menu items loved by our customers"
|
|
||||||
tag="Menu Favorites"
|
|
||||||
products={[
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
name: "Chur Chur Naan",
|
|
||||||
price: "₹180",
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=1",
|
|
||||||
imageAlt: "Crispy Chur Chur Naan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Cold Coffee",
|
|
||||||
price: "₹150",
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=1",
|
|
||||||
imageAlt: "Refreshing Cold Coffee",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Pizza",
|
|
||||||
price: "₹250",
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=1",
|
|
||||||
imageAlt: "Wood-fired Pizza",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Cigar Rolls",
|
|
||||||
price: "₹120",
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=1",
|
|
||||||
imageAlt: "Crispy Cigar Rolls",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
gridVariant="four-items-2x2-equal-grid"
|
|
||||||
animationType="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={true}
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "View Full Menu",
|
|
||||||
href: "/menu",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Rooftop Experience */}
|
|
||||||
<div id="rooftop-experience" data-section="rooftop-experience">
|
|
||||||
<TestimonialAboutCard
|
|
||||||
tag="Our Story"
|
|
||||||
title="A Rooftop Experience Like No Other"
|
|
||||||
description="The Ora Cafe Team"
|
|
||||||
subdescription="Located in Bhilwara, Rajasthan"
|
|
||||||
icon={Coffee}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-friends-restaurant_23-2149930136.jpg?_wi=1"
|
|
||||||
imageAlt="The Ora Cafe rooftop dining experience"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Gallery */}
|
|
||||||
<div id="gallery" data-section="gallery">
|
|
||||||
<TestimonialCardOne
|
|
||||||
title="Gallery Moments"
|
|
||||||
description="Capture the essence of The Ora Cafe through our customers' favorite moments"
|
|
||||||
tag="Visual Stories"
|
|
||||||
testimonials={[
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
name: "Food Plating",
|
|
||||||
role: "Culinary Art",
|
|
||||||
company: "The Ora Cafe",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/vertical-view-delicious-tuna-dish-with-glass-wine-cheese-set_8353-10584.jpg?_wi=1",
|
|
||||||
imageAlt: "Gourmet food plating",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Rooftop View",
|
|
||||||
role: "Ambience",
|
|
||||||
company: "Evening Scene",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/middle-age-friends-having-fun_23-2149150932.jpg?_wi=1",
|
|
||||||
imageAlt: "Rooftop view with friends",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Interior Design",
|
|
||||||
role: "Decor",
|
|
||||||
company: "Modern Cafe",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/woman-golden-suit-sits-cafe_8353-301.jpg?_wi=1",
|
|
||||||
imageAlt: "Modern cafe interior",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Coffee & Desserts",
|
|
||||||
role: "Beverages",
|
|
||||||
company: "Specialties",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/top-view-cup-coffee-with-creamy-cake-pillow-formed-cookies-along-with-berries-grey-desk-berry-biscuit-cookie-photo-color_140725-33953.jpg?_wi=1",
|
|
||||||
imageAlt: "Coffee and desserts",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Friends Enjoying",
|
|
||||||
role: "Social Scene",
|
|
||||||
company: "Happy Moments",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg?_wi=1",
|
|
||||||
imageAlt: "Friends enjoying coffee",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "6",
|
|
||||||
name: "Night Lighting",
|
|
||||||
role: "Atmosphere",
|
|
||||||
company: "Evening Glow",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc:
|
|
||||||
"http://img.b2bpic.net/free-photo/antique-ceiling-lamp_1203-804.jpg?_wi=1",
|
|
||||||
imageAlt: "Cafe night lighting",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
gridVariant="bento-grid"
|
|
||||||
animationType="scale-rotate"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Follow on Instagram",
|
|
||||||
href: "https://instagram.com",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Customer Reviews */}
|
|
||||||
<div id="reviews" data-section="reviews">
|
|
||||||
<MetricCardThree
|
|
||||||
title="Customer Love"
|
|
||||||
description="Trusted by thousands of happy visitors"
|
|
||||||
tag="Reviews & Ratings"
|
|
||||||
metrics={[
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
icon: Star,
|
|
||||||
title: "Rating",
|
|
||||||
value: "4.0★",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
icon: Users,
|
|
||||||
title: "Reviews",
|
|
||||||
value: "1,100+",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
icon: TrendingUp,
|
|
||||||
title: "Visitors",
|
|
||||||
value: "1,000+/mo",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
icon: MapPin,
|
|
||||||
title: "Location",
|
|
||||||
value: "Bhilwara",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
animationType="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact & Reservation */}
|
|
||||||
<div id="contact" data-section="contact">
|
|
||||||
<ContactCenter
|
|
||||||
tag="Get in Touch"
|
|
||||||
title="Reserve Your Table Today"
|
|
||||||
description="Join us at The Ora Cafe for an unforgettable dining experience. Call us, visit Google Maps for directions, or fill out the form below to make your reservation."
|
|
||||||
tagIcon={Phone}
|
|
||||||
background={{
|
|
||||||
variant: "rotated-rays-animated-grid",
|
|
||||||
}}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
inputPlaceholder="your.email@example.com"
|
|
||||||
buttonText="Get Updates"
|
|
||||||
termsText="We respect your privacy. Unsubscribe at any time. You can also call us at +91 94603 51156 or visit us at G38 Rooftop, The Grandstand, Bhilwara."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterCard
|
|
||||||
logoText="The Ora Cafe"
|
|
||||||
copyrightText="© 2025 The Ora Cafe | G38 Rooftop, Bhilwara, Rajasthan | +91 94603 51156"
|
|
||||||
socialLinks={[
|
|
||||||
{
|
|
||||||
icon: Instagram,
|
|
||||||
href: "https://instagram.com",
|
|
||||||
ariaLabel: "Instagram",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Facebook,
|
|
||||||
href: "https://facebook.com",
|
|
||||||
ariaLabel: "Facebook",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: MapPin,
|
|
||||||
href: "https://maps.google.com",
|
|
||||||
ariaLabel: "Google Maps",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user