79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# 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 |
|