Skip to content

Commit

Permalink
Landing Page and Sign in Page Complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@MuhammadHassan03
MuhammadHassan03 committed Aug 27, 2024
1 parent a802044 commit 5c1ef27
Show file tree
Hide file tree
Showing 9 changed files with 215 additions and 67 deletions.
Binary file modified packages/app/assets/PackRat Preview.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/app/assets/applelink.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 19 additions & 14 deletions packages/app/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { StyleSheet, Text, View } from 'react-native';
import { theme } from '../../theme';
import useTheme from '../../hooks/useTheme';
import { RImage, RLink, RText } from '@packrat/ui';
import { RImage, RLink, RSeparator, RText } from '@packrat/ui';
import { useNavigate } from 'app/hooks/navigation';
import { useMemo } from 'react';
import { footorLinks } from 'app/constants/footorLinks';
Expand All @@ -11,9 +11,9 @@ import useResponsive from 'app/hooks/useResponsive';
export default function Footer() {
const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
useTheme();
const {xs , sm} = useResponsive();
const { xs, sm } = useResponsive();
const styles = useMemo(() => {
return StyleSheet.create(loadStyles(currentTheme, xs , sm));
return StyleSheet.create(loadStyles(currentTheme, xs, sm));
}, [currentTheme]);
const year = new Date().getFullYear();
const navigate = useNavigate();
Expand Down Expand Up @@ -54,28 +54,34 @@ export default function Footer() {
);
})}
</View>
<View style={{paddingBottom: 30,}}>
<RSeparator
style={{
backgroundColor: currentTheme.colors.textPrimary,
borderWidth: '0.4',
borderColor: currentTheme.colors.textPrimary,
opacity: '0.1',
}}
/>
</View>
<View style={styles.lastContainer}>
<Text style={styles.credit}>
© 2024 Bierman Collective. All rights reserved.
</Text>
{/* <NewsLetter /> */}
<NewsLetter />
</View>
</View>
</View>
);
}

