Design Specifications for The Cup of Faith Website

Here is a detailed breakdown of the design elements used on your website. You can use this as a guide to recreate the look and feel on another website builder platform.

1. Color Palette

• Primary Blue: #244E9F (Used for headings, buttons, icons, and backgrounds)
• Dark Navy Blue: #0F2139 (Used for the footer background and some text)
• Secondary Blue: #2C4A73 (Used for accent text and some backgrounds)
• Deep Blue: #1B365D (Used for header backgrounds and other elements)
• Text/Accents Gray: #2C2C2C (Used for body text and paragraphs)
• Off-White Background: #F8F9FA (Used for alternating section backgrounds to create contrast)
• Pure White: #FFFFFF (Used for main backgrounds, text on dark backgrounds, and cards)
• Pure Black: #000000 (Used for borders and the signature drop-shadow effect)

2. Typography

• Primary Font: The site appears to use a font similar to Montserrat.
• Headings (h1, h2, h3):
  • Font Weight: font-black (900)
  • Color: Primary Blue (#244E9F) or White (#FFFFFF) on dark backgrounds.
  • Sizes: Varies from text-3xl to text-6xl.
• Body Text & Paragraphs:
  • Font Weight: font-bold (700)
  • Color: Dark Gray (#2C2C2C) or a lighter blue (#4A6FA5) in the footer.
• Links/Navigation:
  • Font Weight: font-bold (700)
  • Color: Primary Blue (#244E9F)

3. Core Design Style: "Blocky & Bold"

The entire website shares a unique, tactile design aesthetic. The key is the combination of thick borders and a solid, block-like drop shadow.

• Borders: border-4 border-black
• Shadow Effect: shadow-[8px_8px_0_#000] on most cards and containers.
• Hover Effect: The shadow is often reduced on hover (hover:shadow-[4px_4px_0_#000]) and the element is slightly moved (transform hover:translate-x-1 hover:translate-y-1) to create a satisfying "push button" feel.

4. Component Breakdown

Buttons

• Primary Button (Blue):
  • Background: #244E9F
  • Text Color: #FFFFFF
  • Style: Thick black border and shadow effect as described above.
• Secondary Button (White):
  • Background: #FFFFFF
  • Text Color: #244E9F
  • Style: Thick black border and shadow effect.

Cards (Features, Menu Items, Store Listings)

• Background: #FFFFFF
• Style: Thick 4px black border and the 8px solid black shadow.
• Content: Often contains a hero image at the top (with a bottom border), a title in Primary Blue, and body text in Dark Gray.

Section Headings

• A large, font-black title.
• Below the title, there is a decorative underline element:
  • Code: <div className="w-32 h-2 bg-[#244E9F] border-2 border-black mx-auto"></div>
  • This creates a thick, short line with a border, reinforcing the bold, blocky style.

Navigation Bar

• Position: Fixed to the top (fixed top-0).
• Background: Starts transparent, becomes solid white (#FFFFFF) with a black shadow (shadow-[0_8px_0_#000]) on scroll.
• Logo: The "Cup of Faith" logo image is on the left.
• Links: A horizontal list of bold, blue (#244E9F) links.

Footer

• Structure: Multi-layered.
  • Top banner for "Ministries".
  • Main content area with 4 columns (Logo, Quick Links, Contact, Socials).
  • Bottom bar with copyright information.
• Colors: Dark Navy (#0F2139) background with white and light blue text.
• Icons: Uses lucide-react icons for social media and contact info.

Forms (Contact Page)

• Input Fields:
  • Background: #FFFFFF
  • Text: Bold, blue (#1B365D) text.
  • Style: Styled with the signature border-4 border-black and shadow-[4px_4px_0_#000].

5. Image Assets

To fully recreate the site, you will need the following image assets:

• The main Cup of Faith logo (wordmark).
• The icon-only logo (cup icon).
• Photos for each store location.
• High-quality, warm-toned stock photos for the hero section, menu highlights, and community sections.
• Image for the "KAIBIGAN" movie poster.

You can download these directly from the live preview of the app by right-clicking and saving the images.

This guide should provide a solid foundation for rebuilding the website's frontend on your chosen platform. Good luck!