Skip to content

Commit b20ea93

Browse files
VmMadmarc2332begonaalvarezd
authored
feat(dapp): add lottie animations to the landing page (#1044)
* feat(dapp): add lottie animations for to landing page * fix: fmt * feat: add bg for fair acution * fix: fmt * fix: image above disclaimer --------- Co-authored-by: Marc Espin <mespinsanz@gmail.com> Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
1 parent 1438599 commit b20ea93

12 files changed

+21995
-25
lines changed

‎dapp/src/animations/landing/build_for_builders_optimized.json‎

Lines changed: 2985 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/establish-your-present_optimized.json‎

Lines changed: 3310 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/fair-auction_bg_v1.json‎

Lines changed: 400 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/one-name-everywhere_optimized.json‎

Lines changed: 1106 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/own-transfer_optimized.json‎

Lines changed: 7873 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/simplified-safer-trans_optimized.json‎

Lines changed: 2179 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/animations/landing/unlimited-subnames_optimized.json‎

Lines changed: 4080 additions & 0 deletions
Large diffs are not rendered by default.

‎dapp/src/components/ImageCard.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33

44
import clsx from 'clsx';
55

6+
import { LottieAnimation } from './loaders/Lottie';
7+
68
export enum ImageCardSize {
79
Large = 'large',
810
Small = 'small',
@@ -13,24 +15,30 @@ interface ImageCardprops {
1315
image?: string;
1416
alt?: string;
1517
size?: ImageCardSize;
18+
lottie?: React.ComponentProps<typeof LottieAnimation>['animationData'];
1619
}
1720
export function ImageCard({
1821
title,
1922
body,
2023
image,
2124
alt,
25+
lottie,
2226
size = ImageCardSize.Small,
2327
}: ImageCardprops): JSX.Element {
2428
const isLarge = size === ImageCardSize.Large;
2529
const textSize = isLarge ? 'text-headline-sm' : 'text-title-lg';
2630
const isCentered = isLarge ? 'text-center' : 'text-start';
2731
return (
2832
<div className="w-full flex flex-col items-center overflow-hidden rounded-3xl bg-names-neutral-6">
29-
<img
30-
src={image}
31-
alt={alt || image}
32-
className="w-full h-auto object-cover aspect-video"
33-
/>
33+
{lottie ? (
34+
<LottieAnimation animationData={lottie} />
35+
) : (
36+
<img
37+
src={image}
38+
alt={alt || image}
39+
className="w-full h-auto object-cover aspect-video"
40+
/>
41+
)}
3442

3543
<div
3644
className={clsx(

‎dapp/src/sections/BuiltForBuilders.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33

44
import { CheckmarkFilled } from '@iota/apps-ui-icons';
55

6+
import builtForBuilders from '@/animations/landing/build_for_builders_optimized.json';
7+
import { LottieAnimation } from '@/components/loaders/Lottie';
8+
69
interface FeatureItemProps {
710
text: string;
811
}
@@ -41,8 +44,8 @@ export function BuiltForBuilders() {
4144
<FeatureItem key={index} text={text} />
4245
))}
4346
</div>
44-
<div className="w-full flex justify-center">
45-
<img src="/landing-page/built-for-builders.png" width={554} />
47+
<div className="flex justify-center">
48+
<LottieAnimation animationData={builtForBuilders} />
4649
</div>
4750
</div>
4851
</div>

‎dapp/src/sections/FairAuction.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import { Activity, Clock, RecognizedBadge } from '@iota/apps-ui-icons';
5+
import Lottie from 'lottie-react';
56

7+
import fairAuctionAnimation from '@/animations/landing/fair-auction_bg_v1.json';
68
import { CircleGradient } from '@/components/CircleGradient';
79
import { IconCard } from '@/components/IconCard';
810

@@ -32,22 +34,41 @@ export function FairAuction() {
3234
return (
3335
<section className="relative overflow-hidden">
3436
<div className="container py-14 md:py-20">
35-
<div className="relative flex flex-col md:flex-row gap-6 md:gap-[72px] py-lg md:py-[40px] items-center md:items-start bg-names-neutral-6 rounded-3xl px-xl md:px-2xl bg-[url('/landing-page/vector.png')] bg-no-repeat bg-cover bg-center">
36-
<CircleGradient position="top-left" />
37-
<div className="flex flex-col justify-center gap-xl md:gap-2xl flex-1">
38-
<div className="flex flex-col gap-xs">
39-
<h2 className="text-headline-lg text-names-primary-100">{TITTLE}</h2>
40-
<p className="text-body-lg text-names-neutral-70 w-full md:max-w-[428px]">
41-
{BODY}
42-
</p>
37+
<div className="bg-names-neutral-6 rounded-3xl py-lg md:py-[40px] px-xl md:px-2xl relative">
38+
<div className="absolute inset-0 z-0 pointer-events-none select-none overflow-hidden rounded-3xl">
39+
<div className="h-full w-full ">
40+
<Lottie
41+
animationData={fairAuctionAnimation}
42+
loop={true}
43+
autoplay={true}
44+
style={{
45+
height: '100%',
46+
}}
47+
rendererSettings={{
48+
preserveAspectRatio: 'xMidYMid slice',
49+
}}
50+
/>
4351
</div>
44-
<div className="flex flex-col md:flex-row gap-lg">
45-
{FAIR_AUCTION.map((data, index) => (
46-
<IconCard key={index} {...data} />
47-
))}
52+
</div>
53+
<CircleGradient position="top-left" />
54+
<div className="flex flex-col md:flex-row gap-6 md:gap-[72px] items-center md:items-start relative">
55+
<div className="flex flex-col justify-center gap-xl md:gap-2xl flex-1">
56+
<div className="flex flex-col gap-xs">
57+
<h2 className="text-headline-lg text-names-primary-100">
58+
{TITTLE}
59+
</h2>
60+
<p className="text-body-lg text-names-neutral-70 w-full md:max-w-[428px]">
61+
{BODY}
62+
</p>
63+
</div>
64+
<div className="flex flex-col md:flex-row gap-lg">
65+
{FAIR_AUCTION.map((data, index) => (
66+
<IconCard key={index} {...data} />
67+
))}
68+
</div>
4869
</div>
70+
<img width={360} src="/landing-page/iota-news.png" />
4971
</div>
50-
<img width={360} src="/landing-page/iota-news.png" />
5172
</div>
5273
</div>
5374
</section>

0 commit comments

Comments
 (0)