Merge branch 'crescents-stack:main' into main

src/app/_utils/testimonial.tsx

@@ -12,7 +12,7 @@ const Testimonial = ({ data, calendly }: { data: any; calendly: boolean }) => {
   const [currentTestimonial, setCurrentTestimonial] = useState(2);
   return (
     <section>
-      <div className="bg-muted">
+      <div className="bg-white">
       <div className="container section flex flex-col large-gap">
         <SectionHead
           highlighter={data?.highlighter}

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

@@ -8,13 +8,13 @@ import { useEffect, useState } from "react";
 const ClientsReviews = ({
   testimonial = true,
   projectIdea = true,
-  reviews,
+  reviews = [],
 }: {
   testimonial?: boolean;
   projectIdea?: boolean;
   reviews?: object[];
   }) => {
-  const [clientReviews, setClientReviews] = useState<object[]>([]);
+  const [clientReviews, setClientReviews] = useState<object[]>(reviews);
   const fetchReviews = async () => {
     const result = await Action___GET__AllReviews();
     setClientReviews(result?.data?.length ? result?.data : []);
@@ -25,7 +25,8 @@ const ClientsReviews = ({
     if (!reviews) {
       fetchReviews();
     }
-  }, []);
+  }, [reviews]);
+  console.log(reviews?.length, clientReviews?.length)
   return (
     <>
       {testimonial ? (

src/app/globals.scss

@@ -21,7 +21,7 @@
     --secondary-muted: 242 76% 90%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 207 28% 92%;
+    --muted: 207 27% 92%;
     --dimmed: 246 10% 37%;
     --muted-foreground: 215.4 16.3% 46.9%;
 

src/app/joining/_utils/actions.ts

@@ -1,11 +1,10 @@
 "use server";
 // @this variable should be in env in future while refactoring
-const BaseURL = "https://sociomatic-backend.onrender.com";
-// const BaseURL = "https://f9f3-104-28-208-84.ngrok-free.app";
+const BASEURL = process.env.BASEURL;
 
 export const GetOtp = async (email: string) => {
   try {
-    const response = await fetch(`${BaseURL}/send-otp`, {
+    const response = await fetch(`${BASEURL}/send-otp`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -15,6 +14,7 @@ export const GetOtp = async (email: string) => {
       }),
     });
     const result = await response.json();
+
     return result;
   } catch (error) {
     return {
@@ -26,7 +26,7 @@ export const GetOtp = async (email: string) => {
 
 export const VerifyOtp = async (otp: number, email: string) => {
   try {
-    const response = await fetch(`${BaseURL}/verify-otp`, {
+    const response = await fetch(`${BASEURL}/verify-otp`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -48,7 +48,7 @@ export const VerifyOtp = async (otp: number, email: string) => {
 
 export const FunnelFormAction = async (data: any) => {
   try {
-    const response = await fetch(`${BaseURL}/funnel-form`, {
+    const response = await fetch(`${BASEURL}/funnel-form`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/app/services/[slug]/page.tsx

@@ -8,6 +8,7 @@ import LimitedOfferSection from "@/app/services/_utils/limited-offer-section";
 import UserEmpathyBanner from "@/app/services/_utils/user-empathy-banner";
 import WhatAndWhySection from "@/app/services/_utils/what-and-why-section";
 import { ServicePageCOPY } from "@/app/services/_utils/data/services";
+import { Fragment } from "react";
 
 export type T__SlugType =
   | "googleads"
@@ -43,7 +44,7 @@ const Services = async ({ params }: { params: { slug: string } }) => {
   } = data;
 
   return (
-    <div>
+    <Fragment>
       <ServiceHeroSection data={hero} />
       <LimitedOfferSection data={limitedOffer} />
       <WhatAndWhySection data={whyWeAndWhatWeDo} />
@@ -52,7 +53,7 @@ const Services = async ({ params }: { params: { slug: string } }) => {
       <CoreBenefits data={coreBenefits} />
       <EndingFunnel data={endingFunnel} />
       <Faq data={faq} />
-    </div>
+    </Fragment>
   );
 };
 

src/app/services/_utils/marquee-wrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import Marquee from "@/components/ui/marquee";
 
 interface MarqueeWrapperProps {
@@ -80,7 +80,9 @@ const MarqueeWrapper = ({
         onMouseLeave={() => setIsHovered(false)} // Reset hover state on mouse leave
       >
         <div className="flex min-w-full shrink-0 gap-4 py-10">
-          {infiniteChildren}
+          {infiniteChildren.map((child, index) => (
+            <Fragment key={index}>{child}</Fragment>
+          ))}
         </div>
       </div>
     </div>

src/app/services/_utils/testimonials.tsx

@@ -54,13 +54,15 @@ const Testimonials = ({ data }: { data: any }) => {
               itemWidth={300}
               gapWidth={16}
             >
-              {filteredData?.slice(0, 10)?.map((item: any) => (
-                <TestimonialCard 
-                  key={item._id} 
-                  details={item}
-                  className="flex-shrink-0"
-                />
-              ))}
+              {filteredData?.slice(0, 10)?.map((item: any, index: number) => {
+                return (
+                  <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>

src/app/services/page.tsx

@@ -6,16 +6,17 @@ import {
   homeTestimonialData,
 } from "@/lib/data/data";
 import Faq from "../_utils/faq";
+import { Fragment } from "react";
 
 const Services = () => {
   return (
-    <main>
+    <Fragment>
       <OurServices FeaturesData={homeFeaturesData} />
       <Testimonial calendly={true} data={homeTestimonialData} />
       <div className="bg-[url('/images/backgrounds/CircleNest.svg')] bg-center bg-cover">
         <Faq data={homeFAQ} />
       </div>
-    </main>
+    </Fragment>
   );
 };
 

src/components/magicui/feature-with-grid.tsx

@@ -17,7 +17,7 @@ export function FeatureWithGrid({
 }) {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-10 container">
-      {features.map((feature) => (
+      {features.map((feature, index) => (
         <ANIM__FadeInOutOnScroll
           key={feature.id}
           className="relative bg-gradient-to-b dark:from-neutral-900 to-white p-6 rounded-xl overflow-hidden border border-secondary/5 transition duration-300 hover:shadow-xl space-y-4"
@@ -87,10 +87,10 @@ export function GridPattern({ width, height, x, y, squares, ...props }: any) {
       />
       {squares && (
         <svg x={x} y={y} className="overflow-visible">
-          {squares.map(([x, y]: any) => (
+          {squares.map(([x, y]: any, index: number) => (
             <rect
               strokeWidth="0"
-              key={`${x}-${y}`}
+              key={`${x}-${y}-${index}-${Math.floor(Math.random() * 10000)}`}
               width={width + 1}
               height={height + 1}
               x={x * width}

src/components/molecule/email-modal.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogClose,
@@ -20,6 +19,7 @@ import { useRouter } from "next/navigation";
 import { GetOtp, VerifyOtp } from "@/app/joining/_utils/actions";
 import { Sun } from "lucide-react";
 import ShimmerButton from "../magicui/shimmer-button";
+import { toast } from "../ui/use-toast";
 
 const winDow = typeof window !== "undefined";
 
@@ -86,6 +86,7 @@ const EmailModal = ({
   const [email, setEmail] = useState("");
   const [otp, setOtp] = useState("");
   const [pending, setPending] = useState(false);
+  const [redirecting, setRedirecting] = useState(false);
   const router = useRouter();
 
   const submitEmail = async () => {
@@ -103,15 +104,21 @@ const EmailModal = ({
     setPending(true);
     const result = await VerifyOtp(parseInt(otp), email);
 
-    setPending(false);
     if (result.success) {
       if (winDow) {
         localStorage.setItem("user_email", email);
         emailVerified({ email, otp });
       }
+      setRedirecting(true);
       router.push(path);
     } else {
+      setPending(false);
       winDow && otpVerificationAbandoned({ email, otp });
+      toast({
+        variant: "error",
+        title: "OTP Verification",
+        description: result?.message || "Something went wrong!",
+      });
     }
   };
 
@@ -178,10 +185,14 @@ const EmailModal = ({
               type="submit"
               className="w-full items-center gap-2"
               onClick={step === 1 ? submitEmail : verifyEmail}
-              disabled={pending}
+              disabled={pending || redirecting}
             >
               {pending ? <Sun className="w-4 h-4 animate-spin" /> : null}
-              {step === 1 ? "Get Started" : "Verify Email"}
+              {step === 1
+                ? "Get Started"
+                : redirecting
+                ? "Redirecting..."
+                : "Verify Email"}
             </ShimmerButton>
             <DialogClose className="w-full">
               <span className="bg-white text-center h-[38px] rounded-lg border flex items-center justify-center px-6 font-medium sm:cursor-pointer">