To recreate "The Bold" template, you’ll want to structure your Framer project using a Vertical Stack for the main page container. The layout follows a classic "Section-Based" architecture with specific padding and alignment to achieve a modern, spacious look.

Here are the layout stacks and container details to replicate it:

1. Global Page Container

• Direction: Vertical (Stack)

• Width: Fill (100%)

• Gap: 0px (Individual sections will handle their own spacing)

• Padding: 0px

2. Navigation Bar (Pinned/Sticky)

• Layout: Horizontal Stack (Row)

• Distribution: Space Between

• Width: Fill (max-width around 1200px)

• Elements: * Left: Logo (Text/Image)

  • Right: Links (Horizontal Stack with 20-30px gap)

3. Hero Section

• Layout: Vertical Stack

• Alignment: Center

• Padding: Top 120px, Bottom 80px

• Stack Order:

  1. Sub-headline (Small Text)

  2. Main Headline (Large Display Font, H1)

  3. Featured Image (Absolute positioned or centered in stack)

  4. Social Proof Row (Horizontal Stack, Wrap enabled, Center aligned)

4. Mission Statement Section

• Layout: Vertical Stack

• Alignment: Start (Left-aligned)

• Max-Width: ~800px (to keep line length readable)

• Padding: 100px (Top/Bottom), 40px (Sides)

• Gap: 24px between Heading and Body text.

5. Services Grid

• Parent: Vertical Stack (Section Title + Grid)

• The Grid: CSS Grid or Horizontal Stack (Wrap)

• Columns: 3 Columns (1fr 1fr 1fr)

• Gap: 24px - 32px

• Individual Card Layout:

  • Vertical Stack

  • Alignment: Start

  • Padding: 32px

  • Border: 1px solid (Light Grey)

6. Projects Section (The 2x2 Grid)

• Parent: Vertical Stack

• The Grid: 2 Columns / 2 Rows

• Gap: 40px (Larger gap for visual breathing room)

• Project Item:

  • Vertical Stack

  • Top: Image Container (Fixed Aspect Ratio, e.g., 1:1 or 4:5)

  • Bottom: Text Group (Vertical Stack with 8px gap)

7. Testimonials (Carousel or Vertical List)

• Layout: Horizontal Stack (Scroll/Carousel) or Vertical Stack (Centered)

• Card Structure:

  • Vertical Stack

  • Top: Quote Text (Large)

  • Bottom: User Info (Horizontal Stack: Avatar + [Name/Company Vertical Stack])

8. Footer

• Layout: Vertical Stack

• Top Half: Call to Action (Big Headline + Primary Button)

• Bottom Half: Horizontal Stack (Copyright + Credits)

• Padding: 80px (Top), 40px (Bottom)

Pro-Tips for Framer Implementation:

• Breakpoints: Set your Desktop at 1440px, Tablet at 810px, and Phone at 390px. The 3-column service grid should collapse to 1 column on Mobile.

• Typography: Use a bold, condensed Sans-Serif for the "THE BOLD" headers to match the aesthetic.

• Spacing: Use consistent Gap variables (e.g., 8px, 16px, 32px, 64px) to ensure the rhythm of the site feels professional.