'use client' import { useState } from 'react' import Image from 'next/image' import { Briefcase, GraduationCap, Theater } from 'lucide-react' export default function SpacesSection() { const [activeSpace, setActiveSpace] = useState<'classes' | 'clubs' | 'work'>('classes') const spaces = [ { id: 'classes', label: 'classes', icon: GraduationCap, color: 'text-gray-500 hover:text-gray-900', activeColor: 'text-gray-900', image: 'https://arc.net/_next/image?url=%2Fstudents%2Fspaces%2Fwork.jpg&w=3840&q=75' }, { id: 'clubs', label: 'clubs', icon: Theater, color: 'text-gray-500 hover:text-gray-900', activeColor: 'text-gray-900', image: '/placeholder.svg' }, { id: 'work', label: 'work', icon: Briefcase, color: 'text-gray-500 hover:text-green-600', activeColor: 'text-green-600', image: '/placeholder.svg' } ] return (

{/* Heading Section */}

Create separate Spaces for{' '} {spaces.map((space, index) => ( setActiveSpace(space.id)} > {space.label} {index < spaces.length - 1 && ( , )} {index === spaces.length - 1 && ( , and the rest of your life )} ))}

Arc is the first browser that organizes your busy life. Everything finds its place — no more navigating endless windows and tabs.

{/* Browser Preview */}

space.id === activeSpace)?.image || '/placeholder.svg'} alt="Browser preview" width={1200} height={800} className="w-full" priority />

) }

Spaces Area

Readymade components Hero,Features,Footerfor your next project