const loadStyles = (currentTheme, xs , sm) => {

const loadStyles = (currentTheme, xs, sm) => {
{
return StyleSheet.create({
mainContainer: {
width: '100vw',
paddingTop: 80,
paddingBottom: 40,
// backgroundColor: '#f6f6f6',

// border: '1px solid red',
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
Expand All @@ -84,7 +90,6 @@ const loadStyles = (currentTheme, xs , sm) => {
},
firstMainContainer: {
width: '95%',
// border: '1px solid black',
},
firstContainer: {
width: '100%',
Expand All @@ -111,14 +116,14 @@ const loadStyles = (currentTheme, xs , sm) => {
fontSize: 13,
textAlign: xs ? 'center' : 'left',
fontWeight: 'normal',
paddingTop : sm ? 10 : 'auto',
},
lastContainer: {
flexDirection: 'row',
flexDirection: sm ? 'column-reverse' : 'row',
alignItems: 'center',
justifyContent: 'space-between',
border: '1px solid red',
justifyContent: 'space-between',
width: xs ? '100%' : 'auto',
}
},
});
}
};
153 changes: 139 additions & 14 deletions packages/app/components/landing_page/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Platform, ScrollView, View, Text } from 'react-native';
import PackRatPreview from 'app/assets/PackRat Preview.jpg';
import AppleLink from 'app/assets/applelink.svg'
import {
RButton as OriginalRButton,
RText,
Expand Down Expand Up @@ -32,7 +34,7 @@ const LandingPage = () => {
const { xs, sm, md, lg, xl, xxl } = useResponsive();

return (
<ScrollView >
<ScrollView>
<RStack style={styles.container}>
<View
style={
Expand Down Expand Up @@ -79,9 +81,128 @@ const LandingPage = () => {
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
gap: 8,
}}
>
<RButton
<RLink>
<View
style={{
width: 150, height: 45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
backgroundColor: currentTheme.colors.textPrimary,
color: currentTheme.colors.textPrimary,
borderWidth: 1,
borderColor: currentTheme.colors.cardBorderPrimary,
overflow: 'hidden',
paddingHorizontal: 8,
borderRadius: 8,
fontSize: 16,
fontWeight: 'normal',
}}
>
<View>
<MaterialCommunityIcons
name="apple"
size={30}
color={currentTheme.colors.background}
style={{
width: '100%',
}}
/>
</View>
<View style={{flexDirection: 'column', gap: 0,}}>
<RText
style={{
width: '100%',
position: 'relative',
top: '0.4rem',
color: currentTheme.colors.background,
textAlign: 'left',
fontSize: 14,
fontWeight: 'normal',
}}
>
Get it on the
</RText>
<RText
style={{
width: '100%',
color: currentTheme.colors.background,
textAlign: 'left',
fontSize: 19,
position: 'relative',
bottom: '0.3rem',
fontWeight: 'bold',
}}
>
App Store
</RText>
</View>
</View>
</RLink>
<RLink>
<View
style={{
width: 160, height: 45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
backgroundColor: currentTheme.colors.textPrimary,
color: currentTheme.colors.textPrimary,
borderWidth: 1,
borderColor: currentTheme.colors.cardBorderPrimary,
overflow: 'hidden',
paddingHorizontal: 8,
borderRadius: 8,
fontSize: 16,
fontWeight: 'normal',
}}
>
<View>
<MaterialCommunityIcons
name="google-play"
size={30}
color={currentTheme.colors.background}
style={{
width: '100%',
}}
/>
</View>
<View style={{flexDirection: 'column', gap: 0,}}>
<RText
style={{
width: '100%',
position: 'relative',
top: '0.4rem',
color: currentTheme.colors.background,
textAlign: 'left',
fontSize: 14,
fontWeight: 'normal',
}}
>
Get it on the
</RText>
<RText
style={{
width: '100%',
color: currentTheme.colors.background,
textAlign: 'left',
fontSize: 19,
position: 'relative',
bottom: '0.3rem',
fontWeight: 'bold',
}}
>
Google Play
</RText>
</View>
</View>
</RLink>
{/* <RButton
title="App Store"
paddingVertical={30}
paddingHorizontal={15}
Expand Down Expand Up @@ -210,22 +331,26 @@ const LandingPage = () => {
</RText>
</View>
</RStack>
</RButton>
</RButton> */}
</View>
</View>
</View>
</View>
<View style={styles.featureImage}>
<RImage
source={{
uri: 'https://raw.githubusercontent.com/andrew-bierman/PackRat/feat/tamagui_landing_page/packages/app/assets/PackRat%20Preview.jpg',
width: 259,
height: 530,
}}

alt="PackRat Logo"
/>

<RImage
src={PackRatPreview}
// source={{
// uri: ,
// width: 259,
// height: 530,
// }}
style={{
backgroundColor: 'transparent',
width: 259,
height: 530,
}}
alt="PackRat Logo"
/>
</View>
</View>
<View style={styles.secondaryContentContainer}>
Expand Down Expand Up @@ -264,4 +389,4 @@ const LandingPage = () => {
);
};

export default LandingPage;
export default LandingPage;
26 changes: 12 additions & 14 deletions packages/app/components/newsLetter/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
import { RText, SubmitButton } from '@packrat/ui';
import { FormInput } from '@tamagui/lucide-icons';
import { Form, FormInput, RText, SubmitButton } from '@packrat/ui';
import useTheme from 'app/hooks/useTheme';
import { Form, View } from 'tamagui';
import { View } from 'tamagui';

export const NewsLetter = () => {
const {currentTheme} = useTheme();
const { currentTheme } = useTheme();
return (
<View>
<Form>
<Form>
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10,}}>
<FormInput
label="Email ID"
// keyboardType="email-address"
// label="Email ID"
keyboardType="email-address"
placeholder='Email Address'
name="email"
aria-label="Email"
/>
<SubmitButton
style={{
marginTop: 16,
backgroundColor: currentTheme.colors.tertiaryBlue,
backgroundColor: '#232323',
color: 'white',
}}
width="100%"
>
<RText style={{ color: currentTheme.colors.white }}>Sign In</RText>
<RText style={{ color: currentTheme.colors.white }}>Join Newsletter</RText>
</SubmitButton>
</Form>
</View>
</View>
</Form>
);
};
8 changes: 4 additions & 4 deletions packages/app/constants/footorLinks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ export const footorLinks = [
},
{
label: 'About the App',
link: '',
link: '/about',
},
{
label: 'Github Links',
link: '',
label: 'Github',
link: 'https://github.com/andrew-bierman/PackRat',
},
{
label: 'Privacy Policy ',
link: '',
},
{
label: 'Contacts?',
label: 'Contact',
link: '',
},
]
36 changes: 30 additions & 6 deletions packages/app/modules/auth/screens/LoginScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { useState } from 'react';
import useTheme from '../../../hooks/useTheme';
import { useGoogleAuth, useLogin } from 'app/modules/auth';
import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
import { RScrollView } from '@packrat/ui';
import { View } from 'tamagui';

const demoUser = {
email: '[email protected]',
Expand Down Expand Up @@ -31,11 +33,33 @@ export function LoginScreen() {
const { currentTheme } = useTheme();

return (
<SignInScreen
promptAsync={promptAsync}
signIn={signIn}
signInStatus={signInStatus}
isGoogleSignInReady={isGoogleSignInReady}
/>
<RScrollView contentContainerStyle={{ paddingBottom: 20 } as any}>
<View
style={{
width: '100%',
alignItems: 'center',
backgroundColor:
currentTheme.colors.background === '#0284c7'
? 'white'
: currentTheme.colors.background,
}}
>
<View
style={{
paddingTop: 32,
paddingBottom: 32,
width: '90%',
maxWidth: 400,
}}
>
<SignInScreen
promptAsync={promptAsync}
signIn={signIn}
signInStatus={signInStatus}
isGoogleSignInReady={isGoogleSignInReady}
/>
</View>
</View>
</RScrollView>
);
}
Loading

0 comments on commit 5c1ef27

Please sign in to comment.