Skip to content

Create Main Landing Page #12

@carboninl

Description

@carboninl

Description

Create the main landing page for Operation Surf as shown in the attached design. This issue focuses on the overall page structure, layout, and static sections. The dynamic "Our Programs" card grid will be handled in a separate issue, but the section header should be included as a placeholder.

The page should include:

  • The main section with a full-width background image, overlay
  • A centered "About Us" section with descriptive text.
  • A "Contact Us" footer section with email, phone, and address details.
  • A responsive navigation bar with logo and authentication buttons.
Image

Acceptance Criteria

  • "Sign In" and "Sign Up" buttons.
  • Main section features a high-quality background image with a blue color overlay to ensure text readability.
  • "Explore Programs" button in the main section is centered and uses the primary brand blue.
  • "About Us" and "Our Programs" headers are centered and use the dark blue brand typography.
  • Contact section at the bottom uses the light blue background spanning the full width of the viewport.

Steps

  • Build the main section with the background overlay and centered text/CTA.
  • Add the "About Us" typography and layout section.
  • Create a placeholder container for the "Our Programs" section.
  • Implement the "Contact Us" footer with three columns for contact information.
  • Verify color hex codes and font weights against the design mock.

Metadata

Metadata

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions