Adding prismic integration

app/components/projects/project.tsx

@@ -14,25 +14,37 @@ const Project = ({
   link,
 }: ProjectProps) => {
   return (
-    <div className="flex flex-col items-center">
+    <div className="px-0.5 py-12 shadow border-2 border-[#4a4951] flex flex-col justify-start items-center gap-12 h-full">
       <img
         src={image ?? "https://i.imgur.com/BlBH8Ak.jpeg"}
         alt={title}
-        className="w-48 h-48 object-cover rounded-lg shadow-lg mb-4"
+        className="w-96 h-44 object-cover rounded-lg mb-4"
       />
-      <p className="text-lg font-semibold">{title ?? "Project Title"}</p>
-      <p className="text-sm text-gray-500 mb-4">
-        {subtitle ?? "Project Subtitle"}
-      </p>
-      <p className="text-sm text-gray-500 ml-4 mb-4">
-        {description ?? "Project Description"}
-      </p>
-      <div className="flex space-x-4">
-        {link && (
-          <a href={link}>
-            <button>View Case Study</button>
-          </a>
-        )}
+      <div className="flex-col justify-between items-center gap-6 flex mx-6">
+        <div>
+          <div className=" text-center text-black text-2xl font-medium font-['IBM Plex Sans'] leading-7 mb-2">
+            {title || "Title"}
+          </div>
+          <div className="text-center text-[#929292] text-base font-normal font-['IBM Plex Sans'] leading-tight">
+            {subtitle || "Project Subtitle"}
+          </div>
+        </div>
+        <div className=" text-sm m-auto text-gray-500 line-clamp-[9]">
+          {description || "Project Description"}
+        </div>
+        <div className="text-center text-[#333333] text-sm font-bold font-['IBM Plex Sans'] leading-none ">
+          {link && (
+            <div className="mt-auto w-full self-stretch h-9 flex-col justify-start items-start flex">
+              <div className="self-stretch px-6 py-3 bg-[#f8ecff] shadow border border-[#4a4951] justify-center items-center gap-2.5 inline-flex">
+                <div className="text-center text-[#333333] text-sm font-bold font-['IBM Plex Sans'] leading-none">
+                  <a href={link}>
+                    <button>View Case Study</button>
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

app/components/projects/projects-carousel.tsx

@@ -8,17 +8,17 @@ import {
 } from "../ui/carousel";
 import Project, { ProjectProps } from "./project";
 
-interface ProjectsCarouselProps {
+export interface ProjectsCarouselProps {
   projects: ProjectProps[];
 }
 
 const ProjectsCarousel = ({ projects }: ProjectsCarouselProps) => {
   return (
-    <div className="flex justify-center mt-4">
-      <Carousel className="w-full max-w-3xl">
+    <div className="flex justify-center mt-4 m-4 px-20">
+      <Carousel className="w-full max-w-5xl">
         <CarouselContent className="-ml-2 md:-ml-4">
           {projects.map((project, index) => (
-            <CarouselItem key={index} className="basis-1/3 pl-2 md:pl-4">
+            <CarouselItem key={index} className="basis-1/3">
               <Project
                 image={project.image}
                 title={project.title}
@@ -29,7 +29,9 @@ const ProjectsCarousel = ({ projects }: ProjectsCarouselProps) => {
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious />
+        <div className="mt-4">
+          <CarouselPrevious />
+        </div>
         <CarouselNext />
         <CarouselDots className="mt-4" />
       </Carousel>

app/components/projects/projects-page.tsx

@@ -0,0 +1,19 @@
+import ProjectsCarousel, { ProjectsCarouselProps } from "./projects-carousel";
+
+const ProjectsPage = ({ projects }: ProjectsCarouselProps) => {
+  return (
+    <div className="p-4">
+      <div className="flex-col justify-start items-start gap-[13px] inline-flex">
+        <h1 className="text-black font-medium text-5xl font-['IBM Plex Sans'] leading-10">
+          Projects
+        </h1>
+        <h3 className="text-center text-[#333333] text-2xl font-medium font-['IBM Plex Sans'] leading-7">
+          Take a look at some of the work we've done!
+        </h3>
+      </div>
+      <ProjectsCarousel projects={projects} />
+    </div>
+  );
+};
+
+export default ProjectsPage;

app/components/ui/carousel.tsx

@@ -205,17 +205,21 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute  h-8 w-8 rounded-full",
+        "absolute  h-8 w-8 rounded-full border-0 overflow-visible shadow-none",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "-left-12 top-1/2 -translate-y-1/2 -ml-8"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90 -mt-8",
         className,
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="h-4 w-4" />
+      <span
+        className="absolute inset-0 -z-10 h-20 w-20 rounded-full border-0 shadow-none
+                   bg-[radial-gradient(circle,_rgba(238,210,255,0.5)_30%,_transparent_70%)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+      ></span>
+      <ArrowLeftIcon className="h-8 w-8 relative z-10" />
       <span className="sr-only">Previous slide</span>
     </Button>
   );
@@ -234,17 +238,21 @@ const CarouselNext = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute h-8 w-8 rounded-full border-0 overflow-visible shadow-none",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "-right-12 top-1/2 -translate-y-1/2 -mr-8"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 -mb-8",
         className,
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="h-4 w-4" />
+      <span
+        className="absolute inset-0 -z-10 h-20 w-20 rounded-full border-0 shadow-none
+                   bg-[radial-gradient(circle,_rgba(238,210,255,0.5)_30%,_transparent_70%)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+      ></span>
+      <ArrowRightIcon className="h-8 w-8 relative z-10" />
       <span className="sr-only">Next slide</span>
     </Button>
   );
@@ -279,14 +287,17 @@ const CarouselDots = React.forwardRef<
 
   if (numberOfSlides > 1) {
     return (
-      <div ref={ref} className={`flex justify-center ${props.className}`}>
+      <div
+        ref={ref}
+        className={`flex justify-center shadow-none p-5 ${props.className}`}
+      >
         {Array.from({ length: numberOfSlides }, (_, i) => (
           <Button
             key={i}
-            className={`mx-1 h-1.5 w-1.5 rounded-full p-0 ${
+            className={`mx-1 h-3 w-3 rounded-full p-0 m-2 shadow-none ${
               i === currentSlide
-                ? "scale-125 transform bg-gray-500 hover:bg-gray-500"
-                : "bg-gray-300 hover:bg-gray-300"
+                ? "scale-[1.5] transform bg-[#6059cd] hover:bg-gray-500"
+                : "bg-[#e6e4ee] hover:bg-gray-300"
             }`}
             aria-label={`Go to slide ${i + 1}`}
             onClick={() => api?.scrollTo(i)}

app/routes/projects.tsx

@@ -1,5 +1,8 @@
-import { MetaFunction } from "@remix-run/react";
-import ProjectsCarousel from "~/components/projects/projects-carousel";
+import { asImageSrc, asLink, asText } from "@prismicio/client";
+import { MetaFunction, useLoaderData } from "@remix-run/react";
+import { ProjectDocument } from "types.generated";
+import ProjectsPage from "~/components/projects/projects-page";
+import { getPrismicClient } from "~/utils/prismicio";
 
 export const meta: MetaFunction = () => {
   return [
@@ -8,38 +11,27 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-const exProjectsList = [
-  {
-    image: "https://i.imgur.com/1D8yxOo.gif",
-    title: "Lucy's Love Bus",
-    subtitle: "Practitioner Search Directory",
-    description:
-      "Lucy’s Love Bus improves quality of life for children with cancer or other life-threatening illnesses with integrative therapies like massage, meditation, acupuncture, music therapy, and therapeutic horseback riding. Integrative therapies ease children’s pain and anxiety during and after traditional medical... treatments. We are building an open search directory to allow families across New England to find integrative therapists in their area.",
-    link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)",
-  },
-  {
-    image: "https://i.imgur.com/F4IOuav.jpeg",
-    title: "Speak For The Trees",
-    subtitle: "Tree Stewardship System",
-    description:
-      "Speak for the Trees Boston aims to improve the size and health of the urban forest in the greater Boston area, with a focus on under-served and under-canopied neighborhoods. They work with volunteers to inventory (collect data on) trees, plant trees, and educate those about trees...",
-    link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)",
-  },
-  {
-    image: "https://i.imgur.com/1D8yxOo.gif",
-    title: "This Star Won't Go Out",
-    subtitle: "Grant Application System",
-    description:
-      "Since its founding in 2011, This Star Won’t Go Out has helped hundreds of families, with gifts totaling over $450,000 to help families suffering from financial hardship related to childhood cancer. We're helping to streamline this system so that TSWGO can focus their attention on helping families.",
-    link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)",
-  },
-  {},
-];
+export const loader = async () => {
+  const client = await getPrismicClient();
+
+  return await client.getSingle<ProjectDocument>("project");
+};
 
 export default function Projects() {
+  const document = useLoaderData<ProjectDocument>();
+  const projects = document.data.project;
+
+  const projectsList = projects.map((project) => ({
+    image: asImageSrc(project.image) ?? undefined,
+    title: asText(project.title),
+    subtitle: asText(project.subtitle),
+    description: asText(project.description),
+    link: asLink(project.link) ?? undefined,
+  }));
+
   return (
     <div>
-      <ProjectsCarousel projects={exProjectsList} />
+      <ProjectsPage projects={projectsList} />
     </div>
   );
 }