Merge version_9_1777499917741 into main

Merge version_9_1777499917741 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import ServicesPage from "@/pages/ServicesPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/services" element={<ServicesPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -33,7 +33,9 @@ export default function Layout() {
   {
     "name": "Testimonials",
     "href": "#testimonials"
-  }
+  },
+  { name: "Services", href: "/services" },
+
 ];
 
   return (

src/components/sections/about/AboutText.tsx

@@ -1,37 +1,67 @@
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
 interface AboutTextProps {
-  title: string;
+  title?: string;
+  subheading?: string;
+  paragraphs?: string[];
   primaryButton?: { text: string; href: string };
   secondaryButton?: { text: string; href: string };
 }
 
+const defaultParagraphs = [
+  "We believe in pushing the boundaries of what's possible. Our team of dedicated professionals works tirelessly to bring innovative solutions to the forefront of the industry, ensuring that every project we undertake is a testament to our commitment to excellence.",
+  "With years of experience and a passion for design and technology, we have cultivated an environment where creativity thrives. We partner with our clients to understand their unique needs and deliver tailored experiences that resonate with their audiences.",
+  "Join us on our journey to redefine the standards of quality and performance. Together, we can build a future that is not only functional but also beautifully crafted."
+];
+
 const AboutText = ({
-  title,
-  primaryButton,
+  title = "About Us",
+  subheading = "Our Story and Vision",
+  paragraphs = defaultParagraphs,
+  primaryButton = { text: "Get in Touch", href: "#contact" },
   secondaryButton,
 }: AboutTextProps) => {
   return (
     <section aria-label="About section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-3 items-center">
-        <TextAnimation
-          text={title}
-          variant="fade-blur"
-          gradientText={false}
-          tag="h2"
-          className="text-2xl md:text-5xl font-medium text-center leading-tight text-balance"
-        />
+      <div className="w-content-width mx-auto flex flex-col md:flex-row gap-12 md:gap-8 items-start">
+        <div className="flex flex-col gap-4 w-full md:w-1/2 sticky top-24">
+          {subheading && (
+            <div className="flex">
+              <span className="px-3 py-1 text-sm card rounded">{subheading}</span>
+            </div>
+          )}
+          <TextAnimation
+            text={title}
+            variant="fade-blur"
+            gradientText={false}
+            tag="h2"
+            className="text-4xl md:text-6xl font-medium leading-tight text-balance"
+          />
+        </div>
 
-        {(primaryButton || secondaryButton) && (
-          <div className="flex flex-wrap gap-3 justify-center mt-3">
-            {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-          </div>
-        )}
+        <div className="flex flex-col gap-6 w-full md:w-1/2">
+          {paragraphs.map((paragraph, index) => (
+            <ScrollReveal key={index} variant="fade" delay={index * 0.1}>
+              <p className="text-lg leading-relaxed text-foreground/80">
+                {paragraph}
+              </p>
+            </ScrollReveal>
+          ))}
+
+          {(primaryButton || secondaryButton) && (
+            <ScrollReveal variant="fade" delay={paragraphs.length * 0.1}>
+              <div className="flex flex-wrap gap-3 mt-4">
+                {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
+                {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
+              </div>
+            </ScrollReveal>
+          )}
+        </div>
       </div>
     </section>
   );
 };
 
-export default AboutText;
+export default AboutText;

src/components/sections/hero/hero.tsx

@@ -5,15 +5,8 @@ import ImageOrVideo from "@/components/ui/ImageOrVideo";
 export default function Hero() {
   return (
     <section id="hero" aria-label="Hero section" className="py-20">
-      <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 mx-auto w-content-width">
-        <div className="flex flex-col items-start gap-6 text-left">
-          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full backdrop-blur-md bg-black/10 border border-black/20 text-sm">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-            </span>
-            Active now
-          </div>
+      <div className="flex flex-col md:flex-row items-center gap-8 mx-auto w-content-width">
+        <div className="flex flex-col items-start gap-6 text-left w-full md:w-1/2">
           <TextAnimation
             text="Your Vision, Our Innovation"
             variant="fade"
@@ -33,7 +26,7 @@ export default function Hero() {
             <Button text="Learn More" href="#features" variant="secondary" animationDelay={0.1} />
           </div>
         </div>
-        <div className="w-full h-80 lg:h-[500px] card rounded overflow-hidden">
+        <div className="w-full md:w-1/2 h-80 md:h-[500px] card rounded overflow-hidden">
           <ImageOrVideo imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80" />
         </div>
       </div>

src/pages/HomePage.tsx

@@ -6,6 +6,7 @@ import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCar
 import ProductQuantityCards from '@/components/sections/product/ProductQuantityCards';
 import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
 import { Award, Flame, Leaf } from "lucide-react";
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 
 export default function HomePage() {
   return (
@@ -13,7 +14,7 @@ export default function HomePage() {
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
       tag="Authentic Flavors"
-      title="Experience the Art of Italy"
+      title="DMYTRO the Art of Italy"
       description="Handcrafted pasta, wood-fired pizzas, and the finest seasonal ingredients sourced directly from the Italian countryside."
       primaryButton={{
         text: "Reserve a Table",

src/pages/ServicesPage.tsx

@@ -0,0 +1,31 @@
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+import ContactCta from "@/components/sections/contact/ContactCta";
+
+export default function ServicesPage() {
+  return (
+    <>
+      <HeroSplit
+        tag="Our Culinary Experiences"
+        title="Bring the Art of Italy to Your Next Event"
+        description="DMYTRO extends beyond our restaurant walls, offering bespoke Italian culinary services designed to elevate your special occasions. From intimate private dinners and vibrant cooking classes to grand catering events, we bring the authentic flavors and artisanal spirit of Italy directly to you. Discover how we can craft an unforgettable experience, tailored with our handcrafted pasta, wood-fired pizzas, and the finest seasonal ingredients."
+        primaryButton={{"text":"Explore Catering & Events","href":"/services#catering"}}
+        secondaryButton={{"text":"Discover Cooking Classes","href":"/services#classes"}}
+        imageSrc="https://img.freepik.com/free-photo/chef-preparing-delicious-italian-food-kitchen_23-2149727788.jpg"
+      />
+      <FeaturesAlternatingSplit
+        tag="Our Bespoke Services"
+        title="Experience the Art of Italy, Tailored for You"
+        description="DMYTRO extends beyond our restaurant walls, offering exclusive culinary experiences designed to bring the authentic taste and artisanal spirit of Italy directly to your special moments. From intimate private dinners to immersive cooking classes and grand catered events, we craft unforgettable memories with passion and precision."
+        primaryButton={{"text":"Inquire About Services","href":"/contact"}}
+        items={[{"title":"Intimate Private Dining & Special Events","description":"Elevate your celebrations with DMYTRO's personalized touch. Our chefs will craft bespoke menus, from multi-course tasting experiences to family-style feasts, served in the comfort of your home or chosen venue, ensuring an unforgettable Italian culinary journey.","imageSrc":"http://img.b2bpic.net/free-photo/top-view-wooden-table-with-variety-pasta_1220-467.jpg","primaryButton":{"text":"Plan Your Event","href":"/contact#private-dining"}},{"title":"Master the Art of Italian Cuisine","description":"Immerse yourself in the traditions of Italian cooking with DMYTRO's hands-on classes. Learn the secrets of handcrafted pasta, perfect wood-fired pizza dough, and classic sauces from our expert chefs, bringing the heart of Italy to your kitchen.","imageSrc":"https://img.freepik.com/free-photo/chef-teaching-cooking-class_23-2149303358.jpg","primaryButton":{"text":"View Class Schedule","href":"/contact#cooking-classes"}},{"title":"DMYTRO Catering: Italian Excellence for Any Occasion","description":"Bring the authentic flavors of DMYTRO to your next gathering. Whether it's a corporate lunch, a family celebration, or a grand wedding, our full-service catering team delivers exquisite Italian dishes, impeccable presentation, and seamless service.","imageSrc":"http://img.b2bpic.net/free-photo/top-view-wooden-table-with-variety-pasta_1220-467.jpg","primaryButton":{"text":"Request a Catering Quote","href":"/contact#catering"}}]}
+      />
+      <ContactCta
+        tag="Your Culinary Journey Starts Here"
+        text="From bespoke catering for your special events to private pasta-making classes and immersive culinary workshops, DMYTRO brings the authentic taste of Italy directly to you. Connect with us to design an unforgettable experience tailored to your desires."
+        primaryButton={{"text":"Plan Your Event","href":"/contact#plan-event"}}
+        secondaryButton={{"text":"Discover Our Offerings","href":"/services#offerings"}}
+      />
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/services', label: 'Services', pageFile: 'ServicesPage' },
 ];