Skip to content

Commit

Permalink
Landing Page Done
Browse files Browse the repository at this point in the history
  • Loading branch information
@MuhammadHassan03
MuhammadHassan03 committed Sep 6, 2024
1 parent 8c18904 commit 64a0beb
Show file tree
Hide file tree
Showing 9 changed files with 408 additions and 577 deletions.
123 changes: 4 additions & 119 deletions packages/app/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Footer() {
);
})}</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
<View style={{ flexDirection: xs || sm || md ? 'row' : 'column', alignItems: 'flex-start', justifyContent: 'center', gap: xs || sm || md ? 10 : 0 }}>
<RLink >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
<MaterialCommunityIcons
Expand Down Expand Up @@ -99,130 +99,13 @@ export default function Footer() {
<RText>Github</RText>
</View>
</RLink>
{/* <RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="facebook"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Facebook</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="instagram"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Instagram</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<MaterialCommunityIcons
name="instagram"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Instagram</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<MaterialCommunityIcons
name="twitter"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>X</RText>
</View>
</RLink>
<RLink >
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="github"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Github</RText>
</View>
</RLink> */}
</View>
<View>
<RText style={styles.credit}>
© 2024 Bierman Collective. All rights reserved.
</RText>
</View>
</View>
{/* <View style={styles.firstMainContainer}>
<View style={styles.firstContainer}>
<RImage
source={{
// TODO: Update this to use the PackRat logo from the assets folder
uri: 'https://github.com/andrew-bierman/PackRat/blob/main/packages/app/assets/packrat_icon.png?raw=true',
width: 40,
height: 40,
}}
width={40}
height={40}
style={styles.logo}
alt="PackRat Logo"
onClick={() => {
navigate('/');
}}
/>
<RText
style={{ fontSize: 18, fontWeight: 'normal', cursor: 'pointer' }}
onPress={() => {
navigate('/');
}}
>
The Ultimate Travel App
</RText>
</View>
<View style={styles.navLinks}>
{footorLinks.map((item) => {
return (
<RLink src={item.link}>
<RText style={styles.navItem}>{item.label}</RText>
</RLink>
);
})}
</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 />
</View>
</View> */}
</View>
);
}
Expand All @@ -243,14 +126,16 @@ const loadStyles = (currentTheme, xs, sm, md) => {
},
mainFirstContainer: {
width: '100%',
flexDirection: 'row',
flexDirection: xs || sm || md ? 'column' : 'row',
flexWrap: 'wrap',
paddingTop: 80,
paddingBottom: 40,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'space-evenly',
position: 'relative',
bottom: 0,
gap: xs || sm || md ? 10 : 0
},
firstMainContainer: {
width: '95%',
Expand Down
33 changes: 19 additions & 14 deletions packages/app/components/landing_page/FAQS.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ export const FAQS = () => {
{FaqList.map((faq, index) => {
return (
<View>
<View onPress={() => toggleAnswer(index)} style={styles.faqQuestion}>
<View
onPress={() => toggleAnswer(index)}
style={styles.faqQuestion}
>
<RText>{faq.question}</RText>
<MaterialCommunityIcons
name={visibleAnswers[index] ? 'minus' : 'plus'}
Expand All @@ -56,8 +59,8 @@ export const FAQS = () => {
src={PakRat_FAQS}
style={{
backgroundColor: 'transparent',
width: 659,
height: 550,
width: xs || sm || md ? 359 : 659,
height: xs || sm || md ? 250 : 550,
}}
alt="PackRat Logo"
/>
Expand All @@ -69,19 +72,19 @@ export const FAQS = () => {
const loadStyles = (currentTheme, xs, sm, md) => {
return StyleSheet.create({
faqMainContainer: {
flexDirection: 'row',
alignItems: 'center',
flexDirection: xs || sm || md ? 'column' : 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
gap: 10,
width: '100vw',
maxWidth: '100vw',
paddingTop: 20,
paddingBottom: 20,
},
faqFirstContainer: {
},
faqFirstContainer: {},
faqMainTitle: {
fontSize: 26,
fontSize: xs || sm || md ? 20 : 26,
textAlign : xs || sm || md ? 'center' : 'auto',
fontWeight: 'bold',
color: currentTheme.colors.textPrimary,
marginBottom: 30,
Expand All @@ -94,14 +97,16 @@ const loadStyles = (currentTheme, xs, sm, md) => {
justifyContent: 'space-between',
marginTop: 4,
marginBottom: 4,
gap: 10,

marginLeft: xs || sm || md ? 10 : 0,
marginRight: xs || sm || md ? 10 : 0,
gap: xs || sm || md ? 2 : 10,
},
faqAnswer: {
marginLeft: 0,
width: '24vw',
},
faqSecondContainer: {
// marginLeft: 0,
width: xs || sm || md ? '100%' : '24vw',
marginLeft: xs || sm || md ? 10 : 0,
marginRight: xs || sm || md ? 10 : 0,
},
faqSecondContainer: {},
});
};
90 changes: 32 additions & 58 deletions packages/app/components/landing_page/LandingPageAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { FAQ_ITEMS } from './constants';
import useTheme from 'app/hooks/useTheme';
import PackRatPreview from 'app/assets/PackRat Preview.jpg';
import { useEffect, useState } from 'react';
import useResponsive from 'app/hooks/useResponsive';

const RButton: any = OriginalRButton;

Expand All @@ -16,7 +17,7 @@ export const LandingPageAccordion = () => {
const { currentTheme } = useTheme();
const [index, setIndex] = useState(0);
const [data, setData] = useState(FAQ_ITEMS[index]);
// const [expanded, toggleExpanded] = useAccordionState();
const { xxs, xs, xxl, sm, lg, md } = useResponsive();

useEffect(() => {
setData(FAQ_ITEMS[index]);
Expand All @@ -39,69 +40,42 @@ export const LandingPageAccordion = () => {
setIndex(item.index);
};
return (
// <RCard style={styles.card}>
// <View style={styles.cardHeader}>
// <MaterialIcons name={iconName} style={styles.icon} />
// <RText style={styles.featureText}>{title}</RText>
// <RText style={styles.cardContent}>{content}</RText>
// </View>
// </RCard>
<View style={styles.landingPageAccordionContainer}>
<View style={styles.landingPageAccordationSecondContainer}>
<RText style={styles.cardContent}>{data.content}</RText>
<RImage
src={data.frameLink}
style={{
backgroundColor: 'transparent',
width: 330,
height: 600,
}}
alt="PackRat Logo"
/>

</View>
<View style={styles.landingPageAccordionFirstContainer}>
<RButton onClick={panUp} style={styles.panButton}>
<MaterialCommunityIcons
name="pan-left"
size={30}
color={currentTheme.colors.textPrimary}
/>
</RButton>
<View>
{/* {FAQ_ITEMS.map((item) => {
return (
<RText
onClick={() => {
handleTextClick(item);
}}
style={{ textAlign: 'left', cursor: 'pointer', width: 'auto' }}
>
{item.title}
</RText>
);
})} */}
<RText
onClick={() => {
handleTextClick(FAQ_ITEMS[index]);
<RButton onClick={panUp} style={styles.panButton}>
<MaterialCommunityIcons
name="arrow-left-thin"
size={30}
color={currentTheme.colors.textPrimary}
/>
</RButton>
</View>
<View style={{flexDirection: xs || sm || md ? 'column' : 'row', alignItems: 'center', justifyContent: 'center', gap: 50,}}>
<RText style={styles.cardContent}>{data.content}</RText>
<RImage
src={data.frameLink}
style={{
backgroundColor: 'transparent',
width: 330,
height: 600,
}}
style={{ textAlign: 'center', cursor: 'pointer', width: 'auto' }}
>
{FAQ_ITEMS[index].title}
</RText>
/>
</View>
<RButton onClick={panDown} style={styles.panButton}>
<MaterialCommunityIcons
name="pan-right"
size={30}
color={currentTheme.colors.textPrimary}
style={
{
// width: '100%',
<View>
<RButton onClick={panDown} style={styles.panButton}>
<MaterialCommunityIcons
name="arrow-right-thin"
size={30}
color={currentTheme.colors.textPrimary}
style={
{
// width: '100%',
}
}
}
/>
</RButton>
/>
</RButton>
</View>
</View>
</View>
);
Expand Down
Loading

0 comments on commit 64a0beb

Please sign in to comment.