Merge pull request #42 from codersforcauses/issue-33-Create_the_last_three_sections_of_the_landing_page

Issue 33 create the last three sections of the landing page

Author: laurenpudz

client/public/heart.png

@@ -0,0 +1,125 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+
+import { UiEvent as EventType } from "@/hooks/useEvents";
+
+type EventCarouselProps = {
+  items: EventType[];
+};
+
+const GAP = 40;
+
+export default function EventCarousel({ items }: EventCarouselProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const firstItemRef = useRef<HTMLDivElement>(null);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visibleCount, setVisibleCount] = useState(3);
+  const [itemWidth, setItemWidth] = useState(0);
+
+  const maxIndex = Math.max(items.length - visibleCount, 0);
+  const slideLeft = () => {
+    setCurrentIndex((prev) => Math.max(prev - 1, 0));
+  };
+  const slideRight = () => {
+    setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));
+  };
+  const translateX = -(currentIndex * (itemWidth + GAP));
+
+  /* Observe item width */
+  useEffect(() => {
+    if (!firstItemRef.current) return;
+    const observer = new ResizeObserver(() => {
+      const width = firstItemRef.current?.clientWidth ?? 0;
+      setItemWidth(width);
+    });
+    observer.observe(firstItemRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const updateVisibleCount = () => {
+      if (window.innerWidth < 768) {
+        setVisibleCount(1);
+      } else {
+        setVisibleCount(3);
+      }
+    };
+    updateVisibleCount();
+    window.addEventListener("resize", updateVisibleCount);
+    return () => window.removeEventListener("resize", updateVisibleCount);
+  }, []);
+
+  return (
+    <div className="container mx-auto rounded-lg bg-primary-foreground px-4 py-8 lg:px-12">
+      <div className="flex items-center justify-between px-10">
+        <div className="flex items-center">
+          <h2 className="font-jersey10 text-4xl tracking-wide text-white">
+            Upcoming Events
+          </h2>
+
+          <div className="ml-5 flex gap-3 text-lg text-white/60">
+            <ChevronLeft
+              className={`hover:text-white ${
+                currentIndex === 0 ? "opacity-40" : "cursor-pointer"
+              }`}
+              onClick={slideLeft}
+            />
+            <ChevronRight
+              className={`hover:text-white ${
+                currentIndex === maxIndex ? "opacity-40" : "cursor-pointer"
+              }`}
+              onClick={slideRight}
+            />
+          </div>
+        </div>
+
+        <Link href="/events" className="font-jersey10">
+          See More
+        </Link>
+      </div>
+
+      <div className="mt-10 px-10">
+        <div ref={viewportRef} className="overflow-hidden">
+          <div
+            className="flex transition-transform duration-300 ease-out"
+            style={{
+              gap: GAP,
+              transform: `translateX(${translateX}px)`,
+            }}
+          >
+            {items.map((event, index) => (
+              <div
+                key={event.id}
+                ref={index === 0 ? firstItemRef : undefined}
+                className="w-full flex-shrink-0 md:w-[calc((100%-80px)/3)]"
+              >
+                <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
+                  <Image
+                    src={event.coverImage}
+                    alt={event.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                <h3 className="mt-6 font-firaCode text-lg font-semibold tracking-wide text-white">
+                  {event.name}
+                </h3>
+
+                {/* Needs proper processing and laying out */}
+                <p className="text-sm tracking-wide text-white/70">
+                  {event.startTime}
+                </p>
+
+                <div className="mt-3 w-full border-b border-white/20" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/eventCarousel.tsx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+
+export type eventHighlightCardImage = {
+  url: string;
+  width: number;
+  height: number;
+  alt: string;
+};
+
+export type eventHighlightCardType = {
+  id: number;
+  title: string;
+  description: string;
+  type: string;
+  image: eventHighlightCardImage | null;
+  row: number;
+};
+
+// Purple card header section.
+const renderCardHeader = (card: eventHighlightCardType) => {
+  // Renders differently if we want the techno border.
+  if (card.type === "special-border") {
+    return (
+      <div
+        style={{
+          clipPath:
+            "polygon(0% 0%, 71% 0%, 78% 7px, 100% 7px, 100% calc(100% - 8px), 0% calc(100% - 8px))",
+        }}
+        className="relative bg-accent"
+      >
+        <div
+          style={{
+            clipPath:
+              "polygon(1px 1px, calc(71% - 1px) 1px, calc(78% - 1px) 8px, calc(100% - 1px) 8px, calc(100% - 1px) calc(100% - 8px - 1px), 1px calc(100% - 8px - 1px))",
+          }}
+          className="bg-dark_alt p-4 pt-3 font-jersey10 text-2xl font-semibold"
+        >
+          {card.title}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-accent bg-dark_alt px-4 py-2 font-jersey10 text-2xl font-semibold">
+      {card.title}
+    </div>
+  );
+};
+
+export function EventHighlightCard({
+  id,
+  title,
+  description,
+  type,
+  image,
+  row,
+}: eventHighlightCardType) {
+  return (
+    <div key={id} className="flex flex-col">
+      {renderCardHeader({ id, title, description, type, image, row })}
+
+      <div className="mt-4 rounded-md border border-muted bg-landingCard p-4 text-gray-200">
+        <div className="flex gap-2">
+          <span>▶</span>
+          <p>{description}</p>
+          {image && (
+            <Image
+              src={image.url}
+              width={image.width}
+              height={image.height}
+              alt={image.alt}
+              className="m-3 size-20 [image-rendering:pixelated]"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}