Responsive Fixes and Image/Color Update

Task ID: 003 Date Created: 2025-07-03 Author: Gemini

Task Description

This task addresses several UI/UX issues to improve the landing page's responsiveness, visual consistency, and user experience. It includes fixing the cut-off footer, ensuring the cookie banner's visibility and proper alignment, making text responsive, updating an image, and applying a specific brand color to the page background.

Instructions

Fix Footer: Adjust CSS to ensure the footer is fully visible and not cut off on any screen size.
Fix Cookie Banner:
- Ensure the 'Accept' button is always visible in desktop mode.
- Center the cookie message and the accept button within the banner.
Fix Responsive Text: Review and apply appropriate responsive Tailwind CSS classes to text elements to ensure they scale correctly across different screen sizes.
Update Image: Replace the existing public/images/flyer.jpeg with public/images/150_image.png. (Note: 150_image.png will be moved from ai_docs/images to public/images first).
Apply Brand Color: Identify the yellow color from ai_docs/images/150_image.png and apply it as the background color for the main page layout.

Input Data

src/components/layout/Footer.tsx
src/components/CookieBanner.tsx
src/app/globals.css (or other relevant CSS files)
src/app/layout.tsx (or src/app/page.tsx)
src/components/sections/Hero.tsx (or other components using flyer.jpeg)
ai_docs/images/150_image.png
public/images/flyer.jpeg

Expected Output

A fully visible footer.
A cookie banner with a visible and centered 'Accept' button and centered message.
Text elements that are responsive and scale appropriately.
The 150_image.png displayed where flyer.jpeg was previously used.
The main page background colored with the specified yellow.
Updated relevant code files.

Constraints & Requirements

Maintain existing project conventions (Next.js, React, TypeScript, Tailwind CSS).
Ensure changes are responsive and work across various screen sizes.
The yellow color must be extracted accurately from 150_image.png.

System Instructions (Optional)

You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.

References (Optional)

ai_docs/images/failure_footer_cut_off.png
ai_docs/images/failure_responive_view.png
ai_docs/images/150_image.png

Metadata

Key	Value
Priority	High
Status	Open
Tags	UI/UX, Responsive, CSS, Image, Color

2.7 KiB Raw Permalink Blame History