From f39b89c592c8d021e0058555c5630f80b564fcff Mon Sep 17 00:00:00 2001 From: kailash-dev Date: Fri, 17 Jul 2026 23:40:35 +0530 Subject: [PATCH] feat: redesign work page with premium bento grid layout --- src/features/work/work-page.tsx | 611 +++++++++++++++++++------------- 1 file changed, 372 insertions(+), 239 deletions(-) diff --git a/src/features/work/work-page.tsx b/src/features/work/work-page.tsx index 1a6e2e1..d3640cd 100644 --- a/src/features/work/work-page.tsx +++ b/src/features/work/work-page.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { useState, useMemo } from "react"; -import { ArrowRight, ArrowUpRight, Search, X } from "lucide-react"; +import { ArrowRight, ArrowUpRight, Calendar, Search, X } from "lucide-react"; import { CaseStudyBadge } from "@/components/common/case-study-badge"; import { CaseStudyVisual } from "@/components/common/case-study-visual"; @@ -12,9 +12,302 @@ import { Section } from "@/components/common/section"; import { Heading, Text } from "@/components/common/typography"; import { PageHeader } from "@/components/layout/page-header"; import { caseStudies } from "@/data"; +import { siteConfig } from "@/config/site"; +import { cn } from "@/lib/utils"; +import type { CaseStudy } from "@/types"; const FILTERS = ["All", "Founder Product", "Client Engagement", "AI & SaaS", "IoT & Hardware"]; +// Utility to determine responsive bento grid spans for case studies in the default showcase view +const getGridSpan = (slug: string): string => { + switch (slug) { + case "safework-global": + return "lg:col-span-2 md:col-span-2"; + case "whatsapp-profile-sync": + return "lg:col-span-1 md:col-span-1"; + case "jobfit-ai": + return "lg:col-span-1 md:col-span-1"; + case "vyaparpost": + return "lg:col-span-2 md:col-span-2"; + case "vendor-infra": + return "lg:col-span-3 md:col-span-2"; + case "solar-monitoring": + return "lg:col-span-1 md:col-span-1"; + case "graphic-design-platform": + return "lg:col-span-2 md:col-span-1"; + case "digital-invoice": + return "lg:col-span-1 md:col-span-1"; + case "vipra-community": + return "lg:col-span-1 md:col-span-1"; + case "nstream-connect": + return "lg:col-span-1 md:col-span-1"; + case "raspberry-pi-monitoring": + return "lg:col-span-2 md:col-span-1"; + default: + return "lg:col-span-1 md:col-span-1"; + } +}; + +type BentoCardProps = { + study: CaseStudy; + className?: string; + isWide?: boolean; + isFull?: boolean; +}; + +// Interactive Bento Card with a custom hover cursor-glow overlay +export function BentoCard({ study, className, isWide = false, isFull = false }: BentoCardProps) { + const [coords, setCoords] = useState({ x: 0, y: 0 }); + const [isHovered, setIsHovered] = useState(false); + + const handleMouseMove = (e: React.MouseEvent) => { + const rect = e.currentTarget.getBoundingClientRect(); + setCoords({ + x: e.clientX - rect.left, + y: e.clientY - rect.top, + }); + }; + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + className={cn( + "group relative flex flex-col overflow-hidden rounded-2xl border border-border/40 bg-card/30 backdrop-blur-md transition-all duration-300 hover:border-foreground/15 hover:shadow-lg dark:hover:shadow-black/20", + isWide && "lg:flex-row lg:col-span-2", + isFull && "lg:flex-row lg:col-span-3", + className + )} + style={{ + ...({ + "--mouse-x": `${coords.x}px`, + "--mouse-y": `${coords.y}px`, + } as React.CSSProperties), + }} + > + {/* Dynamic Cursor Glow Overlay */} +
+ + {isWide || isFull ? ( + <> + {/* Layout for wide or full-width cards: split on desktop */} +
+
+
+ + {study.year && ( + {study.year} + )} +
+ + + {study.title} + + {study.liveUrl && ( + + + + )} + + + {study.summary} + + + {/* Highlight outcomes in wide cards */} +
    + {study.outcomes.slice(0, isFull ? 3 : 2).map((outcome) => ( +
  • + + {outcome} +
    • + ))} +
+
+ +
+ {/* Tech stack tags */} +
+ {study.tech.slice(0, 5).map((tech) => ( + + {tech} + + ))} +
+ + Read case study + + +
+
+ +
+
+ +
+
+ + ) : ( + <> + {/* Standard vertical card layout */} +
+
+ +
+
+ +
+
+
+ + {study.year && ( + {study.year} + )} +
+ + + {study.title} + + + + {study.summary} + +
+ +
+
+ {study.tech.slice(0, 4).map((tech) => ( + + {tech} + + ))} +
+ + Read case study + + +
+
+ + )} +
+ ); +} + +// Custom CTA card placed inside the grid to generate discovery calls +export function CTAContactCard({ className }: { className?: string }) { + const [coords, setCoords] = useState({ x: 0, y: 0 }); + const [isHovered, setIsHovered] = useState(false); + + const handleMouseMove = (e: React.MouseEvent) => { + const rect = e.currentTarget.getBoundingClientRect(); + setCoords({ + x: e.clientX - rect.left, + y: e.clientY - rect.top, + }); + }; + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + className={cn( + "group relative flex flex-col justify-between overflow-hidden rounded-2xl border bg-foreground text-background dark:bg-zinc-900/50 dark:text-foreground border-foreground/10 dark:border-border/60 p-6 md:p-8 transition-all duration-300 hover:shadow-lg dark:hover:shadow-black/20", + className + )} + style={{ + ...({ + "--mouse-x": `${coords.x}px`, + "--mouse-y": `${coords.y}px`, + } as React.CSSProperties), + }} + > + {/* Decorative Grid Pattern */} +
+ + {/* Hover glow overlay */} +
+ +
+ + Let's Collaborate + + + Have a project in mind? + + + I partner with founders to build high-performance products from concept to launch. Let's audit your roadmaps or architecture. + +
+ +
+ + Get in touch + + + + + Book directly on Calendly + +
+
+ ); +} + export function WorkPage() { const [activeFilter, setActiveFilter] = useState("All"); const [searchQuery, setSearchQuery] = useState(""); @@ -57,15 +350,6 @@ export function WorkPage() { const hasActiveFilters = activeFilter !== "All" || searchQuery.trim() !== ""; - // Split matches when there are no active filters - const featured = useMemo(() => { - return filteredStudies.filter((study) => study.featured); - }, [filteredStudies]); - - const more = useMemo(() => { - return filteredStudies.filter((study) => !study.featured); - }, [filteredStudies]); - return ( <> - {/* Interactive Controls Bar */} -
+ {/* Interactive Controls Bar — Sticky top navigation */} +
-
+
{/* Search Input */}
setSearchQuery(e.target.value)} - className="w-full rounded-lg border border-border bg-muted/40 py-2.5 pl-10 pr-10 text-sm placeholder:text-muted-foreground focus:border-foreground/40 focus:bg-background focus:outline-none focus:ring-1 focus:ring-foreground/20 transition-all" + className="w-full rounded-lg border border-border bg-muted/40 py-2 pl-10 pr-10 text-sm placeholder:text-muted-foreground focus:border-foreground/40 focus:bg-background focus:outline-none focus:ring-1 focus:ring-foreground/20 transition-all" /> {searchQuery && (
{/* Filter Pills */} -
+
{FILTERS.map((filter) => { const isActive = activeFilter === filter; return ( @@ -118,18 +407,18 @@ export function WorkPage() {
-
+
{/* Main Grid Render */} - {hasActiveFilters ? ( -
- - -
- - Search Results ({filteredStudies.length}) - - {(activeFilter !== "All" || searchQuery) && ( +
+ + {hasActiveFilters ? ( + <> + +
+ + Search Results ({filteredStudies.length}) + - )} -
- - - {filteredStudies.length === 0 ? ( - -
- - No projects found matching your search criteria. - -
- ) : ( -
    - {filteredStudies.map((study, index) => ( -
  • - -
    - -
    -
    - - - - {study.title} - - - - {study.summary} - -
    -
    -
    - {study.tech.slice(0, 4).map((item) => ( - - {item} - {study.tech.indexOf(item) < - Math.min(3, study.tech.length - 1) - ? " ·" - : ""} - - ))} -
    - - Read case study - - -
    -
    -
    -     -
    • - ))} -
- )} - -
- ) : ( - <> - {/* Default Curated Sections */} - {featured.length > 0 && ( -
- + + {filteredStudies.length === 0 ? ( - - Featured - +
+ + No projects found matching your search criteria. + + +
-
    - {featured.map((study, index) => ( -
  • - -
    - -
    - - - - {study.title} - - {study.liveUrl ? ( - - - - ) : null} - - - {study.summary} - -
      - {study.outcomes.slice(0, 2).map((outcome) => ( -
    • - - {outcome} -
      • - ))} -
    - - Read case study - - -
    -
    -     -
    • + ) : ( + /* Uniform column grid for search results */ +
    + {filteredStudies.map((study, index) => ( + + + ))} -
- -
- )} +
+ )} + + ) : ( + /* Curated editorial Bento Grid default showcase */ +
+ {caseStudies.map((study, index) => { + const isWide = + study.slug === "safework-global" || + study.slug === "vyaparpost" || + study.slug === "graphic-design-platform" || + study.slug === "raspberry-pi-monitoring"; + const isFull = study.slug === "vendor-infra"; + const spanClass = getGridSpan(study.slug); - {more.length > 0 && ( -
- - - - More projects - - - Additional production work across employment and product - engineering engagements. - - + return ( + + + + ); + })} -
    - {more.map((study, index) => ( -
  • - -
    - - - - {study.title} - - - - {study.summary} - -
    - {study.tech.slice(0, 4).map((item) => ( - - {item} - {study.tech.indexOf(item) < - Math.min(3, study.tech.length - 1) - ? " ·" - : ""} - - ))} -
    - - Read case study - - -
    -     -
    • - ))} -
- -
+ {/* Seamlessly integrated CTA Call Card */} + + + +
)} - - )} + +
); }