Skip to content

Commit 2df9717

Browse files
xlcrrxlcrr
committed
update about page
1 parent ac731be commit 2df9717

10 files changed

Lines changed: 2041 additions & 333 deletions

File tree

‎resources/js/assets/images/microplastics_oranmore.png‎

188 KB
Loading

‎resources/js/components/About/AboutBrands.vue‎

Lines changed: 385 additions & 69 deletions
Large diffs are not rendered by default.

‎resources/js/components/About/AboutButts.vue‎

Lines changed: 115 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,140 @@ const { t } = useI18n();
55
</script>
66

77
<template>
8-
<section class="py-16 sm:py-24 bg-gradient-to-b from-black to-red-950">
9-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
8+
<section class="py-16 sm:py-24 bg-gradient-to-br from-black via-red-950 to-orange-950 relative overflow-hidden">
9+
<!-- Fancy smoke/wave background pattern -->
10+
<div class="absolute inset-0 opacity-10">
11+
<svg class="absolute bottom-0 w-full h-48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
12+
<path
13+
fill="currentColor"
14+
class="text-red-600"
15+
d="M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,181.3C672,171,768,181,864,186.7C960,192,1056,192,1152,170.7C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
16+
></path>
17+
</svg>
18+
</div>
19+
20+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
1021
<div class="grid lg:grid-cols-2 gap-8 items-center">
1122
<!-- Left Column: Text -->
1223
<div class="text-white">
13-
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-6 mr-6">
24+
<!-- Decorative element -->
25+
<div class="flex items-center mb-4">
26+
<span class="w-12 h-1 bg-gradient-to-r from-red-500 to-orange-500 rounded-full"></span>
27+
<span class="ml-3 text-red-400 font-medium">{{ t('Environmental Impact') }}</span>
28+
</div>
29+
30+
<h2
31+
class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-6 bg-gradient-to-r from-red-300 to-orange-300 bg-clip-text text-transparent"
32+
>
1433
{{ t('Trillions of cigarette butts leech toxic chemicals into the environment.') }}
1534
</h2>
16-
<p class="text-lg sm:text-xl text-red-100">
35+
36+
<p class="text-lg sm:text-xl text-red-100 mb-6">
1737
{{
1838
t(
1939
'They poison water and release nicotine, arsenic, and microplastics into plants and animals.'
2040
)
2141
}}
2242
</p>
43+
44+
<!-- Fancy stats boxes -->
45+
<div class="grid grid-cols-2 gap-4 mt-8">
46+
<div
47+
class="bg-red-900/30 backdrop-blur-sm border border-red-700/50 rounded-xl p-4 transform hover:scale-105 transition duration-300"
48+
>
49+
<div class="text-3xl font-bold text-orange-400">4.5T</div>
50+
<div class="text-sm text-red-200">{{ t('Butts per year') }}</div>
51+
</div>
52+
<div
53+
class="bg-red-900/30 backdrop-blur-sm border border-red-700/50 rounded-xl p-4 transform hover:scale-105 transition duration-300"
54+
>
55+
<div class="text-3xl font-bold text-orange-400">700+</div>
56+
<div class="text-sm text-red-200">{{ t('Toxic chemicals') }}</div>
57+
</div>
58+
</div>
2359
</div>
2460

2561
<!-- Right Column: Image -->
26-
<div class="relative">
27-
<img
28-
src="/resources/js/assets/images/butts.png"
29-
alt="Cigarette butts"
30-
class="rounded-2xl shadow-2xl w-full h-[400px] object-cover"
31-
loading="lazy"
32-
/>
62+
<div class="relative group">
63+
<!-- Fancy border glow effect -->
64+
<div
65+
class="absolute -inset-1 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl blur-md opacity-75 group-hover:opacity-100 transition duration-500"
66+
></div>
67+
68+
<div class="relative">
69+
<img
70+
src="/resources/js/assets/images/butts.png"
71+
alt="Cigarette butts"
72+
class="rounded-2xl shadow-2xl w-full h-[400px] object-cover transform group-hover:scale-[1.02] transition duration-500"
73+
loading="lazy"
74+
/>
75+
76+
<!-- Fancy overlay gradient -->
77+
<div
78+
class="absolute inset-0 bg-gradient-to-t from-red-900/50 to-transparent rounded-2xl pointer-events-none"
79+
></div>
80+
</div>
3381
</div>
3482
</div>
3583
</div>
84+
85+
<!-- Floating smoke particles animation -->
86+
<div class="absolute inset-0 overflow-hidden pointer-events-none">
87+
<div class="smoke smoke-1"></div>
88+
<div class="smoke smoke-2"></div>
89+
<div class="smoke smoke-3"></div>
90+
</div>
3691
</section>
3792
</template>
3893

3994
<style scoped>
40-
/* Minimal styles - leveraging Tailwind classes */
95+
/* Smoke animation for fancy effect */
96+
.smoke {
97+
position: absolute;
98+
background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0) 70%);
99+
border-radius: 50%;
100+
opacity: 0.4;
101+
animation: rise 15s infinite ease-out;
102+
}
103+
104+
.smoke-1 {
105+
width: 100px;
106+
height: 100px;
107+
left: 15%;
108+
animation-delay: 0s;
109+
}
110+
111+
.smoke-2 {
112+
width: 150px;
113+
height: 150px;
114+
left: 65%;
115+
animation-delay: 5s;
116+
}
117+
118+
.smoke-3 {
119+
width: 80px;
120+
height: 80px;
121+
left: 35%;
122+
animation-delay: 10s;
123+
}
124+
125+
@keyframes rise {
126+
0% {
127+
transform: translateY(100vh) translateX(0) scale(0.8);
128+
opacity: 0;
129+
}
130+
10% {
131+
opacity: 0.4;
132+
}
133+
50% {
134+
transform: translateY(50vh) translateX(20px) scale(1.2);
135+
}
136+
90% {
137+
opacity: 0.3;
138+
}
139+
100% {
140+
transform: translateY(-10vh) translateX(-20px) scale(1.5);
141+
opacity: 0;
142+
}
143+
}
41144
</style>

0 commit comments

Comments
 (0)