From 827950718178cdb04cbf31866c8da3839db4d171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Csujitmemane=E2=80=9D?=
 <“officialsujitmemane@gmail.comgit config --global user.name “sujitmemane”git config --global user.email “officialsujitmemane@gmail.com>
Date: Sat, 30 Dec 2023 23:29:59 +0530
Subject: [PATCH] Added Reviews

---
 app/(marketing)/page.tsx   |   2 +
 components/Review.tsx      | 101 +++++++++++++++
 components/ui/card.tsx     |  79 ++++++++++++
 components/ui/carousel.tsx | 258 +++++++++++++++++++++++++++++++++++++
 package-lock.json          |  26 ++++
 package.json               |   1 +
 6 files changed, 467 insertions(+)
 create mode 100644 components/Review.tsx
 create mode 100644 components/ui/card.tsx
 create mode 100644 components/ui/carousel.tsx

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index b0e6186..33ce952 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -1,5 +1,6 @@
 import { Faq } from "@/components/faq";
 import Tracks from "@/components/tracks";
+import {Review }from "@/components/Review"
 import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
@@ -111,6 +112,7 @@ export default function Home() {
 
       {/* tracks section */}
       <Tracks />
+      <Review/>
       <Faq />
     </main>
   );
diff --git a/components/Review.tsx b/components/Review.tsx
new file mode 100644
index 0000000..84974ee
--- /dev/null
+++ b/components/Review.tsx
@@ -0,0 +1,101 @@
+import * as React from "react"
+ 
+import { FaStar } from "react-icons/fa";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+export const testimonials = [
+    {
+   
+        name: "Hariharan Reddy",
+        title: "Fullstack Intern",
+quote:"Your guidance did helped me prioritize what I needed to do for getting my first internship. Your videos on resume building, cover letter templates and tips and tricks helped immensely in getting my resume shortlisted."  ,
+ img:"https://media.licdn.com/dms/image/D4D03AQForZe5Npk8Qw/profile-displayphoto-shrink_800_800/0/1689487033085?e=1709164800&v=beta&t=2s6gpZpvRr1UQAwD8iw159nAhH-lE8UHwgnRNqPhTps"
+},
+    {
+
+        title: "Frontend Engineer",
+        name: "SAurav (Kumar Avishek)", img:"https://media.licdn.com/dms/image/C5603AQHp3_SXyYHZFQ/profile-displayphoto-shrink_400_400/0/1600053166501?e=1709164800&v=beta&t=ZZM3Bg4EXsfNLaxC9GDrEgA5LhOQCj1nixhuNFw9pqM"
+        ,
+quote:"Before joining, I was isolated with no connections, and my progress was slow. However, being a member of Frontend Freaks propelled me to my current position. Without this group, I might not be where I am today. My heartfelt thanks to Vishal for creating and managing this group. The impact on my professional growth is immeasurable, and I am truly appreciative."    },
+    {
+        name: " KEEGAN COLACO ",
+        title: "Student", img:"https://media.licdn.com/dms/image/D4D03AQENueFehAtxAQ/profile-displayphoto-shrink_800_800/0/1685429356858?e=1709164800&v=beta&t=lmrMRs7MGi0Nry9SbG-MTiFz99saQY8yFgCwpa61RRs"
+,
+        quote: "Vishal is very helpful and will make sure that all your doubts are clear. Along with that the awesome community is very helpful and they will be very supportive. "
+    },
+    {
+        name: "Jyoti Pal",
+        title: "Full Stack Engineer",
+        img:"https://pbs.twimg.com/profile_images/1732254187218694144/synyPvoD_400x400.jpg"
+,
+        quote: "Vishal's guidance was pivotal in my decision to join my current company. Their support during tough times and the experienced community's assistance were invaluable. I'm truly grateful for your motivation and impactful work. Thank you immensely!"
+    },
+    {
+      name: "Sujit Memane",
+      title: "Student",
+      img:"https://media.licdn.com/dms/image/D4D03AQH9NENenfDMYg/profile-displayphoto-shrink_800_800/0/1681362877178?e=1709164800&v=beta&t=gepBZZSswzDuLlSfrK041zZKavAd9O5VvmgIznG4su0"
+,
+      quote: "Vishal Bhaiya helped me from the start of my tech journey. His community is so helpful and supportive. His JavaScript DSA video series is very useful.Thank you immensely!"
+  },
+  
+   
+]
+
+
+export function Review() {
+  return (
+    <div className="text-center container">
+           <h4 className="md:text-3xl text-xl  my-1 text-black font-bold dark:text-white">
+               Reviews
+            </h4>
+            <p>What Our Student Says?</p>
+
+<div className="flex  items-center my-8  justify-center   ">
+<Carousel opts={{ align: "start" }} className="w-full   ">
+  <CarouselContent className="">
+    {testimonials.map((item, idx) => (
+      <CarouselItem key={idx} className="md:basis-1/2 shadow-lg gap-4 lg:basis-1/3">
+        <li className="flex flex-col h-full items-start mr-6 justify-center  max-w-sm  ">
+          <figure>
+            <blockquote className="text-justify text-md font-italics sm:text-sm min-h-[100px]">
+              “{item.quote}“
+            </blockquote> 
+            <div className="flex justify-between items-center">
+            <div className="flex flex-row md:flex-col items-center justify-between mt-4 space-x-2">
+              <img src={item.img} className="w-12 h-12 rounded-full" alt={item.name} />
+              <div>
+                <span className="block text-center font-semibold">{item.name}</span>
+                <span className="block text-center text-sm">{item.title}</span>
+              </div>
+            </div>
+            <p className="md:flex space-x-2 mt-2 hidden ">
+              <FaStar size={15} color="orange" />
+              <FaStar size={15} color="orange" />
+              <FaStar size={15} color="orange" />
+              <FaStar size={15} color="orange" />
+              <FaStar size={15} color="orange" />
+            </p>
+            </div>
+      
+          </figure>
+        </li>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious  className="hidden md:flex"/>
+  <CarouselNext   className="hidden md:flex"/>
+</Carousel>
+</div>
+
+
+
+    </div>
+  
+  )
+}
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..090bde3
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,258 @@
+'use client'
+import * as React from "react"
+import useEmblaCarousel, {
+  type EmblaCarouselType as CarouselApi,
+  type EmblaOptionsType as CarouselOptions,
+  type EmblaPluginType as CarouselPlugin,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/package-lock.json b/package-lock.json
index 8e1c4c4..1aef224 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "clsx": "^1.2.1",
         "cmdk": "^0.2.0",
         "contentlayer": "^0.3.3",
+        "embla-carousel-react": "^8.0.0-rc17",
         "eslint": "8.43.0",
         "eslint-config-next": "13.4.7",
         "lucide-react": "^0.252.0",
@@ -3742,6 +3743,31 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
       "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
     },
+    "node_modules/embla-carousel": {
+      "version": "8.0.0-rc17",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc17.tgz",
+      "integrity": "sha512-evF49b88VOitvqFtlvhvKVSu96Y8A+QSFdhok87Bfm8R7OYuk95FT+o8+M1GQLi/EhGDUlT193HTVAR0Wt2neQ=="
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.0.0-rc17",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc17.tgz",
+      "integrity": "sha512-x4aFprwFB+PQO9EsHHZsrDxARb0uYNBYn9mr5oDFdBdPez4M8G1r5yidWbUcT9pNUc8AQXC9sGzlfauBfBxVOw==",
+      "dependencies": {
+        "embla-carousel": "8.0.0-rc17",
+        "embla-carousel-reactive-utils": "8.0.0-rc17"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.0.0-rc17",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc17.tgz",
+      "integrity": "sha512-eluEOK/u5HdjYaTLC4bUG3iTCnyX7RsYix3il0aH4ZECOKa5fS+pVK2vrM17Mgw6C5Hyjcr3r3lfJtGerVzVsQ==",
+      "peerDependencies": {
+        "embla-carousel": "8.0.0-rc17"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/package.json b/package.json
index e1ce17f..54da86a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "contentlayer": "^0.3.3",
+    "embla-carousel-react": "^8.0.0-rc17",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",
     "lucide-react": "^0.252.0",