Agency Portfolio Page

Create a creative agency portfolio page for "Forge & Co." showcasing their best client work with filterable categories and detailed case study previews:

1. NAVIGATION BAR
- Logo: "Forge & Co." with anvil icon mark
- Links: Work (active, underlined), Services, About, Insights, Careers
- Right side: "Start a Project" CTA button (solid #111827 dark)
- Minimal white background, no border — clean separation through whitespace

2. HERO SECTION (50vh, minimal)
- Large headline: "Work That Works"
- Subheadline: "We build brands, websites, and digital products that drive measurable results"
- Animated counter row (counts up on scroll):
  - "180+ Projects Delivered" · "94% Client Retention" · "12 Industry Awards" · "8 Years Running"
- No background image — clean white with #111827 dark text
- Subtle horizontal rule below

3. FILTER BAR (sticky below nav on scroll)
- Horizontal pill-style filter buttons:
  - All (default, selected), Branding, Web Design, E-commerce, Mobile Apps, Digital Marketing, Product Design
- Active filter: #111827 dark background with white text
- Inactive: transparent with #6B7280 gray text and border
- Results count: "Showing 24 projects"
- View toggle: Grid view (default) / List view — small icon buttons on right
- Smooth filter transition with fade-in animation

4. PROJECT GRID (masonry layout, 3 columns)
- Each project card:
  - Full-bleed project image (16:10 aspect ratio for variety, some 1:1)
  - Hover overlay (#111827 at 90% opacity) reveals:
    - Project title (white, bold)
    - Client name
    - Category tag pill
    - "View Case Study →" link
  - Subtle scale-up (1.02) on hover

- Project 1: "Solaris Rebrand" — Solaris Energy — Branding — Hero image: bold yellow brand identity system
- Project 2: "Bloom E-commerce" — Bloom Skincare — E-commerce + Web Design — Product page with soft pink tones
- Project 3: "Nexus Dashboard" — Nexus Finance — Product Design — Dark-mode financial dashboard screenshot
- Project 4: "Wander App" — Wander Travel — Mobile Apps — Phone mockup with map-based travel interface
- Project 5: "Crest Brewing" — Crest Craft Beer — Branding + Web Design — Brewery website with earthy tones
- Project 6: "Pulse Fitness" — Pulse Gym — Digital Marketing + Web Design — High-energy landing page
- Project 7: "Arborist" — Arborist Consulting — Branding — Minimal green brand identity on white
- Project 8: "Kindred" — Kindred Community — Web Design — Community platform with warm gradients
- Project 9: "Volt EV" — Volt Motors — E-commerce + Branding — Electric vehicle configurator page
- Project 10: "Nourish" — Nourish Meal Kits — E-commerce — Recipe and meal kit product page
- Project 11: "StudioX" — StudioX Coworking — Web Design + Digital Marketing — Membership and booking site
- Project 12: "Clarity" — Clarity Health — Mobile Apps + Product Design — Health tracking app screens

5. FEATURED CASE STUDY (full-width breakout section)
- Appears after first 6 projects in the grid
- Dark background (#111827)
- Split layout: large project image left (55%), content right (45%)
- Client logo (white version)
- Headline: "How We Helped Solaris Energy Increase Leads by 340%"
- Brief: "A complete rebrand and website redesign that repositioned Solaris from a regional installer to a national clean energy leader."
- Results metrics (3 columns):
  - "+340% qualified leads"
  - "+127% organic traffic"
  - "2.8s → 0.9s load time"
- "Read Full Case Study" button (white outline)

6. CLIENT LOGO STRIP
- Headline: "Trusted by Forward-Thinking Brands"
- Horizontal scrolling marquee of 16 grayscale client logos
- Logos colorize on hover
- Two rows if needed, auto-scrolling in opposite directions

7. SERVICES CROSS-SELL (3-column cards)
- Headline: "What We Can Do for You"
- Card 1: "Brand Strategy & Identity" — "From naming to full visual systems" — Icon: palette — Link: /services/branding
- Card 2: "Web Design & Development" — "Websites that convert visitors into customers" — Icon: browser — Link: /services/web
- Card 3: "Digital Marketing" — "SEO, PPC, and content that drives growth" — Icon: trending-up — Link: /services/marketing
- Each card: icon, title, one-line description, "Learn More →" link
- Light gray background (#F9FAFB)

8. RESULTS SECTION
- Headline: "The Numbers Speak"
- 4 large stat cards in a row:
  - "$42M+" — "Revenue generated for clients"
  - "3.2x" — "Average ROI on web projects"
  - "18" — "Industries served"
  - "4.9★" — "Client satisfaction (Clutch)"
- Each stat animates counting up on scroll-into-view

9. CTA SECTION
- Clean white background
- Large centered text: "Have a Project in Mind?"
- Subheadline: "We'd love to hear about it. Let's talk."
- Two buttons: "Start a Project" (solid dark #111827) and "View Our Process" (outline)
- Below: "Or email us directly: hello@forgeandco.com"

10. FOOTER
- Columns: Work, Services, Company, Connect
- Social: LinkedIn, Instagram, Dribbble, Behance, Twitter
- "Clutch Top Agency 2026" badge
- © 2026 Forge & Co. Creative Agency

Design: Minimal, portfolio-first. Monochromatic palette: #111827 (charcoal dark), #374151 (medium gray), #6B7280 (light gray text), #F9FAFB (light sections). Accent: none — the client work provides all the color. Typography: Space Grotesk for headings, Inter for body. Masonry grid with varied image sizes for visual rhythm. Generous whitespace between sections (120px+). Hover effects are refined — subtle scale and opacity transitions (300ms ease).

Responsive: On tablet, grid becomes 2 columns. On mobile, grid becomes single column. Filter bar scrolls horizontally. Featured case study stacks vertically (image on top). Client logos reduce to single row. Stats cards become 2x2 grid. Sticky "Start a Project" button at bottom on mobile.