generated from hack4impact-calpoly/nextjs-app-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
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.
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.
Reactions are currently unavailable