🔧 chore: use lottie for success logo

packages/frontend/public/lottie/logo.json

@@ -0,0 +1 @@
+{"nm":"logo","v":"5.9.6","fr":60,"ip":0,"op":128.60000000000002,"w":40,"h":40,"ddd":0,"markers":[],"assets":[{"nm":"icon","fr":60,"id":"538:1272","layers":[{"ty":3,"ddd":0,"ind":5,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":4,"ddd":0,"ind":6,"hd":false,"nm":"logo - Shape Mask","ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":0,"op":129.60000000000002,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[12,0],[28,0],[40,12],[40,28],[28,40],[12,40],[0,28],[0,12],[12,0],[12,0]],"i":[[0,0],[0,0],[0,-6.6274],[0,0],[6.6274,0],[0,0],[0,6.6274],[0,0],[-6.6274,0],[0,0]],"o":[[0,0],[6.627420000000001,0],[0,0],[0,6.627420000000001],[0,0],[-6.62742,0],[0,0],[0,-6.62742],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}]}]},{"nm":"check, checmark","fr":60,"id":"538:1273","layers":[{"ty":3,"ddd":0,"ind":7,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":8,"hd":false,"nm":"check, checmark - Null","parent":7,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":0,"nm":"icon","td":1,"refId":"538:1272","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"w":40,"h":40,"ip":0,"op":129.60000000000002,"st":0,"hd":false,"bm":0},{"ty":4,"ddd":0,"ind":10,"hd":false,"nm":"check, checmark - Shape Mask","parent":8,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":true,"v":[[0,0],[12,0],[12,0],[12,12],[12,12],[0,12],[0,12],[0,0]],"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0,1,0,1]},"nm":"Fill","hd":false,"r":1},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"tt":1}]},{"nm":"check, checmark","fr":60,"id":"ltgojk9vajqo3xuqysw","layers":[{"ty":3,"ddd":0,"ind":21,"hd":false,"nm":"icon - Null","ks":{"a":{"a":0,"k":[14,14]},"o":{"a":0,"k":100},"p":{"a":0,"k":[19.5,20]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":83.39999999999999,"s":[-0.1,-0.1],"o":{"x":[0.5],"y":[0.35]},"i":{"x":[0.15],"y":[1]}},{"t":129.60000000000002,"s":[100,100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":22,"hd":false,"nm":"check, checmark - Null","parent":21,"ks":{"a":{"a":0,"k":[6,6]},"o":{"a":0,"k":100},"p":{"a":0,"k":[14,14]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ty":3,"ddd":0,"ind":15,"hd":false,"nm":"Icon - Null","parent":22,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[1.5,2]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"st":0,"ip":75,"op":240,"bm":0,"sr":1},{"ddd":0,"ind":16,"hd":false,"nm":"Icon - Stroke","parent":15,"ks":{"a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"st":0,"ip":75,"op":240,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","nm":"Group","hd":false,"np":3,"it":[{"ty":"sh","nm":"Path","hd":false,"ks":{"a":0,"k":{"c":false,"v":[[0,5.5],[3.1471,8],[9,0]],"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.24705882352941178,0.5058823529411764,0.9254901960784314,1]},"ml":4,"lc":2,"lj":2,"nm":"Stroke","hd":false},{"ty":"tr","a":{"a":0,"k":[0,0]},"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,Line truncated

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
+import Lottie from 'lottie-react';
 
 import { Badge } from 'components/shared/Badge';
 import { Button } from 'components/shared/Button';
@@ -10,6 +11,8 @@ import {
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 
+import logoAnimation from 'components/../../public/lottie/logo.json';
+
 const Id = () => {
   const { id, orgSlug } = useParams();
 
@@ -17,16 +20,18 @@ const Id = () => {
     //TODO: Implement this
   };
   return (
-    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto">
+    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
       {/* Icon */}
-      <div className="flex justify-center">^</div>
+      <div className="flex justify-center">
+        <Lottie animationData={logoAnimation} loop={false} size={40} />
+      </div>
 
       {/* Heading */}
       <div className="flex flex-col items-center gap-1.5">
         <Heading as="h3" className="font-medium text-xl">
           Project deployed successfully.
         </Heading>
-        <p className="flex flex-col lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
           Your project has been deployed at{' '}
           <Link to="https://www.iglootools.snowballtools.xyz">
             <span className="flex gap-1.5 text-elements-link">