Preparing Alpha Branch

apps/expo-lcagents/src/app/(tabs)/index.tsx

@@ -1,6 +1,8 @@
-import { View, XStack, Separator, ScrollView } from 'tamagui';
+import { View, XStack, Separator, ScrollView, Button } from 'tamagui';
 
-import { TamaHero, TamaCard } from '@kbve/expo-bbq';
+import { Activity, Airplay, BadgePoundSterling, BadgeHelp} from '@tamagui/lucide-icons';
+
+import { TamaHero, TamaCard, LottieHero, useBBQ } from '@kbve/expo-bbq';
 
 function HomeCards() {
 	return (
@@ -68,20 +70,55 @@ function HomeCards() {
 	);
 }
 
-export default function TabOneScreen() {
+export default function IndexScreen() {
+	const bbq = useBBQ();
+
+	const handlePress = async (route: string, params?: Record<string, any>) => {
+		bbq.go(route, params);
+	};
+
 	return (
 		<ScrollView>
+			<View flex={1} flexGrow={1} alignItems="center">
+				<LottieHero
+					lottieJSON={require('../../../assets/json/360-vr.json')}
+					backgroundImage={require('../../../assets/mask/unsplash_anime.jpg')}
+					title="Welcome to LC Agents!"
+					description="Yessir"
+					opacity={0.9}>
+					<Button
+						iconAfter={BadgePoundSterling}
+						size="$3"
+						onPress={() => handlePress('/invoice')}>
+						Payments
+					</Button>
+					<Button
+						iconAfter={BadgeHelp}
+						size="$3"
+						onPress={() => handlePress('/support')}>
+						Support
+					</Button>
+				</LottieHero>
+			</View>
+			<Separator marginVertical={15} />
 			<View flex={1} alignItems="center">
 				<TamaHero
 					backgroundImageUri="https://images.unsplash.com/photo-1711029028695-6db032f5c476?q=80&w=2056&auto=format&fit=crop"
 					title="LaMorte Consults LLC"
 					description="L & C Agency"
 					buttonOneText="Contact"
 					buttonTwoText="Support"
+					onButtonOnePress={() => handlePress('/contact')}
+					onButtonTwoPress={() =>
+						handlePress('https://kbve.com/support', {
+							discord: 'discord',
+						})
+					}
 				/>
 				<Separator marginVertical={15} />
 				<HomeCards />
 			</View>
+			<Separator marginVertical={15} />
 		</ScrollView>
 	);
 }

apps/expo-lcagents/src/app/menu.tsx

@@ -18,6 +18,8 @@ import {
 
 import { useNavigation, useRouter } from 'expo-router';
 
+import { useBBQ } from '@kbve/expo-bbq';
+
 const demos = ['vertical'] as const;
 const demosTitle: Record<(typeof demos)[number], string> = {
 	vertical: 'Vertical',
@@ -42,16 +44,10 @@ export function TabsDemo() {
 
 // Vertical Tabs implementation
 const VerticalTabs = () => {
-	const router = useRouter();
+	const bbq = useBBQ();
 
 	const handlePress = async (route: string, params?: Record<string, any>) => {
-		router.dismissAll();
-		setTimeout(() => {
-			router.navigate({
-				pathname: route,
-				params: params,
-			});
-		}, 0);
+		bbq.go(route,params);
 	};
 
 	return (

apps/kbve.com/src/content/journal/10-20.mdx

@@ -25,4 +25,14 @@ The feeling will be amazing, an idea to a production app within 72 hours.
 
 Let me update the deployment pipeline so that the beta branch will just push the code out for the expo.
 First we will start the development cycle of the `alpha` branch, which should push our code changes to the `alpha.lc-agents.com` but we still have not yet set that up.
-Since the site already looks like trash, we will just push the code out to main and then rotate out later on, once it gets better metrics.
+Since the site already looks like trash, we will just push the code out to main and then rotate out later on, once it gets better metrics.
+
+Okay, updated the lottie animations and the dev branch pipeline!
+This should make it a bit easier for us to have the code migrations occur without breaking the whole cicd.
+
+**Lottie**
+
+Within the `expo-bbq`, we will start with a lottie hero, which will appear on the first load of the application / website.
+I am usually against this type of flow, usually having a heavy website is a bit of a burden but there are some amazing tricks we can utilize in the future to help us out.
+The lottie json is around 200kb but an optimized dot lottie would bring it down to 30kb, however we can only use the optimization on the website because the react native integration for lottie seems to be a bit broken.
+For this aspect of the integration, we will create the hero component and 

packages/expo-bbq/src/components/TamaHero.tsx

@@ -42,7 +42,7 @@ export function TamaHero({
 			<Image
 				source={{ uri: backgroundImageUri }}
 				style={{ width: '100%', height: '100%', position: 'absolute' }}
-				resizeMode="cover"
+				objectFit="cover"
 			/>
 			<YStack
 				space

packages/expo-bbq/src/components/animation/LottieHero.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Image, YStack, View, styled, H1 as TamaguiH1, H4 as TamaguiH4 } from 'tamagui';
+import { LottieAnimation } from './LottieAnimation';
+
+const StyledH1 = styled(TamaguiH1, {
+  textAlign: 'center',
+  color: 'white',
+  textShadowColor: 'black',
+  textShadowOffset: { width: -1, height: -1 },
+  textShadowRadius: 2,
+  shadowOpacity: 1,
+});
+
+
+const StyledH4 = styled(TamaguiH4, {
+  textAlign: 'center',
+  color: 'white',
+  textShadowColor: 'black',
+  textShadowOffset: { width: -1, height: -1 },
+  textShadowRadius: 2,
+  shadowOpacity: 1,
+});
+
+interface LottieHeroProps {
+	backgroundImage: any;
+	lottieJSON: any;
+	title: string;
+	description: string;
+	opacity?: number; // Optional opacity for the animation and image
+	children?: React.ReactNode; // Content (buttons or any elements) to be passed as children
+}
+
+export function LottieHero({
+	backgroundImage,
+	lottieJSON,
+	title,
+	description,
+	opacity = 1.0,
+	children,
+}: LottieHeroProps) {
+	return (
+		<YStack
+			style={{
+				width: '100%',
+				height: 750,
+				overflow: 'hidden',
+				position: 'relative',
+			}}>
+			{/* Background Image */}
+			<Image
+				source={backgroundImage}
+				style={{
+					width: '100%',
+					height: '100%',
+					position: 'absolute',
+					opacity,
+				}}
+				objectFit="cover"
+			/>
+
+			{/* Lottie Animation */}
+			<View
+				style={{
+					position: 'absolute',
+					width: '100%',
+					height: '100%',
+					opacity,
+				}}>
+				<LottieAnimation
+					lottieJSON={lottieJSON}
+					style={{ width: '100%', height: '100%' }}
+				/>
+			</View>
+
+			{/* Content Overlay */}
+			<YStack
+				gap={1}
+				style={{
+					flex: 1,
+					justifyContent: 'center',
+					alignItems: 'center',
+					padding: 20,
+					backgroundColor: 'rgba(0, 0, 0, 0.5)',
+				}}>
+				<StyledH1
+					color="white"
+					style={{
+						textAlign: 'center',
+						textShadowColor: 'black',
+						textShadowOffset: { width: -1, height: -1 },
+						textShadowRadius: 2,
+						shadowOpacity: 1,
+					}}>
+					{title}
+				</StyledH1>
+				<StyledH4
+					style={{
+						color: 'white',
+						textAlign: 'center',
+						margin: '10px 0',
+            textShadowColor: 'black',
+						textShadowOffset: { width: -1, height: -1 },
+						textShadowRadius: 2,
+						shadowOpacity: 1,
+					}}>
+					{description}
+				</StyledH4>
+				{/* Render any children passed into the component */}
+				{children}
+			</YStack>
+		</YStack>
+	);
+}

packages/expo-bbq/src/components/card/InstaCard.tsx

@@ -0,0 +1,148 @@
+import React, { ReactNode, useState } from 'react'
+import { YStack, XStack, Text, Image, Input, Button, Avatar, Separator, PopoverProps } from 'tamagui'
+import { Heart, MessageCircle, Bookmark, Share2, MoreVertical } from '@tamagui/lucide-icons'
+import { Popover, Adapt } from 'tamagui'
+
+interface PopoverDemoProps extends PopoverProps {
+    Icon?: any
+    Name?: string
+    shouldAdapt?: boolean
+  }
+
+export function InstaCard() {
+  const [shouldAdapt, setShouldAdapt] = useState(true)
+
+  return (
+    <YStack
+      width={400}
+      backgroundColor="$background"
+      borderRadius="$4"
+      shadowColor="$shadowColor"
+      shadowOffset={{ width: 0, height: 4 }}
+      shadowOpacity={0.1}
+      shadowRadius={20}
+    >
+      {/* Header */}
+      <XStack justifyContent="space-between" padding="$3">
+        <XStack alignItems="center" space="$2">
+          <Avatar circular size="$3">
+            <Avatar.Image
+              source={{ uri: "https://source.unsplash.com/50x50/?portrait" }}
+              width="100%"
+              height="100%"
+            />
+          </Avatar>
+          <YStack>
+            <Text fontWeight="600" fontSize="$2">leroy_jenkins72</Text>
+            <Text fontSize="$1" color="$gray10">Somewhere</Text>
+          </YStack>
+        </XStack>
+
+        {/* Popover Button */}
+        <PopoverDemo placement="bottom" Icon={MoreVertical} Name="options-popover" />
+      </XStack>
+
+      {/* Image */}
+      <Image
+        source={{ uri: "https://source.unsplash.com/301x301/?random" }}
+        width="100%"
+        height={300}
+        borderRadius="$2"
+      />
+
+      {/* Action Buttons */}
+      <XStack padding="$3" justifyContent="space-between" alignItems="center">
+        <XStack space="$3">
+          <PopoverDemo placement="bottom" Icon={Heart} Name="like-popover" />
+          <PopoverDemo placement="bottom" Icon={MessageCircle} Name="comment-popover" />
+          <PopoverDemo placement="bottom" Icon={Share2} Name="share-popover" />
+        </XStack>
+        <PopoverDemo placement="bottom" Icon={Bookmark} Name="bookmark-popover" />
+      </XStack>
+
+      {/* Likes Section */}
+      <XStack paddingHorizontal="$3" space="$2" alignItems="center">
+        <Avatar circular size="$2">
+          <Avatar.Image
+            source={{ uri: "https://source.unsplash.com/40x40/?portrait?1" }}
+            width="100%"
+            height="100%"
+          />
+        </Avatar>
+        <Avatar circular size="$2">
+          <Avatar.Image
+            source={{ uri: "https://source.unsplash.com/40x40/?portrait?2" }}
+            width="100%"
+            height="100%"
+          />
+        </Avatar>
+        <Avatar circular size="$2">
+          <Avatar.Image
+            source={{ uri: "https://source.unsplash.com/40x40/?portrait?3" }}
+            width="100%"
+            height="100%"
+          />
+        </Avatar>
+        <Text fontSize="$2">
+          Liked by <Text fontWeight="600">Mamba UI</Text> and <Text fontWeight="600">86 others</Text>
+        </Text>
+      </XStack>
+
+      {/* Caption */}
+      <YStack paddingHorizontal="$3" paddingVertical="$2">
+        <Text fontSize="$2">
+          <Text fontWeight="600">leroy_jenkins72 </Text>
+          Nemo ea quasi debitis impedit!
+        </Text>
+      </YStack>
+
+      {/* Comment Input */}
+      <Separator marginHorizontal="$3" />
+      <Input margin="$3" placeholder="Add a comment..." />
+    </YStack>
+  )
+}
+
+// PopoverDemo component
+
+function PopoverDemo({ Icon, Name, shouldAdapt = true, ...props }: PopoverDemoProps) {
+    return (
+    <Popover size="$5" allowFlip {...props}>
+      <Popover.Trigger asChild>
+        <Button iconAfter={Icon} />
+      </Popover.Trigger>
+
+      {shouldAdapt && (
+        <Adapt platform="touch">
+          <Popover.Sheet modal dismissOnSnapToBottom>
+            <Popover.Sheet.Frame padding="$4">
+              <Adapt.Contents />
+            </Popover.Sheet.Frame>
+            <Popover.Sheet.Overlay
+              animation="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+            />
+          </Popover.Sheet>
+        </Adapt>
+      )}
+
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        elevate
+        animation={['quick', { opacity: { overshootClamping: true } }]}
+      >
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        <YStack gap="$3">
+          <Text>{Name} content goes here.</Text>
+          <Popover.Close asChild>
+            <Button size="$3">Close</Button>
+          </Popover.Close>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  )
+}