Agency
Agency — Portfolio Page
Copy-paste layout brief covering Navigation Bar, Hero Section, Filter Bar and Project Grid — hand it to ChatGPT, Claude, or v0 as-is.
Agency — Portfolio Page is a copy-ready build prompt for agency pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
Everything on this page — the summary, the category and the how-to — is written by HowToPrompts; the link below goes to the original project.
| Use case | Agency |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
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.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts