Merge pull request #15807 from ethereum/developers-rebrand

feat: /developers rebrand

Author: corwintines

app/[locale]/developers/_components/BuilderCard.tsx

@@ -0,0 +1,51 @@
+import { Image } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Card } from "@/components/ui/card"
+import { Tag } from "@/components/ui/tag"
+
+import { cn } from "@/lib/utils/cn"
+
+import type { DevelopersPath } from "../types"
+
+type BuildCardProps = {
+  path: DevelopersPath
+  className?: string
+}
+
+const BuilderCard = ({ path, className }: BuildCardProps) => (
+  <Card className={cn("flex flex-col gap-8 rounded-4xl border p-6", className)}>
+    <Image
+      src={path.imgSrc}
+      alt={path.imgAlt}
+      className="mx-auto h-44 object-contain"
+      sizes="(max-width: 480px) calc(100vw - 6rem), 285px"
+    />
+    <div className="h-full space-y-1">
+      {path.tag && (
+        <Tag
+          status="warning"
+          size="small"
+          className="mb-0 rounded-[4px] px-1 py-px font-bold normal-case"
+        >
+          {path.tag}
+        </Tag>
+      )}
+      <h3 className="text-lg font-bold">{path.title}</h3>
+      <p className="mb-4 text-sm text-body-medium">{path.description}</p>
+    </div>
+    <ButtonLink
+      href={path.href}
+      className="sm:w-fit"
+      customEventOptions={{
+        eventCategory: "top_boxes",
+        eventAction: "click",
+        eventName: path.tag,
+      }}
+      rel="noopener"
+    >
+      {path.button}
+    </ButtonLink>
+  </Card>
+)
+
+export default BuilderCard

app/[locale]/developers/_components/BuilderSwiper/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import type { DevelopersPath } from "../../types"
+import BuilderCard from "../BuilderCard"
+import SpeedRunCard from "../SpeedRunCard"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+type BuilderSwiperProps = {
+  paths: DevelopersPath[]
+  speedRunDetails: {
+    title: string
+    description: string
+    ctaLabel: string
+  }
+}
+
+const BuilderSwiper = ({ paths, speedRunDetails }: BuilderSwiperProps) => {
+  const slidesPerView = useBreakpointValue({
+    base: 1.15,
+    sm: 1.6,
+  })
+
+  return (
+    <Swiper
+      spaceBetween={8}
+      slidesPerView={slidesPerView}
+      lazyPreloadPrevNext={1}
+    >
+      {paths.map((path, idx) => (
+        <SwiperSlide key={idx} className="first:ms-8">
+          <BuilderCard path={path} />
+        </SwiperSlide>
+      ))}
+      <SwiperSlide>
+        <SpeedRunCard {...speedRunDetails} className="me-16" />
+      </SwiperSlide>
+    </Swiper>
+  )
+}
+
+export default BuilderSwiper

app/[locale]/developers/_components/BuilderSwiper/lazy.tsx

@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })

app/[locale]/developers/_components/BuilderSwiper/loading.tsx

@@ -0,0 +1,14 @@
+import { Card } from "@/components/ui/card"
+import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <Card className="relative ms-8 w-[85vw] space-y-4 rounded-4xl border bg-background px-6 py-6">
+    <Skeleton data-label="banner" className="mb-6 h-44 w-full rounded-xl" />
+    <Skeleton data-label="tag" className="h-5 w-19" />
+    <Skeleton data-label="title" className="-mb-2 h-5 w-1/2" />
+    <SkeletonLines data-label="description" noOfLines={2} className="m-0 p-0" />
+    <Skeleton data-label="button" className="h-10 w-1/4" />
+  </Card>
+)
+
+export default Loading

app/[locale]/developers/_components/HackathonCard.tsx

