# 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 |