From b81b93e232d15a5a90075044c63150f6f2d7509d Mon Sep 17 00:00:00 2001
From: YousifA2 <alaniya26@pwcs-edu.org>
Date: Sun, 25 Jan 2026 11:54:31 -0500
Subject: [PATCH] new update

---
 frontend/src/lib/components/Carousel.svelte   | 213 ++++++++++++++++++
 .../src/lib/components/WebHomePage.svelte     |  29 +++
 frontend/src/routes/goal/+page.svelte         |  38 +++-
 3 files changed, 274 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/lib/components/Carousel.svelte

diff --git a/frontend/src/lib/components/Carousel.svelte b/frontend/src/lib/components/Carousel.svelte
new file mode 100644
index 0000000..07759b2
--- /dev/null
+++ b/frontend/src/lib/components/Carousel.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { fade, fly } from "svelte/transition";
+
+    let currentIndex = $state(0);
+
+    const items = [
+        {
+            image: "/coffee-cup.png",
+            title: "Analyze Packaging",
+            desc: "Check if your daily coffee cup is truly compostable",
+        },
+        {
+            image: "/water-bottle.png",
+            title: "Verify Materials",
+            desc: "Scan plastic bottles to see their recycling potential",
+        },
+        {
+            image: "/plastic-bag.png",
+            title: "Detect Greenwashing",
+            desc: 'Find out the truth about "biodegradable" bags',
+        },
+    ];
+
+    onMount(() => {
+        const interval = setInterval(() => {
+            currentIndex = (currentIndex + 1) % items.length;
+        }, 4000);
+
+        return () => clearInterval(interval);
+    });
+</script>
+
+<div class="carousel-container">
+    {#each [items[currentIndex]] as item (currentIndex)}
+        <div
+            class="carousel-item"
+            in:fly={{ y: 20, duration: 800, delay: 200 }}
+            out:fade={{ duration: 400 }}
+        >
+            <div class="image-wrapper">
+                <img src={item.image} alt={item.title} />
+                <div class="backdrop-glow"></div>
+            </div>
+
+            <div class="content">
+                <h3>{item.title}</h3>
+                <p>{item.desc}</p>
+            </div>
+        </div>
+    {/each}
+
+    <div class="indicators">
+        {#each items as _, i}
+            <button
+                class="indicator {i === currentIndex ? 'active' : ''}"
+                onclick={() => (currentIndex = i)}
+                aria-label="Go to slide {i + 1}"
+            ></button>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .carousel-container {
+        position: relative;
+        width: 100%;
+        height: 500px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .carousel-item {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .image-wrapper {
+        position: relative;
+        width: 320px;
+        height: 320px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 30px;
+        border-radius: 50%;
+        transition: all 0.5s ease;
+    }
+
+    /* Natural container glow (subtle) + Hover intensity */
+    .image-wrapper:hover {
+        background: radial-gradient(
+            circle,
+            rgba(74, 222, 128, 0.05) 0%,
+            rgba(0, 0, 0, 0) 70%
+        );
+        box-shadow: 0 0 60px rgba(74, 222, 128, 0.15);
+    }
+
+    img {
+        max-width: 85%;
+        max-height: 85%;
+        object-fit: contain;
+        position: relative;
+        z-index: 2;
+        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
+        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .image-wrapper:hover img {
+        transform: scale(1.1) translateY(-10px);
+    }
+
+    .backdrop-glow {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 200px;
+        height: 200px;
+        background: radial-gradient(
+            circle,
+            rgba(74, 222, 128, 0.3) 0%,
+            rgba(0, 0, 0, 0) 70%
+        );
+        border-radius: 50%;
+        z-index: 1;
+        filter: blur(40px);
+        opacity: 0.6;
+        transition: all 0.5s ease;
+        animation: pulse 4s infinite ease-in-out;
+    }
+
+    .image-wrapper:hover .backdrop-glow {
+        opacity: 0.9;
+        width: 260px;
+        height: 260px;
+        filter: blur(50px);
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 0.5;
+        }
+        50% {
+            transform: translate(-50%, -50%) scale(1.2);
+            opacity: 0.7;
+        }
+        100% {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 0.5;
+        }
+    }
+
+    .content {
+        max-width: 400px;
+        position: relative;
+        z-index: 3;
+    }
+
+    h3 {
+        font-size: 24px;
+        font-weight: 700;
+        color: white;
+        margin: 0 0 8px 0;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    p {
+        font-size: 16px;
+        color: #d1d5db;
+        line-height: 1.5;
+        margin: 0;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .indicators {
+        position: absolute;
+        bottom: 20px;
+        display: flex;
+        gap: 8px;
+        z-index: 10;
+    }
+
+    .indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        padding: 0;
+    }
+
+    .indicator:hover {
+        background: rgba(255, 255, 255, 0.5);
+    }
+
+    .indicator.active {
+        background: #4ade80;
+        width: 24px;
+        border-radius: 4px;
+    }
+</style>
diff --git a/frontend/src/lib/components/WebHomePage.svelte b/frontend/src/lib/components/WebHomePage.svelte
index b4fa084..5358f2c 100644
--- a/frontend/src/lib/components/WebHomePage.svelte
+++ b/frontend/src/lib/components/WebHomePage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
+    import Carousel from "$lib/components/Carousel.svelte";
     import Icon from "@iconify/svelte";
 
     interface Props {
@@ -103,6 +104,10 @@
                 </a>
             </div>
         </div>
+
+        <div class="hero-visual">
+            <Carousel />
+        </div>
     </section>
 
     <div class="spacer"></div>
@@ -191,6 +196,15 @@
         padding: 120px 60px 100px;
         max-width: 1200px;
         margin: 0 auto;
+        justify-content: space-between;
+        gap: 60px;
+    }
+
+    .hero-visual {
+        flex: 1;
+        max-width: 500px;
+        display: flex;
+        justify-content: center;
     }
 
     .hero-content {
@@ -462,6 +476,21 @@
         .features-grid {
             grid-template-columns: repeat(2, 1fr);
         }
+
+        .hero {
+            flex-direction: column;
+            text-align: center;
+            padding-top: 100px;
+        }
+
+        .hero-content {
+            margin: 0 auto;
+        }
+
+        .hero-visual {
+            margin-top: 40px;
+            width: 100%;
+        }
     }
 
     @media (max-width: 768px) {
diff --git a/frontend/src/routes/goal/+page.svelte b/frontend/src/routes/goal/+page.svelte
index 6b46197..27414dd 100644
--- a/frontend/src/routes/goal/+page.svelte
+++ b/frontend/src/routes/goal/+page.svelte
@@ -16,11 +16,18 @@
 		<div class="grid-layout">
 			<div class="glass-card mission-card">
 				<div class="icon-circle problem-icon">
-					<iconify-icon
-						icon="ri:error-warning-fill"
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
 						width="32"
+						height="32"
+						viewBox="0 0 24 24"
 						style="color: #ef4444;"
-					></iconify-icon>
+					>
+						<path
+							fill="currentColor"
+							d="M7 16q.425 0 .713-.288T8 15t-.288-.712T7 14t-.712.288T6 15t.288.713T7 16m-1-3h2V8H6zm4 2h8v-2h-8zm0-4h8V9h-8zm-6 9q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20z"
+						/>
+					</svg>
 				</div>
 				<h2 class="card-title">The Problem</h2>
 				<p class="card-desc">
@@ -38,11 +45,30 @@
 
 			<div class="glass-card mission-card">
 				<div class="icon-circle solution-icon">
-					<iconify-icon
-						icon="ri:eye-fill"
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
 						width="32"
+						height="32"
+						viewBox="0 0 24 24"
 						style="color: #4ade80;"
-					></iconify-icon>
+					>
+						<g
+							fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+						>
+							<rect
+								width="16.5"
+								height="16.5"
+								x="3.75"
+								y="3.75"
+								rx="4"
+							/>
+							<path d="m16.512 9.107l-5.787 5.786l-3.237-3.232" />
+						</g>
+					</svg>
 				</div>
 				<h2 class="card-title">The Solution</h2>
 				<p class="card-desc">