A polished, production-grade frontend web application inspired by Artsy.net, built with Next.js, TypeScript, Tailwind CSS, and modern UI best practices.
- Clean, Art-Forward Design: Minimal, elegant aesthetic with white-space rich layouts
- Responsive Design: Beautifully adapts to desktop, tablet, and mobile screens
- Modern Components: Reusable components for navigation, hero sections, artwork cards, artist profiles, and more
- Search Functionality: Typeahead search with real-time results
- Smooth Animations: Framer Motion animations for fade-ins and slide transitions
- SEO Optimized: Comprehensive metadata and accessible markup
- Type-Safe: Full TypeScript implementation
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Image Optimization: Next.js Image component
art-website/
├── app/ # Next.js App Router pages
│ ├── artworks/ # Artwork listing and detail pages
│ ├── artists/ # Artist listing and detail pages
│ ├── collections/ # Collection listing and detail pages
│ ├── search/ # Search results page
│ ├── layout.tsx # Root layout with navigation and footer
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── Navigation.tsx # Main navigation with dropdowns
│ ├── Hero.tsx # Hero section component
│ ├── ArtworkCard.tsx # Artwork card component
│ ├── ArtworkGrid.tsx # Responsive grid layout
│ ├── ArtistProfile.tsx # Artist profile component
│ ├── SearchBar.tsx # Search bar with typeahead
│ ├── CollectionShowcase.tsx # Collection showcase component
│ └── Footer.tsx # Footer component
├── lib/ # Utility functions and data
│ └── data.ts # Dummy data for artworks, artists, etc.
├── types/ # TypeScript type definitions
│ └── index.ts # Type definitions
└── public/ # Static assets
- Node.js 18+
- npm, yarn, or pnpm
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
- Sticky navigation bar with dropdown menus
- Responsive mobile menu
- Smooth animations using Framer Motion
- Accessible keyboard navigation
- Responsive grid layouts (2, 3, or 4 columns)
- Hover effects and smooth transitions
- Image optimization with Next.js Image
- Category filtering
- Real-time typeahead/autocomplete
- Searches across artworks, artists, and collections
- Visual previews in dropdown
- Full search results page
- Biography and metadata display
- Featured artworks showcase
- Responsive image layouts
- Curated collection showcases
- Collection detail pages with artwork grids
- Curator information
The design follows a white-space rich, art-gallery aesthetic with:
- Soft shadows: Subtle elevation using
shadow-softandshadow-soft-lg - Balanced typography: Light font weights with generous spacing
- Fluid grids: Responsive grid layouts that adapt beautifully
- Minimal color palette: Primarily black, white, and grays with accent colors
- Smooth transitions: Hover effects and state changes
The application uses dummy data structures defined in lib/data.ts:
- Artworks: Images, titles, artists, metadata, prices
- Artists: Names, biographies, nationalities, images
- Categories: Art categories for filtering
- Collections: Curated collections with descriptions
In production, these would be replaced with API calls to a backend service.
- Comprehensive metadata for all pages
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Focus states for interactive elements
- Alt text for all images
- Next.js Image optimization
- Server components where appropriate
- Code splitting and lazy loading
- Optimized animations
- Integration with real API endpoints
- User authentication and accounts
- Shopping cart and checkout
- Artist and collection management
- Advanced filtering and sorting
- Image zoom and lightbox
- Social sharing features
This project is open source and available for use.