Skip to content

Commit 312ffd0

Browse files
2844dev2844dev
authored
Añadir capturas landing page, actualizar post-css, optimizar en .webp (#38)
* Añadir capturas y esconder objetos no funcionales * Muestra capturas reales en la landing * Añade carrusel de capturas * Optimizar logo .webp * Actualiza logo del hero a WebP * Corrige tipo nullable en carrusel * Prepara capturas oscuras y mejora animaciones * Añade animaciones al carrusel de capturas * Añadir imagenes modo oscuro * Restaura animaciones globales * Restaura CSS original y limita animaciones de capturas * Fija tamaño del icono de GitHub en hero * Fija tamaño del icono de GitHub en header * Fija tamaño del icono de GitHub en footer * Fija tamaño del icono de GitHub en descarga * Asegura animación inicial de características * Actualizar postcss a 8.5.10 para evitar error de Dependabot
1 parent 5204056 commit 312ffd0

21 files changed

Lines changed: 426 additions & 91 deletions

‎landing/app/globals.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,84 @@ footer,
188188
transform: translateY(0);
189189
}
190190

191+
@keyframes screenshotFadeIn {
192+
from {
193+
opacity: 0;
194+
}
195+
196+
to {
197+
opacity: 1;
198+
}
199+
}
200+
201+
@keyframes modalPanelIn {
202+
from {
203+
opacity: 0;
204+
transform: translateY(14px) scale(0.96);
205+
}
206+
207+
to {
208+
opacity: 1;
209+
transform: translateY(0) scale(1);
210+
}
211+
}
212+
213+
@keyframes screenshotSlideNext {
214+
from {
215+
opacity: 0;
216+
transform: translateX(22px) scale(0.985);
217+
}
218+
219+
to {
220+
opacity: 1;
221+
transform: translateX(0) scale(1);
222+
}
223+
}
224+
225+
@keyframes screenshotSlidePrevious {
226+
from {
227+
opacity: 0;
228+
transform: translateX(-22px) scale(0.985);
229+
}
230+
231+
to {
232+
opacity: 1;
233+
transform: translateX(0) scale(1);
234+
}
235+
}
236+
237+
@keyframes screenshotSlideDirect {
238+
from {
239+
opacity: 0;
240+
transform: scale(0.985);
241+
}
242+
243+
to {
244+
opacity: 1;
245+
transform: scale(1);
246+
}
247+
}
248+
249+
.screenshot-image-fade {
250+
animation: screenshotFadeIn 260ms ease both;
251+
}
252+
253+
.modal-panel-in {
254+
animation: modalPanelIn 220ms ease both;
255+
}
256+
257+
.screenshot-slide-next {
258+
animation: screenshotSlideNext 240ms ease both;
259+
}
260+
261+
.screenshot-slide-previous {
262+
animation: screenshotSlidePrevious 240ms ease both;
263+
}
264+
265+
.screenshot-slide-direct {
266+
animation: screenshotSlideDirect 200ms ease both;
267+
}
268+
191269
.faq-item:hover {
192270
background: rgba(var(--theme-primary-rgb), 0.04);
193271
}

‎landing/components/download-cta.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { TiltLink } from "@/components/tilt-link";
44

55
function GithubIcon({ className }: { className?: string }) {
66
return (
7-
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
7+
<svg
8+
className={className}
9+
width="24"
10+
height="24"
11+
viewBox="0 0 24 24"
12+
fill="currentColor"
13+
aria-hidden="true"
14+
>
815
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
916
</svg>
1017
);

‎landing/components/features.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,22 @@ export function Features() {
6868
useEffect(() => {
6969
const cards = document.querySelectorAll<HTMLElement>(".feature-card-reveal");
7070

71+
function revealCard(card: Element) {
72+
window.setTimeout(() => {
73+
card.classList.add("is-visible");
74+
}, 80);
75+
}
76+
7177
if (!("IntersectionObserver" in window)) {
72-
cards.forEach((card) => card.classList.add("is-visible"));
78+
cards.forEach(revealCard);
7379
return;
7480
}
7581

7682
const observer = new IntersectionObserver(
7783
(entries) => {
7884
entries.forEach((entry) => {
7985
if (entry.isIntersecting) {
80-
entry.target.classList.add("is-visible");
86+
revealCard(entry.target);
8187
observer.unobserve(entry.target);
8288
}
8389
});

‎landing/components/footer.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
function GithubIcon({ className }: { className?: string }) {
22
return (
3-
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
3+
<svg
4+
className={className}
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="currentColor"
9+
aria-hidden="true"
10+
>
411
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
512
</svg>
613
);

‎landing/components/header.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ import { ThemeToggle } from "@/components/theme-toggle";
77

88
function GithubIcon({ className }: { className?: string }) {
99
return (
10-
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
10+
<svg
11+
className={className}
12+
width="24"
13+
height="24"
14+
viewBox="0 0 24 24"
15+
fill="currentColor"
16+
aria-hidden="true"
17+
>
1118
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
1219
</svg>
1320
);

‎landing/components/hero.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ import { TiltLink } from "@/components/tilt-link";
55

66
function GithubIcon({ className }: { className?: string }) {
77
return (
8-
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
8+
<svg
9+
className={className}
10+
width="24"
11+
height="24"
12+
viewBox="0 0 24 24"
13+
fill="currentColor"
14+
aria-hidden="true"
15+
>
916
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.79-.26.79-.58v-2.23c-3.34.73-4.03-1.42-4.03-1.42-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.49 1 .11-.78.42-1.3.76-1.6-2.66-.31-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23.96-.27 1.98-.4 3-.4s2.05.13 3 .4c2.29-1.55 3.3-1.23 3.3-1.23.65 1.65.24 2.87.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.19.69.8.58A12.01 12.01 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
1017
</svg>
1118
);
@@ -17,7 +24,7 @@ export function Hero() {
1724
<div className="mx-auto max-w-4xl text-center">
1825
<div className="animate-hero-in mb-6 flex justify-center">
1926
<Image
20-
src="/logo.png"
27+
src="/images/logo.webp"
2128
alt="Logo de FreeTPV"
2229
width={360}
2330
height={203}

0 commit comments

Comments
 (0)