mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-03 19:24:34 -05:00
new update
This commit is contained in:
YousifA2
213
frontend/src/lib/components/Carousel.svelte
Normal file
213
frontend/src/lib/components/Carousel.svelte
Normal file
@@ -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>
|
||||
@@ -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) {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user