feat: add lottie animation to guest placeholder screen

frontend/src/assets/LottieAnimation/lock-animation.json

@@ -0,0 +1 @@
+{"v":"5.4.4","fr":30,"ip":0,"op":141,"w":500,"h":500,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"keyhole Outlines","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":10,"s":[0,0,0],"e":[0,-23.842,0],"to":[0,-3.974,0],"ti":[0,3.974,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":32,"s":[0,-23.842,0],"e":[0,-23.842,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":61,"s":[0,-23.842,0],"e":[0,0,0],"to":[0,3.974,0],"ti":[13.492,-3.312,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":73,"s":[0,0,0],"e":[-80.952,-3.968,0],"to":[-13.492,3.312,0],"ti":[22.024,-50.463,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":88,"s":[-80.952,-3.968,0],"e":[-31.746,46.825,0],"to":[-2.778,5.026,0],"ti":[-2.116,-0.066,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100.8,"s":[-31.746,46.825,0],"e":[125.397,-112.698,0],"to":[2.009,0.063,0],"ti":[-1.33,1.35,0]},{"t":120}],"ix":2},"a":{"a":0,"k":[250,321.697,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":3,"s":[0,0,100],"e":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[100,100,100],"e":[80,80,100]},{"i":{"x":[0.747,0.747,0.747],"y":[1,1,1]},"o":{"x":[0.31,0.31,0.31],"y":[0,0,0]},"t":22,"s":[80,80,100],"e":[80,80,100]},{"i":{"x":[0.75,0.75,0.75],"y":[1,1,1]},"o":{"x":[0.408,0.408,0.408],"y":[0,0,0]},"t":73,"s":[80,80,100],"e":[80,80,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":81,"s":[80,80,100],"e":[40,40,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":88,"s":[40,40,100],"e":[40,40,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":113.6,"s":[40,40,100],"e":[0,0,100]},{"t":120}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-28.765],[28.765,0],[0,28.765],[-28.765,0]],"o":[[0,28.765],[-28.765,0],[0,-28.765],[28.765,0]],"v":[[52.083,0],[0,52.083],[-52.083,0],[0,-52.083]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":73,"s":[0.270999983245,0.352999997606,0.39199999641,1],"e":[1,1,1,1]},{"t":81}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[250,321.697],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-5.696,-0.805],[-0.488,0],[0,0],[-0.058,5.753],[0.076,0.525],[0,0]],"o":[[0,0],[-0.806,5.696],[0.483,0.069],[0,0],[5.752,0.059],[0.005,-0.53],[0,0],[0,0]],"v":[[-22.808,-35.081],[-30.85,23.169],[-21.995,34.941],[-20.537,35.044],[21.13,35.044],[31.651,24.733],[31.546,23.148],[23.504,-35.102]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.352999997606,0.39199999641,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.572,"y":1},"o":{"x":0.253,"y":0},"t":10,"s":[249.703,320],"e":[249.703,401.456],"to":[0,13.576],"ti":[0,-13.576]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":27,"s":[249.703,401.456],"e":[249.703,401.456],"to":[0,0],"ti":[0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":61,"s":[249.703,401.456],"e":[249.703,320],"to":[0,-13.576],"ti":[0,13.576]},{"t":73}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Tick Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,252.08,0],"ix":2},"a":{"a":0,"k":[250,250,0],"ix":1},"s":{"a":0,"k":[40,40,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[221.889,-160.282],[-98.672,160.282],[-221.889,37.063]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[100],"e":[75]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100.8,"s":[75],"e":[0]},{"t":114}],"ix":1},"e":{"a":0,"k":100,"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":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":90,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[250,244.8],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":90,"op":900,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,331.2,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":32,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-220,-115],[-300,115],[-252,115],[-172,-115]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[216,-115],[136,115],[184,115],[264,-115]],"c":true}]},{"t":61}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"rc","d":1,"s":{"a":0,"k":[280,230],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":36,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.840000107709,0.360000011968,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":32,"op":62,"st":10,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-360,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.615,0.615,0.667],"y":[1,1,1]},"o":{"x":[0.24,0.24,0.333],"y":[0,0,0]},"t":94,"s":[0,0,100],"e":[166,166,100]},{"t":120}],"ix":6}},"ao":0,"shapes":[{"ty":"rc","d":1,"s":{"a":0,"k":[280,280],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":742,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.098039224744,0.776470661163,0.4392157197,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":94,"s":[0],"e":[30]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.608],"y":[0]},"t":112,"s":[30],"e":[0]},{"t":120}],"ix":5},"lc":2,"lj":2,"bm":0,"d":[{"n":"d","nm":"dash","v":{"a":0,"k":0,"ix":1}},{"n":"g","nm":"gap","v":{"a":0,"k":110,"ix":2}},{"n":"o","nm":"offset","v":{"a":0,"k":0,"ix":7}}],"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":94,"op":121,"st":88,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":61,"s":[0],"e":[-360]},{"t":81}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":10,"s":[250,250,0],"e":[250,331.2,0],"to":[0,13.533,0],"ti":[0,-13.533,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":32,"s":[250,331.2,0],"e":[250,331.2,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":61,"s":[250,331.2,0],"e":[250,250,0],"to":[0,-13.533,0],"ti":[0,13.533,0]},{"t":81}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100],"e":[100,100,100]},{"i":{"x":[0.751,0.751,0.751],"y":[1,1,1]},"o":{"x":[0.311,0.311,0.311],"y":[0,0,0]},"t":10,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.746,0.746,0.746],"y":[1,1,1]},"o":{"x":[0.405,0.405,0.405],"y":[0,0,0]},"t":73,"s":[100,100,100],"e":[126,126,100]},{"t":81}],"ix":6}},"ao":0,"shapes":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":10,"s":[280,280],"e":[280,230]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"t":32,"s":[280,230],"e":[280,230]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":61,"s":[280,230],"e":[280,280]},{"t":81}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[742],"e":[36]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[36],"e":[36]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":61,"s":[36],"e":[742]},{"t":81}],"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":73,"s":[1,0.756862804936,0.027450982262,1],"e":[0.098039217293,0.776470601559,0.439215689898,1]},{"t":81}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Lock Handle Outlines","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[0],"e":[-15]},{"t":55}],"ix":10},"p":{"a":0,"k":[-82.537,-107,0],"ix":2},"a":{"a":0,"k":[146.829,217.75,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-56.978,0],[0,-47.575],[0,0]],"o":[[0,0],[-0.002,-47.575],[56.977,0],[0,0],[0,0]],"v":[[-103.166,92.292],[-103.166,-6.152],[0,-92.292],[103.168,-6.152],[103.168,92.292]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.07058823529411765,0.07450980392156863,0.058823529411764705,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":64.642,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[100],"e":[84]},{"t":55}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":3,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":10,"s":[249.995,350],"e":[249.995,125.458],"to":[0,-37.424],"ti":[0,37.424]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":32,"s":[249.995,125.458],"e":[249.995,125.458],"to":[0,0],"ti":[0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":61,"s":[249.995,125.458],"e":[249.995,372],"to":[0,41.09],"ti":[0,-41.09]},{"t":73}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":10,"op":74,"st":0,"bm":0}],"markers":[]}

