feat: revamp Enterprise page

app/[locale]/enterprise/_components/CaseCard.tsx

@@ -0,0 +1,27 @@
+import { Card } from "@/components/ui/card"
+
+import { cn } from "@/lib/utils/cn"
+
+import type { Case } from "../types"
+
+type CaseCardProps = {
+  caseStudy: Case
+  className?: string
+}
+
+const CaseCard = ({
+  caseStudy: { name, content },
+  className,
+}: CaseCardProps) => (
+  <Card
+    className={cn(
+      "space-y-1 rounded-4xl border bg-background p-6 shadow-window-box",
+      className
+    )}
+  >
+    <h3 className="text-xl">{name}</h3>
+    <p className="text-body-medium">{content}</p>
+  </Card>
+)
+
+export default CaseCard

app/[locale]/enterprise/_components/CasesColumn.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils/cn"
+
+import type { Case } from "../types"
+
+import CaseCard from "./CaseCard"
+
+const CasesColumn = ({
+  cases,
+  className,
+}: {
+  cases: Case[]
+  className?: string
+}) => (
+  <div className={cn("flex w-full flex-col gap-4", className)}>
+    {cases.map((caseStudy, index) => (
+      <CaseCard key={index} caseStudy={caseStudy} />
+    ))}
+  </div>
+)
+
+export default CasesColumn

app/[locale]/enterprise/_components/CasesSwiper.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import type { Case } from "../types"
+
+import CaseCard from "./CaseCard"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+const CasesSwiper = ({ cases }: { cases: Case[] }) => {
+  const slidesPerView = useBreakpointValue({
+    base: 1.2,
+    sm: 2.2,
+  })
+
+  return (
+    <Swiper spaceBetween={8} slidesPerView={slidesPerView}>
+      {cases.map((caseStudy) => (
+        <SwiperSlide
+          key={caseStudy.name}
+          className="first:ms-4 [&:last-child_div]:w-[calc(100%-2rem)]"
+        >
+          <CaseCard
+            caseStudy={caseStudy}
+            className="h-full w-full !shadow-none"
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
+
+export default CasesSwiper

app/[locale]/enterprise/_components/FeatureCard.tsx

@@ -0,0 +1,59 @@
+import dynamic from "next/dynamic"
+
+import { Card } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { cn } from "@/lib/utils/cn"
+
+import type { Feature } from "../types"
+
+const FallbackIcon = () => <Skeleton className="size-16" />
+
+const IconComponents = {
+  ExtraSecurity: dynamic(
+    () => import("@/components/icons/extra-security.svg"),
+    { loading: () => <FallbackIcon /> }
+  ),
+  FutureProofing: dynamic(
+    () => import("@/components/icons/future-proofing.svg"),
+    { loading: () => <FallbackIcon /> }
+  ),
+  BetterUX: dynamic(() => import("@/components/icons/better-ux.svg"), {
+    loading: () => <FallbackIcon />,
+  }),
+  CheaperTransactions: dynamic(
+    () => import("@/components/icons/cheaper-transactions.svg"),
+    { loading: () => <FallbackIcon /> }
+  ),
+}
+
+type IconComponent = keyof typeof IconComponents
+
+const FeatureCard = ({
+  feature: { header, content, iconName },
+  className,
+}: {
+  feature: Feature
+  className?: string
+}) => {
+  const Icon = IconComponents[iconName as IconComponent]
+  return (
+    <Card
+      key={header}
+      className={cn(
+        "space-y-4 rounded-4xl border bg-background px-6 py-8 shadow-window-box",
+        className
+      )}
+    >
+      <Icon className="text-7xl text-primary" />
+      <h3 className="text-xl">{header}</h3>
+      {content.map((p, i) => (
+        <p key={i} className="mb-8 last:mb-0">
+          {p}
+        </p>
+      ))}
+    </Card>
+  )
+}
+
+export default FeatureCard

app/[locale]/enterprise/_components/FeaturesSwiper.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import type { Feature } from "../types"
+
+import FeatureCard from "./FeatureCard"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
+const FeaturesSwiper = ({ features }: { features: Feature[] }) => {
+  const slidesPerView = useBreakpointValue({
+    base: 1.1,
+    sm: 1.5,
+  })
+
+  return (
+    <Swiper spaceBetween={8} slidesPerView={slidesPerView}>
+      {features.map((feature) => (
+        <SwiperSlide
+          key={feature.header}
+          className="first:ms-4 [&:last-child_div]:me-8"
+        >
+          <FeatureCard feature={feature} className="h-full !shadow-none" />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  )
+}
+
+export default FeaturesSwiper

app/[locale]/enterprise/constants.ts

@@ -0,0 +1,3 @@
+// TODO: Confirm
+export const ENTERPRISE_MAILTO =
+  "mailto:enterprise@ethereum.org?subject=Enterprise%20inquiry"