@@ -0,0 +1,50 @@
+import { CommunityConference } from "@/lib/types"
+
+import { Image } from "@/components/Image"
+import CardImage from "@/components/Image/CardImage"
+import {
+  Card,
+  CardBanner,
+  CardContent,
+  CardHighlight,
+  CardSubTitle,
+  CardTitle,
+} from "@/components/ui/card"
+
+import EventFallback from "@/public/images/events/event-placeholder.png"
+
+type HackathonCardProps = {
+  event: CommunityConference
+  className?: string
+}
+
+const HackathonCard = ({ event, className }: HackathonCardProps) => {
+  const { title, href, description, imageUrl, formattedDate, location } = event
+  return (
+    <Card
+      href={href}
+      key={title + description}
+      customEventOptions={{
+        eventCategory: "hackathons",
+        eventAction: "click",
+        eventName: title,
+      }}
+      className={className}
+    >
+      <CardBanner className="h-36 w-full sm:w-[270px] 2xl:w-full">
+        {imageUrl ? (
+          <CardImage src={imageUrl} />
+        ) : (
+          <Image src={EventFallback} alt="" sizes="276px" />
+        )}
+      </CardBanner>
+      <CardContent>
+        <CardTitle>{title}</CardTitle>
+        <CardSubTitle>{formattedDate} </CardSubTitle>
+        <CardHighlight>{location}</CardHighlight>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default HackathonCard

app/[locale]/developers/_components/HackathonSwiper/index.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import type { CommunityConference } from "@/lib/types"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import HackathonCard from "../HackathonCard"
+
+type HackathonSwiperProps = {
+  events: CommunityConference[]
+}
+
+const HackathonSwiper = ({ events }: HackathonSwiperProps) => (
+  <Swiper spaceBetween={16} slidesPerView={1.25}>
+    {events.map((event, idx) => (
+      <SwiperSlide key={idx} className="max-2xl:first:ms-8 max-2xl:last:pe-16">
+        <HackathonCard event={event} />
+      </SwiperSlide>
+    ))}
+  </Swiper>
+)
+
+export default HackathonSwiper

app/[locale]/developers/_components/HackathonSwiper/lazy.tsx

@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })

app/[locale]/developers/_components/HackathonSwiper/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonCardGrid } from "@/components/ui/skeleton"
+
+const Loading = () => <SkeletonCardGrid />
+
+export default Loading

app/[locale]/developers/_components/SpeedRunCard.tsx

@@ -0,0 +1,49 @@
+import { Image } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import { cn } from "@/lib/utils/cn"
+
+import speedRunEthereumImage from "@/public/images/dev-tools/speed-run-ethereum-banner.png"
+
+type SpeedRunCardProps = {
+  title: string
+  description: string
+  ctaLabel: string
+  className?: string
+}
+const SpeedRunCard = ({
+  title,
+  description,
+  ctaLabel,
+  className,
+}: SpeedRunCardProps) => (
+  <div
+    className={cn("relative h-[450px]", className)}
+    data-label="speedrunethereum-banner"
+  >
+    <Image
+      className="pointer-events-none absolute -z-[1] h-full w-screen rounded-t-4xl object-cover object-[75%_50%]"
+      src={speedRunEthereumImage}
+      alt="SpeedRunEthereum banner"
+      sizes="(max-width: 768px) 100vw, 50vw"
+    />
+    <div className="z-[1] flex flex-col space-y-4 break-words px-6 py-10 md:space-y-6 lg:p-6">
+      <h3>{title}</h3>
+      <p>{description}</p>
+      <ButtonLink
+        href="https://speedrunethereum.com/"
+        className="mt-4 sm:w-fit"
+        customEventOptions={{
+          eventCategory: "top_boxes",
+          eventAction: "click",
+          eventName: "speedrun",
+        }}
+        rel="noopener"
+      >
+        {ctaLabel}
+      </ButtonLink>
+    </div>
+  </div>
+)
+
+export default SpeedRunCard

app/[locale]/developers/_components/VideoCourseCard.tsx

@@ -0,0 +1,48 @@
+import { Image } from "@/components/Image"
+import { Card } from "@/components/ui/card"
+import { Tag } from "@/components/ui/tag"
+
+import { cn } from "@/lib/utils/cn"
+
+import type { VideoCourse } from "../types"
+
+type VideoCourseCardProps = {
+  course: VideoCourse
+  className?: string
+}
+
+const VideoCourseCard = ({ course, className }: VideoCourseCardProps) => (
+  <Card
+    href={course.href}
+    className={cn("group h-full w-fit rounded-4xl no-underline", className)}
+    customEventOptions={{
+      eventCategory: "video-courses",
+      eventAction: "click",
+      eventName: course.title,
+    }}
+  >
+    <div className="h-fit w-full overflow-hidden rounded-2xl">
+      <Image
+        src={course.imgSrc}
+        alt={course.imgAlt}
+        className="mx-auto h-44 rounded-2xl object-cover transition-transform group-hover:scale-105 group-hover:transition-transform"
+        sizes="(max-width: 480px) calc(100vw - 2rem), 300px"
+      />
+    </div>
+    <div className="h-full space-y-1">
+      <Tag
+        status="warning"
+        size="small"
+        className="mb-2 mt-4 rounded-[4px] px-1 py-0 font-bold normal-case"
+      >
+        {course.hours}
+      </Tag>
+      <h3 className="text-lg font-bold text-body group-hover:underline">
+        {course.title}
+      </h3>
+      <p className="mb-4 text-sm text-body-medium">{course.description}</p>
+    </div>
+  </Card>
+)
+
+export default VideoCourseCard