Merge branch 'crescents-stack:main' into main

src/app/case-studies/_utils/clients-reviews.tsx

@@ -9,10 +9,12 @@ const ClientsReviews = ({
   testimonial = true,
   projectIdea = true,
   reviews = [],
+  hideCTA = false
 }: {
   testimonial?: boolean;
   projectIdea?: boolean;
   reviews?: object[];
+  hideCTA?: boolean;
   }) => {
   const [clientReviews, setClientReviews] = useState<object[]>(reviews);
   const fetchReviews = async () => {
@@ -31,7 +33,7 @@ const ClientsReviews = ({
     <>
       {testimonial ? (
         clientReviews?.length ? (
-          <Testimonials data={clientReviews} />
+          <Testimonials data={clientReviews} hideCTA={hideCTA}/>
         ) : null
       ) : null}
       {projectIdea ? <ProjectIdea /> : null}

src/app/case-studies/_utils/our-review.tsx

@@ -38,11 +38,9 @@ const OurReview = ({
             </div>
             <div className="flex items-center justify-center min-[950px]:justify-end gap-4">
               <div className="space-y-1 order-2 min-[950px]:order-1">
-                {/* <Link href="/"> */}
                 <p className="hover:underline font-semibold text-lg md:text-xl text-left min-[950px]:text-right">
                   {name}
                 </p>
-                {/* </Link> */}
                 <p className="text-xs md:text-base text-white/60">{org}</p>
               </div>
               <Avatar className="order-1 min-[950px]:order-1">

src/app/landing/_utils/sections/about.tsx

@@ -1,4 +1,5 @@
 import { FastForwardIcon, RocketIcon } from "lucide-react";
+import Image from "next/image";
 
 const LandingAboutSection = () => {
   return (
@@ -31,6 +32,7 @@ const LandingAboutSection = () => {
             create a personalized strategy that guarantees success.
           </p>
         </div>
+
       </div>
     </div>
   );

src/app/landing/_utils/sections/calendly.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import SectionHead from "@/components/molecule/section-head";
+import { InlineWidget } from "react-calendly";
+
+const LandingCalendlySection = () => {
+  return (
+    <div className="section" id="contact">
+      <div className="container pb-[25px]">
+        <SectionHead
+          highlighter=""
+          H2={<>Book Now To Discuss Your Project With Us</>}
+          paragraphs={[]}
+        />
+      </div>
+      <InlineWidget url="https://calendly.com/thesociomatic/thesociomatic" />
+    </div>
+  );
+};
+
+export default LandingCalendlySection;

src/app/landing/_utils/sections/cta.tsx

@@ -2,13 +2,21 @@ import ShimmerButton from "@/components/magicui/shimmer-button";
 import Link from "next/link";
 
 const LandingCTASection = () => {
-    return <div className="max-w-md px-4 mx-auto section space-y-4 text-center">
+  return (
+    <div className="container bg-gradient-to-br from-primary to-secondary text-white rounded-[20px] md:rounded-[60px]">
+      <div className="max-w-md px-4 mx-auto py-16 space-y-6 text-center">
         <h2>Let&apos;s Meet and Make Your Business Thrive!</h2>
-        <p>This is a no-commitment, free strategy session where we&apos;ll discuss your business goals and challenges. <span>Limited slots available—book now to secure your spot!</span></p>
-        <Link href="/#contact" className="inline-block">
-            <ShimmerButton>Book Your Free Strategy Session Now!</ShimmerButton>
+        <p>
+          This is a no-commitment, free strategy session where we&apos;ll
+          discuss your business goals and challenges.{" "}
+          <span>Limited slots available—book now to secure your spot!</span>
+        </p>
+        <Link href="/landing/#contact" className="inline-block">
+          <ShimmerButton>Book Your Free Strategy Session Now!</ShimmerButton>
         </Link>
-  </div>;
+      </div>
+    </div>
+  );
 };
 
 export default LandingCTASection;

src/app/landing/_utils/sections/hero.tsx

@@ -3,20 +3,32 @@ import Link from "next/link";
 
 const LandingHeroSection = () => {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-10 container section">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-10 container section items-center">
       <div className="space-y-8">
         <h1>
-          Transform Your Business with <span className="text-secondary">Proven Success Strategies</span> in Dubai!
+          Transform Your Business with{" "}
+          <span className="text-secondary">Proven Success Strategies</span> in
+          Dubai!
         </h1>
         <p>
           Meet Yeatiq, a trusted expert with 700+ successful projects and 500+
           glowing reviews, ready to help your business grow.
         </p>
-        <Link href="/#contact" className="inline-block">
+        <Link href="/landing/#contact" className="inline-block">
           <ShimmerButton>Book Your Free Strategy Session Now!</ShimmerButton>
         </Link>
       </div>
-      <div className="p-6 bg-secondary rounded-lg">a</div>
+      <div className="min-h-[300px] shadow-2xl z-10 relative rounded-2xl">
+        <iframe
+          className="w-full h-full min-h-[30vh] md:min-h-[60vh] lg:min-h-[40vh] rounded-2xl mx-auto border shadow-xl"
+          src="https://www.youtube.com/embed/04pWB5aj-DE?si=KhMa8PqMC6WmL_K1"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      </div>
     </div>
   );
 };

src/app/landing/_utils/sections/proof.tsx

@@ -1,16 +1,16 @@
 import { CheckCheckIcon, FastForwardIcon } from "lucide-react";
+import Image from "next/image";
 
 const LandingProofSection = () => {
   return (
-    <div className="container section grid grid-cols-1 md:grid-cols-2 gap-10">
-      <div className="p-6 bg-white rounded-xl flex flex-col items-start justify-center gap-4">
-        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-secondary/10 text-secondary">
-          <FastForwardIcon className="w-6 h-6" />
-        </div>
-        <p className="text-md md:text-lg">
-          My mission is simple: to listen, understand your challenges
-        </p>
-      </div>
+    <div className="container section grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
+      <Image
+        src="https://utfs.io/f/TLm9XcQ0Drp9Mwu8Tm1dzq50nhPkDJ2fyaXpVUIusTKrltEW"
+        alt="proof"
+        width={1000}
+        height={1000}
+        className="rounded-2xl"
+      />
       <div className="space-y-4">
         <p className="inline-block px-4 py-1 rounded-xl border">
           Proven Results You Can Trust
@@ -34,13 +34,13 @@ const LandingProofSection = () => {
           <p>Highlight case studies with concise bullet points</p>
           <ul className="space-y-2">
             <li className="flex items-center gap-2">
-              <CheckCheckIcon className="w-6 h-6 min-w-6 bg-secondary/10 stroke-secondary rounded-full p-1" /> Helped an e-commerce brand grow
-              from $0 to $1.2M in 12 months.
+              <CheckCheckIcon className="w-6 h-6 min-w-6 bg-secondary/10 stroke-secondary rounded-full p-1" />{" "}
+              Helped an e-commerce brand grow from $0 to $1.2M in 12 months.
             </li>
             <li className="flex items-center gap-2">
-              <CheckCheckIcon className="w-6 h-6 min-w-6 bg-secondary/10 stroke-secondary rounded-full p-1" /> Generated 52,400 visitors and
-              3,230 leads for a service-based business in Dubai. business in
-              Dubai.
+              <CheckCheckIcon className="w-6 h-6 min-w-6 bg-secondary/10 stroke-secondary rounded-full p-1" />{" "}
+              Generated 52,400 visitors and 3,230 leads for a service-based
+              business in Dubai. business in Dubai.
             </li>
           </ul>
         </div>

src/app/landing/_utils/sections/review.tsx

@@ -1,10 +1,11 @@
 import ShimmerButton from "@/components/magicui/shimmer-button";
 import { CheckCheckIcon, FastForwardIcon, FileWarning, X } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 
 const LandingReviewSection = () => {
   return (
-    <div className="container section grid grid-cols-1 md:grid-cols-2 gap-10">
+    <div className="container section grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
       <div className="space-y-4">
         <p className="inline-block px-4 py-1 rounded-xl border">
           What Clients Are Saying
@@ -36,18 +37,17 @@ const LandingReviewSection = () => {
             winning strategy
           </p>
         </div>
-        <Link href="/#contact" className="inline-block">
-            <ShimmerButton>Book Your Free Meeting Today!</ShimmerButton>
-          </Link>
-      </div>
-      <div className="p-6 bg-white rounded-xl flex flex-col items-start justify-center gap-4">
-        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-secondary/10 text-secondary">
-          <FastForwardIcon className="w-6 h-6" />
-        </div>
-        <p className="text-md md:text-lg">
-          My mission is simple: to listen, understand your challenges
-        </p>
+        <Link href="/landing/#contact" className="inline-block">
+          <ShimmerButton>Book Your Free Meeting Today!</ShimmerButton>
+        </Link>
       </div>
+      <Image
+        src="https://utfs.io/f/TLm9XcQ0Drp9VpRj6CXtzjwcuqoVvpZmxNrkdWPhDefA1Mb2"
+        alt="proof"
+        width={1000}
+        height={1000}
+        className="rounded-2xl"
+      />
     </div>
   );
 };

src/app/landing/_utils/sections/visuals.tsx

@@ -1,7 +1,6 @@
 const LandingVisualsSection = () => {
   return (
-    <div className="bg-muted">
-      <div className="container section space-y-10">
+    <div className="container section space-y-10 text-center">
         <h2>See the Numbers Behind the Success</h2>
 
         <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 [&>li]:border [&>li]:p-8 [&>li]:bg-white [&>li]:flex [&>li]:flex-col [&>li]:items-center [&>li]:justify-center [&>li]:gap-4 [&>li]:rounded-xl [&>li>span]:text-4xl [&>li>span]:font-bold [&>li>span]:text-primary capitalize">
@@ -16,7 +15,6 @@ const LandingVisualsSection = () => {
           </li>
         </ul>
       </div>
-    </div>
   );
 };
 

src/app/landing/page.tsx

@@ -5,16 +5,23 @@ import LandingProofSection from "./_utils/sections/proof";
 import LandingReviewSection from "./_utils/sections/review";
 import LandingVisualsSection from "./_utils/sections/visuals";
 import LandingCTASection from "./_utils/sections/cta";
+import ClientsReviews from "../case-studies/_utils/clients-reviews";
+import { Action___Get__Review_By_Category } from "../reviews/post/_utils/actions";
+import LandingCalendlySection from "./_utils/sections/calendly";
 
-const LandingPage = () => {
+const LandingPage = async () => {
+  const result = await Action___Get__Review_By_Category("socialmediapaidads");
+  const reviews = result?.data?.length ? result?.data : [];
   return (
     <Fragment>
       <LandingHeroSection />
       <LandingAboutSection />
       <LandingProofSection />
       <LandingReviewSection />
+      <ClientsReviews reviews={reviews} projectIdea={false} hideCTA={true}/>
       <LandingVisualsSection />
       <LandingCTASection />
+      <LandingCalendlySection />
     </Fragment>
   );
 };

src/app/services/_utils/testimonials.tsx

@@ -10,7 +10,7 @@ import { useState, useEffect } from "react";
 import clsx from "clsx";
 import MarqueeWrapper from "./marquee-wrapper";
 
-const Testimonials = ({ data }: { data: any }) => {
+const Testimonials = ({ data, hideCTA }: { data: any; hideCTA?: boolean }) => {
   const pathname = usePathname();
   const materedPath = pathname
     ?.replaceAll("/services/", "")
@@ -26,12 +26,13 @@ const Testimonials = ({ data }: { data: any }) => {
   };
 
   const [isClient, setIsClient] = useState(false);
-  
+
   useEffect(() => {
     setIsClient(true);
   }, []);
 
-  const filteredData = data?.filter((item: any) => item.text?.length < 100) || [];
+  const filteredData =
+    data?.filter((item: any) => item.text?.length < 100) || [];
 
   return (
     <div className="py-16 bg-muted">
@@ -49,46 +50,48 @@ const Testimonials = ({ data }: { data: any }) => {
       <div className="space-y-8">
         <div className="relative container">
           {isClient && (
-            <MarqueeWrapper 
+            <MarqueeWrapper
               className="gap-4 w-full"
               itemWidth={300}
               gapWidth={16}
             >
               {filteredData?.slice(0, 10)?.map((item: any, index: number) => {
                 return (
-                  <TestimonialCard 
-                    key={index} 
+                  <TestimonialCard
+                    key={index}
                     details={item}
                     className="flex-shrink-0"
                   />
-                )
+                );
               })}
             </MarqueeWrapper>
           )}
           <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-muted dark:from-background"></div>
           <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-muted dark:from-background"></div>
         </div>
-        <div className="flex justify-center">
-          <ServicesCTA
-            position="center"
-            cta={{
-              primary: {
-                text: <>Get Started Right Away</>,
-                link: `/joining?type=${path[materedPath]}`,
-              },
-              secondary: { text: <>Get A Free Consultation</>, link: "/" },
-            }}
-          />
-        </div>
+        {!hideCTA ? (
+          <div className="flex justify-center">
+            <ServicesCTA
+              position="center"
+              cta={{
+                primary: {
+                  text: <>Get Started Right Away</>,
+                  link: `/joining?type=${path[materedPath]}`,
+                },
+                secondary: { text: <>Get A Free Consultation</>, link: "/" },
+              }}
+            />
+          </div>
+        ) : null}
       </div>
     </div>
   );
 };
 
-export const TestimonialCard = ({ 
-  details, 
-  className = "" 
-}: { 
+export const TestimonialCard = ({
+  details,
+  className = "",
+}: {
   details: any;
   className?: string;
 }) => {
@@ -111,7 +114,9 @@ export const TestimonialCard = ({
 
   const letterCount = 100;
   return (
-    <div className={`w-[300px] shrink-0 mx-2 hover:shadow-lg p-4 rounded-2xl space-y-[16px] border-2 border-white hover:border-secondary hover:scale-105 bg-white transition ease-in-out duration-500 ${className}`}>
+    <div
+      className={`w-[300px] shrink-0 mx-2 hover:shadow-lg p-4 rounded-2xl space-y-[16px] border-2 border-white hover:border-secondary hover:scale-105 bg-white transition ease-in-out duration-500 ${className}`}
+    >
       <div className="flex">
         {createArray(rating || 1).map((item: number) => {
           return (
@@ -122,10 +127,12 @@ export const TestimonialCard = ({
           );
         })}
       </div>
-      <p className={clsx(
-        "text-sm leading-relaxed", 
-        moreText ? "h-auto" : "line-clamp-4"
-      )}>
+      <p
+        className={clsx(
+          "text-sm leading-relaxed",
+          moreText ? "h-auto" : "line-clamp-4"
+        )}
+      >
         <i>{`"${text}"`}</i>
         {text?.length > letterCount && (
           <span