"use client" import { useId, useState } from "react" // next import Link from "next/link" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" // third-party import { cn } from "cn" import { AnimatePresence, motion, useReducedMotion } from "framer-motion" // assets import { ArrowRight, Clock, Code, Palette, PlayCircle, RotateCcw, Search, SearchX, Star, Store, } from "lucide-react" type CourseLevel = "Beginner" | "Intermediate" | "Advanced" interface Course { slug: string title: string description: string image: string category: string level: CourseLevel duration: string lessons: number rating: number learners: string instructor: string progress: number | null } interface CourseCardProps { course: Course priority?: boolean } const glass = cn( "border bg-[color-mix(in_oklab,var(--card)_62%,transparent)]", "border-[color-mix(in_oklab,var(--foreground)_8%,transparent)]", "[backdrop-filter:blur(14px)_saturate(140%)]", "shadow-[inset_0_1px_0_color-mix(in_oklab,white_55%,transparent),0_8px_30px_-12px_color-mix(in_oklab,var(--foreground)_22%,transparent)]", "dark:bg-[color-mix(in_oklab,var(--card)_55%,transparent)]", "dark:border-[color-mix(in_oklab,white_10%,transparent)]", "dark:shadow-[inset_0_1px_0_color-mix(in_oklab,white_8%,transparent),0_8px_30px_-12px_rgb(0_0_0/0.5)]" ) const courses: Course[] = [ { slug: "foundations-of-graphic-design", title: "Foundations of graphic design", description: "Learn the core principles of visual communication, typography, and layout.", image: "https://cdn.uiable.com/block/img-6.jpg", category: "Design", level: "Beginner", duration: "12 Weeks", lessons: 48, rating: 4.8, learners: "12.4k", instructor: "Sophia Laurent", progress: 45, }, { slug: "react-for-beginners", title: "React for beginners", description: "Build interactive web applications using modern React hooks and components.", image: "https://cdn.uiable.com/block/img-7.jpg", category: "Code", level: "Intermediate", duration: "8 Weeks", lessons: 36, rating: 4.9, learners: "24.1k", instructor: "Wilsen Pang", progress: 10, }, { slug: "data-analysis-with-python", title: "Data analysis with Python", description: "Master pandas, NumPy, and data visualization techniques for real-world datasets.", image: "https://cdn.uiable.com/block/img-8.jpg", category: "Business", level: "Advanced", duration: "16 Weeks", lessons: 62, rating: 4.7, learners: "18.9k", instructor: "James Raw", progress: null, }, { slug: "ux-research-essentials", title: "UX research essentials", description: "Plan interviews, run usability tests, and turn findings into product decisions.", image: "https://cdn.uiable.com/block/img-9.jpg", category: "Design", level: "Intermediate", duration: "6 Weeks", lessons: 28, rating: 4.6, learners: "9.2k", instructor: "Sophia Laurent", progress: 72, }, { slug: "scaling-node-services", title: "Scaling Node.js services", description: "Design resilient APIs, add caching layers, and ship services that survive traffic spikes.", image: "https://cdn.uiable.com/block/img-10.jpg", category: "Code", level: "Advanced", duration: "10 Weeks", lessons: 44, rating: 4.8, learners: "7.6k", instructor: "Wilsen Pang", progress: null, }, { slug: "product-marketing-fundamentals", title: "Product marketing fundamentals", description: "Position a product, write messaging that lands, and plan a launch end to end.", image: "https://cdn.uiable.com/block/img-11.jpg", category: "Business", level: "Beginner", duration: "5 Weeks", lessons: 22, rating: 4.5, learners: "14.3k", instructor: "James Raw", progress: null, }, ] const courseCategories = [ "All", ...Array.from(new Set(courses.map((course) => course.category))), ] const emptyStateCategories = [ { name: "Design & UX", icon: Palette, category: "Design" }, { name: "Tech & Coding", icon: Code, category: "Code" }, { name: "Business & Strategy", icon: Store, category: "Business" }, ] function CourseCard({ course, priority = false }: CourseCardProps) { return (

{course.level}

{course.title}

{course.description}

{course.learners} learners by {course.instructor}

) } interface EmptyStateProps { searchQuery: string onReset: () => void onSelectCategory: (category: string) => void reduce: boolean } function EmptyState({ searchQuery, onReset, onSelectCategory, reduce, }: EmptyStateProps) { return (

Oops! We couldn't find any courses.

It looks like there are no courses matching “ {searchQuery} ”. Try adjusting your search terms or explore our popular categories below.

Popular categories to explore

{emptyStateCategories.map((cat) => ( ))}

) } // ------------------------------ | GALLERY 11 | ------------------------------ // export default function Gallery11() { const headingId = useId() const reduce = Boolean(useReducedMotion()) const [activeCategory, setActiveCategory] = useState("All") const [searchQuery, setSearchQuery] = useState("") const filteredCourses = courses.filter((course) => { const matchesCategory = activeCategory === "All" || course.category === activeCategory const matchesSearch = course.title .toLowerCase() .includes(searchQuery.toLowerCase()) return matchesCategory && matchesSearch }) const resetFilters = () => { setSearchQuery("") setActiveCategory("All") } return (

Find your next course

Self-paced programmes in design, code, and business — each built and taught by someone who does the work.

{courseCategories.map((category) => ( ))}

{filteredCourses.map((course, index) => ( ))} {filteredCourses.length === 0 && ( { setSearchQuery("") setActiveCategory(category) }} reduce={reduce} /> )}

) }