frontend/src/components/GuestPlaceholderScreen.tsx

@@ -1,25 +1,21 @@
 import React, { useState } from 'react';
-import { Image } from 'react-native';
-import { YStack, Text, Button, XStack } from 'tamagui';
+import { YStack, Text, Button } from 'tamagui';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useNavigation , NavigationProp } from '@react-navigation/native';
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 
 import { RootStackParamList } from '../type';
-import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 import BenefitsModal from './BenefitsModal';
 
 interface GuestPlaceholderScreenProps {
   title?: string;
   description?: string;
-  iconName?: string;
 }
 
 const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
   title = 'Join the Community',
   description = 'Sign up or sign in to access personalized features, interact with the community, and manage your profile.',
-  iconName = 'user-lock',
 }) => {
-  // removed isDarkMode variable
   const inset = useSafeAreaInsets();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [isBenefitsModalVisible, setIsBenefitsModalVisible] = useState(false);
@@ -36,18 +32,22 @@ const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
       animation="bouncy"
       enterStyle={{ opacity: 0, y: 15, scale: 0.95 }}
     >
-      <YStack 
-        alignItems="center" 
-        justifyContent="center" 
-        backgroundColor="$backgroundLight"
-        width={100} 
-        height={100} 
-        borderRadius={50}
+      <YStack
+        alignItems="center"
+        justifyContent="center"
         marginBottom="$4"
         animation="bouncy"
         enterStyle={{ opacity: 0, scale: 0.5 }}
       >
-        <FontAwesome5 name={iconName} size={40} color="$color" />
+        <LottieView
+          source={require('../assets/LottieAnimation/lock-animation.json')}
+          autoPlay
+          loop
+          style={{
+            width: 240,
+            height: 240,
+          }}
+        />
       </YStack>
 
       <Text
@@ -81,7 +81,7 @@ const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
           onPress={() => {
             navigation.reset({
               index: 0,
-              routes: [{name: 'LoginScreen'}],
+              routes: [{ name: 'LoginScreen' }],
             });
           }}
         >
@@ -98,7 +98,7 @@ const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
           pressStyle={{ scale: 0.97 }}
           animation="fast"
           onPress={() => {
-             navigation.navigate('SignUpScreenFirst');
+            navigation.navigate('SignUpScreenFirst');
           }}
         >
           <Text fontSize={18} color="$color" fontWeight="600">
@@ -116,7 +116,12 @@ const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
         animation="fast"
         onPress={() => setIsBenefitsModalVisible(true)}
       >
-        <Text fontSize={15} color="$color10" fontWeight="600" textDecorationLine="underline">
+        <Text
+          fontSize={15}
+          color="$color10"
+          fontWeight="600"
+          textDecorationLine="underline"
+        >
           Why should I create an account?
         </Text>
       </Button>
@@ -133,4 +138,4 @@ const GuestPlaceholderScreen: React.FC<GuestPlaceholderScreenProps> = ({
   );
 };
 
-export default GuestPlaceholderScreen;
+export default GuestPlaceholderScreen;