feat: add Cases swiper/case/loaders

use hanging cards

Author: wackerow

app/[locale]/enterprise/SwiperHangerLoading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const SwiperHangerLoading = () => (
+  <div className="flex w-full gap-2">
+    <Skeleton className="ms-4 h-80 w-[85vw] shrink-0 rounded-4xl" />
+    <Skeleton className="h-full w-full rounded-e-none rounded-s-4xl" />
+  </div>
+)
+
+export default SwiperHangerLoading

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) => (
+      <CaseCard key={caseStudy.name} caseStudy={caseStudy} />
+    ))}
+  </div>
+)
+
+export default CasesColumn

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

@@ -0,0 +1,25 @@
+"use client"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import type { Case } from "../types"
+
+import CaseCard from "./CaseCard"
+
+const CasesSwiper = ({ cases }: { cases: Case[] }) => (
+  <Swiper spaceBetween={8} slidesPerView={1.2}>
+    {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

@@ -30,11 +30,12 @@ const IconComponents = {
 type IconComponent = keyof typeof IconComponents
 
 const FeatureCard = ({
-  header,
-  content,
-  iconName,
+  feature: { header, content, iconName },
   className,
-}: Feature & { className?: string }) => {
+}: {
+  feature: Feature
+  className?: string
+}) => {
   const Icon = IconComponents[iconName as IconComponent]
   return (
     <Card

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

@@ -6,20 +6,14 @@ import type { Feature } from "../types"
 
 import FeatureCard from "./FeatureCard"
 
-const FeaturesSwiper = ({
-  features,
-  className,
-}: {
-  features: Feature[]
-  className?: string
-}) => (
-  <Swiper className={className} spaceBetween={8} slidesPerView={1.1}>
+const FeaturesSwiper = ({ features }: { features: Feature[] }) => (
+  <Swiper spaceBetween={8} slidesPerView={1.1}>
     {features.map((feature) => (
       <SwiperSlide
         key={feature.header}
         className="first:ms-4 [&:last-child_div]:me-8"
       >
-        <FeatureCard {...feature} className="h-full !shadow-none" />
+        <FeatureCard feature={feature} className="h-full !shadow-none" />
       </SwiperSlide>
     ))}
   </Swiper>

app/[locale]/enterprise/page.tsx

@@ -37,46 +37,28 @@ import Walmart from "@/components/icons/enterprise/walmart.svg"
 import WFP from "@/components/icons/enterprise/wfp.svg"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Card } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 
 import { cn } from "@/lib/utils/cn"
 import { getMetadata } from "@/lib/utils/metadata"
 
+import CasesColumn from "./_components/CasesColumn"
 import FeatureCard from "./_components/FeatureCard"
-import type { Case, Feature } from "./types"
+import SwiperHangerLoading from "./SwiperHangerLoading"
+import type { Case, EcosystemPlayer, Feature } from "./types"
 
 import EthGlyph from "@/public/images/assets/svgs/eth-diamond-rainbow.svg"
 import heroImage from "@/public/images/heroes/enterprise-hero-white.png"
 
 const FeaturesSwiper = dynamic(() => import("./_components/FeaturesSwiper"), {
-  ssr: false,
-  loading: () => (
-    <div className="flex w-full gap-2">
-      <Skeleton className="ms-4 h-80 w-[85vw] shrink-0 rounded-4xl" />
-      <Skeleton className="h-full w-full rounded-e-none rounded-s-4xl" />
-    </div>
-  ),
+  // ssr: false,
+  loading: () => <SwiperHangerLoading />,
+})
+
+const CasesSwiper = dynamic(() => import("./_components/CasesSwiper"), {
+  // ssr: false,
+  loading: () => <SwiperHangerLoading />,
 })
-const CasesColumn = ({
-  cases,
-  className,
-}: {
-  cases: Case[]
-  className?: string
-}) => (
-  <div className={cn("flex w-full flex-col gap-4", className)}>
-    {cases.map(({ name, content }) => (
-      <Card
-        key={name}
-        className="space-y-1 rounded-4xl border bg-background p-6 shadow-window-box"
-      >
-        <h3 className="text-xl">{name}</h3>
-        <p className="text-body-medium">{content}</p>
-      </Card>
-    ))}
-  </div>
-)
 
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const { locale } = await params
@@ -180,12 +162,6 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
     },
   ]
 
-  type EcosystemPlayer = {
-    name: string
-    Logo: React.FC<React.SVGProps<SVGElement>>
-    className?: string
-  }
-
   const players: EcosystemPlayer[] = [
     { name: "Adidas", Logo: Adidas, className: "scale-105 origin-bottom" },
     { name: "Azure", Logo: Azure, className: "-translate-y-1" },
@@ -282,11 +258,12 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           <div className="-mx-4 -my-6 flex py-6 md:hidden">
             <FeaturesSwiper features={features} />
           </div>
+
           <div className="grid grid-cols-1 gap-2 max-md:hidden sm:grid-cols-2 md:gap-6 xl:grid-cols-4">
             {features.map((feature) => (
               <FeatureCard
                 key={feature.header}
-                {...feature}
+                feature={feature}
                 className="h-full"
               />
             ))}
@@ -343,9 +320,21 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
               </div>
             ))}
           </div>
+
+          <div
+            className="w-screen ring ring-offset-[-2px]"
+            style={{
+              mask: `linear-gradient(to right, transparent 1rem, white 2rem, white calc(100% - 2rem), transparent calc(100% - 1rem)`,
+            }}
+          >
+            <div className="-my-6 flex px-4 py-6 md:hidden">
+              <CasesSwiper cases={cases} />
+            </div>
+          </div>
+
           <div
             data-label="case-studies"
-            className="grid w-full max-w-screen-lg grid-cols-1 gap-4 px-4 md:grid-cols-3 md:px-6"
+            className="grid w-full max-w-screen-lg grid-cols-1 gap-4 px-4 max-md:hidden md:grid-cols-3 md:px-6"
           >
             <CasesColumn cases={cases.slice(0, 2)} />
             <CasesColumn cases={cases.slice(2, 4)} />

app/[locale]/enterprise/types.ts

@@ -8,3 +8,9 @@ export type Feature = {
   content: string[]
   iconName: string
 }
+
+export type EcosystemPlayer = {
+  name: string
+  Logo: React.FC<React.SVGProps<SVGElement>>
+  className?: string
+}

src/components/ui/swiper.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, VariantProps } from "class-variance-authority"
 import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules"