Merge version_5 into main

Update src/app/page.tsx
2026-04-28 20:03:12 +00:00 · 2026-04-28 20:03:09 +00:00 · 2026-04-28 20:02:46 +00:00 · 2026-04-28 20:02:43 +00:00 · 2026-04-28 20:02:43 +00:00 · 2026-04-28 19:58:16 +00:00
4 changed files with 88 additions and 265 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Source_Sans_3 } from "next/font/google";
 import { Montserrat } from "next/font/google";
@@ -16,8 +17,13 @@ export const metadata: Metadata = {
  keywords: ["restaurant, butchery, RAK, kebab, arabian food, Al Hayba"],
 };
-const sourceSans3 = Source_Sans_3({
+
-  variable: "--font-source-sans-3",
+const montserrat = Montserrat({
  variable: "--font-montserrat",
  subsets: ["latin"],
 });
 const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
 });
@@ -29,7 +35,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${sourceSans3.variable} antialiased`}>
+        <body className={`${montserrat.variable} ${inter.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,315 +3,132 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
        contentWidth="medium"
-        sizing="mediumLargeSizeLargeTitles"
+        sizing="largeSizeMediumTitles"
-        background="grid"
+        background="noiseDiagonalGradient"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="radial-glow"
+        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Menu", id: "menu" },
-        },
+        { name: "Butchery", id: "butcher" },
-        {
+        { name: "Testimonials", id: "testimonials" },
-          name: "About",
+        { name: "FAQ", id: "faq" },
-          id: "about",
+        { name: "Contact", id: "contact" },
        },
        {
          name: "Menu",
          id: "menu",
        },
        {
          name: "Butchery",
          id: "butcher",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Al Hayba"
    />
  </div>
  <div id="hero" data-section="hero">
-      <HeroLogo
+      <HeroSplitDoubleCarousel
-      logoText="Al Hayba RAK"
+      title="Al Hayba RAK"
      description="Authentic Arabian charcoal grills, premium butchery, and heritage flavors in the heart of Ras Al Khaimah."
-      buttons={[
+      background={{ variant: "sparkles-gradient" }}
-        {
+      leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/sac-ichi-with-chicken-legs-vegetables_114579-2167.jpg" }]}
-          text: "View Menu",
+      rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/racks-salmon-smoking-small-smoker_169016-36710.jpg" }]}
-          href: "#menu",
+      buttons={[{ text: "Explore", href: "#menu" }, { text: "Visit", href: "#contact" }]}
        },
        {
          text: "Visit Us",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/sac-ichi-with-chicken-legs-vegetables_114579-2167.jpg"
    />
  </div>
  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
+      <TextSplitAbout
      useInvertedBackground={true}
      title="A Legacy of Taste"
-      description="Al Hayba combines the tradition of a master butcher with the art of Arabic charcoal cooking. We source the finest meats locally and prepare them with authentic spices passed down through generations."
+      description={["Al Hayba combines the tradition of a master butcher with the art of Arabic charcoal cooking.", "We source the finest meats locally and prepare them with authentic spices passed down through generations."]}
      metrics={[
        {
          value: "15+",
          title: "Years Experience",
        },
        {
          value: "100%",
          title: "Fresh Quality",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/racks-salmon-smoking-small-smoker_169016-36710.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
    />
  </div>
  <div id="menu" data-section="menu">
-      <FeatureCardNineteen
+      <FeatureCardSixteen
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          tag: "Signature",
          title: "Mixed Kebab Platter",
          subtitle: "Perfectly Spiced",
          description: "Tender lamb and chicken skewers grilled over real charcoal for that authentic smoky finish.",
          imageSrc: "http://img.b2bpic.net/free-photo/meat-barbecue-grill-nature_23-2148199440.jpg",
        },
        {
          tag: "Heritage",
          title: "Traditional Mandi",
          subtitle: "Slow Cooked",
          description: "Fragrant basmati rice served with fall-off-the-bone tender meat prepared in traditional style.",
          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-celebration-digital-art_23-2151358076.jpg",
        },
        {
          tag: "Appetizer",
          title: "Mezze Selection",
          subtitle: "Authentic Sides",
          description: "Homemade hummus, moutabal, and fresh salads crafted with the finest local ingredients.",
          imageSrc: "http://img.b2bpic.net/free-photo/cutting-roasted-beef-sirloin-with-rosemary-pepper_1150-18512.jpg",
        },
      ]}
      title="Our Signature Flavors"
-      description="From tender kebabs to slow-cooked rice dishes, our menu is designed to take you on an Arabian culinary journey."
+      description="Experience the pinnacle of Arabian cuisine."
      textboxLayout="default"
      useInvertedBackground={false}
      positiveCard={{ items: ["Premium Quality Meats", "Charcoal Grilled Perfection", "Authentic Heritage Recipes"] }}
      negativeCard={{ items: ["No Preservatives", "No Shortcuts"] }}
      animationType="blur-reveal"
    />
  </div>
  <div id="butcher" data-section="butcher">
-      <FeatureCardNineteen
+      <FeatureCardSixteen
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          tag: "Beef",
          title: "Wagyu Selections",
          subtitle: "Top Grade",
          description: "Premium marbled beef cuts selected specifically for their texture and depth of flavor.",
          imageSrc: "http://img.b2bpic.net/free-photo/bearded-butcher-dressed-fleece-shirt-serving-fresh-cut-meat-market_613910-16169.jpg",
        },
        {
          tag: "Lamb",
          title: "Fresh Local Lamb",
          subtitle: "Farm Sourced",
          description: "Young local lamb delivered fresh daily to ensure the best possible quality for our customers.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-chef-holding-big-part-meat-restaurant-kitchen_1303-32149.jpg",
        },
        {
          tag: "Custom",
          title: "Custom Cuts",
          subtitle: "On Demand",
          description: "Our master butchers can prepare any cut to your specific requirements for your convenience.",
          imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-raw-steak-barbecue-utensil-wooden-textured-surface_23-2148206961.jpg",
        },
      ]}
      title="Premium Quality Butchery"
-      description="Beyond the grill, we provide the highest grade raw meats for your home cooking. Always fresh, always selected for excellence."
+      description="Hand-selected cuts for the discerning home chef."
      textboxLayout="default"
      useInvertedBackground={true}
      positiveCard={{ items: ["Wagyu Selection", "Fresh Local Lamb", "Custom Cuts"] }}
      negativeCard={{ items: ["Never Frozen", "Responsibly Sourced"] }}
      animationType="scale-rotate"
    />
  </div>
  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
+      <TestimonialCardFifteen
-      animationType="slide-up"
+      testimonial="The most authentic grill experience in Ras Al Khaimah. Simply unmatched."
-      textboxLayout="default"
+      author="Ahmed Rashid"
-      gridVariant="three-columns-all-equal-width"
+      rating={5}
      ratingAnimation="blur-reveal"
      avatarsAnimation="blur-reveal"
      useInvertedBackground={false}
-      testimonials={[
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/happiness-leisure-lifestyle-concept-smiling-african-american-female-recreates-cafe-restaurant-eats-delicious-dessert-drinks-cocktail-happy-have-pleasant-conversation-with-interlocutor_273609-2194.jpg", alt: "Guest" }]}
        {
          id: "1",
          name: "Ahmed Rashid",
          role: "Foodie",
          company: "RAK Resident",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happiness-leisure-lifestyle-concept-smiling-african-american-female-recreates-cafe-restaurant-eats-delicious-dessert-drinks-cocktail-happy-have-pleasant-conversation-with-interlocutor_273609-2194.jpg",
        },
        {
          id: "2",
          name: "Sara Al-Mansoori",
          role: "Chef",
          company: "Local Expert",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-barista-black-apron-showing-thumbsup-recommending-cafe-restaurant-standing-agains_1258-145210.jpg",
        },
        {
          id: "3",
          name: "John Doe",
          role: "Visitor",
          company: "Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-waitress-talking-customers-using-touchpad-while-taking-orders-cafe_637285-3962.jpg",
        },
        {
          id: "4",
          name: "Layla Khalifa",
          role: "Customer",
          company: "RAK Resident",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517421.jpg",
        },
        {
          id: "5",
          name: "Omar Said",
          role: "Business Owner",
          company: "Local Regular",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/group-young-happy-people-communicating-while-having-lunch-together-dining-room_637285-3564.jpg",
        },
      ]}
      title="What Our Guests Say"
      description="Experience why we are the favorite destination in RAK for quality meat and charcoal grills."
    />
  </div>
  <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "Do you offer delivery?",
          content: "Yes, we provide local delivery within Ras Al Khaimah for both our restaurant menu and butchery products.",
        },
        {
          id: "2",
          title: "Are your meats Halal?",
          content: "Absolutely. All meats sourced for our butchery and restaurant are 100% Halal certified.",
        },
        {
          id: "3",
          title: "Can we pre-order for events?",
          content: "We handle large event orders. Please contact us at least 48 hours in advance for catering requirements.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-working-service-industry_23-2150722788.jpg"
      title="Frequently Asked Questions"
-      description="Got questions about our butchery or restaurant? We have the answers."
+      description="Everything you need to know about our services."
-      faqsAnimation="slide-up"
+      textboxLayout="default"
      faqsAnimation="blur-reveal"
      useInvertedBackground={false}
      faqs={[
        { id: "1", title: "Do you offer delivery?", content: "Yes, we provide local delivery in RAK." },
        { id: "2", title: "Are your meats Halal?", content: "All our meats are 100% Halal certified." }
      ]}
    />
  </div>
  <div id="contact" data-section="contact">
      <ContactCTA
-      useInvertedBackground={false}
+      tag="Contact"
-      background={{
+      title="Ready to visit us?"
-        variant: "plain",
+      description="Book a table or reach out to our team."
-      }}
+      buttons={[{ text: "Call Now", href: "tel:+971501234567" }]}
-      tag="Visit Us"
+      background={{ variant: "sparkles-gradient" }}
-      title="Ready to Visit Al Hayba?"
+      useInvertedBackground={true}
      description="Come experience the best charcoal grills in Ras Al Khaimah. We are open daily to serve you."
      buttons={[
        {
          text: "Call Now",
          href: "tel:+971501234567",
        },
        {
          text: "Get Directions",
          href: "#",
        },
      ]}
    />
  </div>
  <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterLogoReveal
      logoText="Al Hayba"
-      columns={[
+      leftLink={{ text: "Privacy", href: "#" }}
-        {
+      rightLink={{ text: "Terms", href: "#" }}
          title: "Navigation",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Menu",
              href: "#menu",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Butchery",
              href: "#butcher",
            },
            {
              label: "Catering",
              href: "#contact",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2025 Al Hayba | Ras Al Khaimah"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-inter), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */
-  --background: #ffffff;
+  --background: #fbfbfb;
-  --card: #f9f9f9;
+  --card: #f0f0f0;
-  --foreground: #000612e6;
+  --foreground: #1a1a1a;
-  --primary-cta: #15479c;
+  --primary-cta: #2a2a2a;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
+  --accent: #b8860b;
-  --background-accent: #c4c4c4;
+  --background-accent: #e1b875;
  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	f3dca0ff88	Merge version_5 into main Merge version_5 into main	2026-04-28 20:03:12 +00:00
bender	d11599db44	Update src/app/page.tsx	2026-04-28 20:03:09 +00:00
bender	163c109bc8	Merge version_5 into main Merge version_5 into main	2026-04-28 20:02:46 +00:00
bender	848164c8c7	Update src/app/styles/variables.css	2026-04-28 20:02:43 +00:00
bender	b8c451bbb9	Update src/app/page.tsx	2026-04-28 20:02:43 +00:00
bender	38d4ea2ff0	Merge version_4 into main Merge version_4 into main	2026-04-28 19:58:16 +00:00
bender	71258905e5	Update theme fonts	2026-04-28 19:58:13 +00:00
bender	5ad15335d3	Update theme fonts	2026-04-28 19:58:12 +00:00
bender	f137b9cbd0	Merge version_4 into main Merge version_4 into main	2026-04-28 19:58:00 +00:00
bender	aa20562c5e	Update theme colors	2026-04-28 19:57:57 +00:00
bender	0a60a02f3f	Merge version_3 into main Merge version_3 into main	2026-04-28 19:57:56 +00:00
bender	4f5cffac3b	Merge version_2 into main Merge version_2 into main	2026-04-28 19:57:51 +00:00