|
|
|
@@ -1,5 +1,4 @@
|
|
|
|
'use client';
|
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
|
|
@@ -7,102 +6,81 @@ import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
|
|
import { Shield, Facebook, Instagram, Twitter } from 'lucide-react';
|
|
|
|
import { Shield, Users } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
|
|
export default function Page() {
|
|
|
|
export default function Page() {
|
|
|
|
const navItems = [{ name: "Home", id: "/" }];
|
|
|
|
const navItems = [{ name: "Home", id: "/" }];
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ThemeProvider
|
|
|
|
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
|
|
|
defaultButtonVariant="text-stagger"
|
|
|
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
|
|
|
borderRadius="rounded"
|
|
|
|
|
|
|
|
contentWidth="medium"
|
|
|
|
|
|
|
|
sizing="medium"
|
|
|
|
|
|
|
|
background="circleGradient"
|
|
|
|
|
|
|
|
cardStyle="glass-elevated"
|
|
|
|
|
|
|
|
primaryButtonStyle="gradient"
|
|
|
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
|
|
|
headingFontWeight="normal"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<NavbarStyleCentered navItems={navItems} />
|
|
|
|
<NavbarStyleCentered navItems={navItems} brandName="TechCorp" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<HeroLogo
|
|
|
|
<HeroLogo
|
|
|
|
logoText="Oyster Bay"
|
|
|
|
logoText="Innovative Solutions"
|
|
|
|
description="Experience coastal elegance at Oyster Bay, Nairobi. Fresh seafood, curated mixology, and fine dining at Valley Arcade."
|
|
|
|
description="Empowering businesses with cutting-edge technology and data-driven insights."
|
|
|
|
buttons={[{ text: "Book a Table" }]}
|
|
|
|
buttons={[{ text: "Get Started", href: "#contact" }]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
|
|
<FeatureBento
|
|
|
|
<FeatureBento
|
|
|
|
title="Our Culinary Art"
|
|
|
|
title="Our Core Capabilities"
|
|
|
|
description="Exquisite flavors meet coastal sophistication."
|
|
|
|
description="Delivering excellence through robust architecture and scalable design."
|
|
|
|
animationType="slide-up"
|
|
|
|
animationType="blur-reveal"
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
features={[{
|
|
|
|
useInvertedBackground={false}
|
|
|
|
title: "Fresh Catch",
|
|
|
|
features={[
|
|
|
|
description: "Sustainably sourced from the deep blue.",
|
|
|
|
{ title: "Global Reach", description: "Scale your infrastructure worldwide with our edge network.", bentoComponent: "globe" },
|
|
|
|
bentoComponent: "reveal-icon", icon: Shield
|
|
|
|
{ title: "Performance Analytics", description: "Real-time monitoring for your critical workloads.", bentoComponent: "animated-bar-chart" }
|
|
|
|
}]}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
<MetricCardOne
|
|
|
|
<MetricCardOne
|
|
|
|
title="The Experience"
|
|
|
|
title="Data Insights"
|
|
|
|
description="Excellence in every detail."
|
|
|
|
description="Quantifiable growth metrics for our partners."
|
|
|
|
gridVariant="uniform-all-items-equal"
|
|
|
|
gridVariant="bento-grid"
|
|
|
|
animationType="slide-up"
|
|
|
|
animationType="blur-reveal"
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
useInvertedBackground={false}
|
|
|
|
useInvertedBackground={true}
|
|
|
|
metrics={[{
|
|
|
|
metrics={[
|
|
|
|
id: "1", value: "5★", title: "Quality", description: "Unrivaled freshness.", icon: Shield
|
|
|
|
{ id: "1", value: "99.9%", title: "Uptime", description: "High availability SLA", icon: Shield },
|
|
|
|
}]}
|
|
|
|
{ id: "2", value: "2M+", title: "Users", description: "Monthly active users", icon: Users }
|
|
|
|
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="menu" data-section="menu">
|
|
|
|
<div id="menu" data-section="menu">
|
|
|
|
<ProductCardOne
|
|
|
|
<ProductCardOne
|
|
|
|
title="Signature Menu"
|
|
|
|
title="Service Tiers"
|
|
|
|
description="Indulge in our curated selection."
|
|
|
|
description="Tailored packages for every business scale."
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
animationType="slide-up"
|
|
|
|
animationType="slide-up"
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
useInvertedBackground={false}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
products={[
|
|
|
|
products={[
|
|
|
|
{ id: "1", name: "Signature Oysters", price: "KSH 2,500", imageSrc: "/placeholder.svg" },
|
|
|
|
{ id: "p1", name: "Basic", price: "$99", imageSrc: "https://images.unsplash.com/photo-1593642532400-2682810df593" },
|
|
|
|
{ id: "2", name: "Grilled Octopus", price: "KSH 3,200", imageSrc: "/placeholder.svg" },
|
|
|
|
{ id: "p2", name: "Pro", price: "$299", imageSrc: "https://images.unsplash.com/photo-1593642532400-2682810df593" },
|
|
|
|
{ id: "3", name: "Coastal Platter", price: "KSH 8,500", imageSrc: "/placeholder.svg" }
|
|
|
|
{ id: "p3", name: "Enterprise", price: "Contact Us", imageSrc: "https://images.unsplash.com/photo-1593642532400-2682810df593" }
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<ContactCTA
|
|
|
|
<ContactCTA
|
|
|
|
tag="Visit Us"
|
|
|
|
tag="Ready to start?"
|
|
|
|
title="Reserve Your Seat"
|
|
|
|
title="Get in Touch"
|
|
|
|
description="Join us for an unforgettable dining experience at Valley Arcade."
|
|
|
|
description="Contact our expert team to discuss your project requirements."
|
|
|
|
buttons={[{ text: "Book Online" }]}
|
|
|
|
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
<FooterCard
|
|
|
|
<FooterLogoReveal
|
|
|
|
logoText="Oyster Bay"
|
|
|
|
logoText="TechCorp"
|
|
|
|
copyrightText="© 2025 Oyster Bay Nairobi | All Rights Reserved"
|
|
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
|
|
socialLinks={[
|
|
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
|
|
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
|
|
|
|
|
|
|
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
|
|
|
|
|
|
|
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ThemeProvider>
|
|
|
|
</ThemeProvider>
|
|
|
|
|