Skip to content

Commit

Permalink
comming soon page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yceballost
yceballost committed Nov 24, 2024
1 parent 0fda9d1 commit 01c311b
Show file tree
Hide file tree
Showing 3 changed files with 280 additions and 179 deletions.
366 changes: 193 additions & 173 deletions src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,208 @@
import { skinVars } from "@telefonica/mistica";
import Lottie from "lottie-react";

const DecorationSnake = ({ width = 300 }) => (
<Lottie
style={{ width: width }}
animationData={{
v: "5.9.0",
fr: 60,
ip: 0,
op: 161,
w: 300,
h: 32,
nm: "Comp 1",
ddd: 0,
assets: [],
layers: [
{
const DecorationSnake = ({ width = 300, color = skinVars.colors.brand }) => {
// Define los estilos CSS dinámicos
const styles = `
.snake-animation path {
fill: ${color};
stroke: ${color};
}
`;

// Inserta los estilos en el documento
if (typeof document !== "undefined") {
const styleTag = document.createElement("style");
styleTag.textContent = styles;
document.head.appendChild(styleTag);
}

return (
<div style={{ width: width }}>
<Lottie
className="snake-animation" // Clase para aplicar estilos
animationData={{
v: "5.9.0",
fr: 60,
ip: 0,
op: 161,
w: 300,
h: 32,
nm: "Comp 1",
ddd: 0,
ind: 2,
ty: 4,
nm: "Shape Layer 3",
sr: 1,
ks: {
o: { a: 0, k: 100, ix: 11 },
r: { a: 0, k: 0, ix: 10 },
p: {
a: 1,
k: [
{
i: { x: 0.833, y: 0.833 },
o: { x: 0.167, y: 0.167 },
t: 0,
s: [2.75, 16, 0],
to: [0, 0, 0],
ti: [0, 0, 0],
},
{ t: 781, s: [298.25, 16, 0] },
],
ix: 2,
l: 2,
},
a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 },
s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
},
ao: 0,
shapes: [
assets: [],
layers: [
{
ind: 0,
ty: "sh",
ix: 1,
ddd: 0,
ind: 2,
ty: 4,
nm: "Shape Layer 3",
sr: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-15.261, 0],
[-15.261, 0],
[-15.262, 0],
[-15.263, 0],
[-15.262, 0],
[-15.263, 0],
[-15.262, 0],
[-15.262, 0],
[-15.263, 0],
[-15.263, 0],
[-15.26, 0],
[-15.262, 0],
[-15.262, 0],
[-15.264, 0],
[-15.264, 0],
[-15.265, 0],
[-15.264, 0],
[-15.267, 0],
[-15.267, 0],
],
o: [
[15.261, 0],
[15.261, 0],
[15.262, 0],
[15.263, 0],
[15.262, 0],
[15.263, 0],
[15.262, 0],
[15.262, 0],
[15.263, 0],
[15.263, 0],
[15.26, 0],
[15.262, 0],
[15.262, 0],
[15.264, 0],
[15.264, 0],
[15.265, 0],
[15.265, 0],
[15.267, 0],
[15.267, 0],
[0, 0],
],
v: [
[-289.997, -11.906],
[-259.476, 11.906],
[-228.954, -11.906],
[-198.43, 11.906],
[-167.904, -11.906],
[-137.38, 11.906],
[-106.855, -11.906],
[-76.331, 11.906],
[-45.806, -11.906],
[-15.281, 11.906],
[15.246, -11.906],
[45.766, 11.906],
[76.29, -11.906],
[106.815, 11.906],
[137.343, -11.906],
[167.871, 11.906],
[198.401, -11.906],
[228.93, 11.906],
[259.464, -11.906],
[289.997, 11.906],
o: { a: 0, k: 100, ix: 11 },
r: { a: 0, k: 0, ix: 10 },
p: {
a: 1,
k: [
{
i: { x: 0.833, y: 0.833 },
o: { x: 0.167, y: 0.167 },
t: 0,
s: [2.75, 16, 0],
to: [0, 0, 0],
ti: [0, 0, 0],
},
{ t: 781, s: [298.25, 16, 0] },
],
c: false,
ix: 2,
l: 2,
},
ix: 2,
a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 },
s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 },
},
nm: "Path 1",
mn: "ADBE Vector Shape - Group",
hd: false,
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: { x: [0.833], y: [0.833] },
o: { x: [0.167], y: [0.167] },
t: 0,
s: [50],
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-15.261, 0],
[-15.261, 0],
[-15.262, 0],
[-15.263, 0],
[-15.262, 0],
[-15.263, 0],
[-15.262, 0],
[-15.262, 0],
[-15.263, 0],
[-15.263, 0],
[-15.26, 0],
[-15.262, 0],
[-15.262, 0],
[-15.264, 0],
[-15.264, 0],
[-15.265, 0],
[-15.264, 0],
[-15.267, 0],
[-15.267, 0],
],
o: [
[15.261, 0],
[15.261, 0],
[15.262, 0],
[15.263, 0],
[15.262, 0],
[15.263, 0],
[15.262, 0],
[15.262, 0],
[15.263, 0],
[15.263, 0],
[15.26, 0],
[15.262, 0],
[15.262, 0],
[15.264, 0],
[15.264, 0],
[15.265, 0],
[15.265, 0],
[15.267, 0],
[15.267, 0],
[0, 0],
],
v: [
[-289.997, -11.906],
[-259.476, 11.906],
[-228.954, -11.906],
[-198.43, 11.906],
[-167.904, -11.906],
[-137.38, 11.906],
[-106.855, -11.906],
[-76.331, 11.906],
[-45.806, -11.906],
[-15.281, 11.906],
[15.246, -11.906],
[45.766, 11.906],
[76.29, -11.906],
[106.815, 11.906],
[137.343, -11.906],
[167.871, 11.906],
[198.401, -11.906],
[228.93, 11.906],
[259.464, -11.906],
[289.997, 11.906],
],
c: false,
},
ix: 2,
},
{ t: 781, s: [0] },
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: { x: [0.833], y: [0.833] },
o: { x: [0.167], y: [0.167] },
t: 0,
s: [100],
nm: "Path 1",
mn: "ADBE Vector Shape - Group",
hd: false,
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: { x: [0.833], y: [0.833] },
o: { x: [0.167], y: [0.167] },
t: 0,
s: [50],
},
{ t: 781, s: [0] },
],
ix: 1,
},
{ t: 781, s: [50] },
],
ix: 2,
},
o: { a: 0, k: 0, ix: 3 },
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim",
hd: false,
},
{
ty: "st",
c: { a: 0, k: [0, 0.4, 1, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 2, ix: 5 },
lc: 2,
lj: 1,
ml: 4,
e: {
a: 1,
k: [
{
i: { x: [0.833], y: [0.833] },
o: { x: [0.167], y: [0.167] },
t: 0,
s: [100],
},
{ t: 781, s: [50] },
],
ix: 2,
},
o: { a: 0, k: 0, ix: 3 },
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim",
hd: false,
},
{
ty: "st",
c: { a: 0, k: [0, 0.4, 1, 1], ix: 3 },
o: { a: 0, k: 100, ix: 4 },
w: { a: 0, k: 2, ix: 5 },
lc: 2,
lj: 1,
ml: 4,
bm: 0,
nm: "snake",
mn: "ADBE Vector Graphic - Stroke",
hd: false,
},
],
ip: 0,
op: 901,
st: 0,
bm: 0,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke",
hd: false,
},
],
ip: 0,
op: 901,
st: 0,
bm: 0,
},
],
markers: [],
}}
/>
);
markers: [],
}}
/>
</div>
);
};

