feat: add docker-compose for deployment

ai_docs/003_responsive_fixxes.md

@@ -0,0 +1,78 @@
+# 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 |