export default DecorationSnake;
4 changes: 2 additions & 2 deletions src/pages/advent-calendar-2024/components/label-rotate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState } from "react";
import { skinVars, useScreenSize } from "@telefonica/mistica";
import styles from "./label-rotate.module.css";

const RotatingSVG = ({ fill }) => {
const RotatingSVG = ({ fill, color = skinVars.colors.brand }) => {
const [isHovered, setIsHovered] = useState(false);
const { isMobile } = useScreenSize();

Expand All @@ -17,7 +17,7 @@ const RotatingSVG = ({ fill }) => {
width={isMobile ? 48 : 84}
height={isMobile ? 48 : 84}
viewBox="0 0 96 96"
fill={skinVars.colors.brand}
fill={color}
>
<g className={`${styles.rotation} ${isHovered ? styles.slowMo : ""}`}>
<path d="M44.6602 85.5299C44.3002 87.1399 42.9302 88.0299 40.6102 87.5099L38.6402 87.0599L38.6002 87.2399C38.4002 88.1199 38.8602 88.8699 39.7702 89.0699C40.7002 89.2799 41.2902 88.8899 41.5102 88.4499L43.5502 88.9099C43.1102 90.2199 41.6002 91.2899 39.3802 90.7899C37.1602 90.2899 36.0902 88.6199 36.5102 86.7599L37.7202 81.3999L39.5302 81.8099L39.5102 82.6599L39.5902 82.6799C40.0002 82.3399 40.9902 81.9699 42.2202 82.2399C44.0902 82.6599 45.0002 84.0499 44.6702 85.5099L44.6602 85.5299ZM39.0202 85.3199L38.9602 85.5699L40.7202 85.9699C41.8102 86.2199 42.3802 85.8599 42.5302 85.2299C42.6802 84.5799 42.3102 84.0499 41.4602 83.8599C40.2002 83.5799 39.2902 84.1499 39.0202 85.3299V85.3199Z" />
Expand Down
Loading

0 comments on commit 01c311b

Please sign in to comment.