├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── General │ ├── DownloadButtons.tsx │ ├── GlobalStyle.ts │ ├── ParallaxText.tsx │ └── Preloader.tsx └── UI │ ├── Available.tsx │ ├── Beta.tsx │ ├── Enhanced.tsx │ ├── FAQ.tsx │ ├── Footer.tsx │ ├── Hero.tsx │ ├── HeroDecor.tsx │ ├── Navbar.tsx │ ├── ProductDisp.tsx │ ├── Testimonials.tsx │ ├── Works.tsx │ └── index.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── api │ └── hello.ts └── index.tsx ├── public ├── favicon.ico ├── images │ ├── arrow-left.png │ ├── arrow-right.png │ ├── available_1.png │ ├── available_2.png │ ├── beta_ellipse.png │ ├── bottom-right-flash.png │ ├── bread.png │ ├── frame_1.png │ ├── frame_2.png │ ├── frame_3.png │ ├── half-phone.png │ ├── ios-store.png │ ├── person_1.png │ ├── person_2.png │ ├── person_3.png │ ├── play-store.png │ ├── star-blue.png │ ├── star-orange.png │ ├── star-outline.png │ ├── star.png │ ├── top-left-cross.png │ ├── top-left-flash.png │ ├── top-right-cross.png │ └── yellow-star.png ├── next.svg ├── svgs │ ├── 1.svg │ ├── 2.svg │ ├── 3.svg │ ├── FAQ.svg │ ├── available_1.svg │ ├── available_2.svg │ ├── ic-facebook.svg │ ├── ic-google.svg │ ├── ic-twitter.svg │ ├── works_1.svg │ ├── works_2.svg │ └── works_3.svg ├── thirteen.svg └── vercel.svg ├── styles └── globals.css ├── tsconfig.json ├── utils └── motionVariants.ts └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | # PocketPal 40 | -------------------------------------------------------------------------------- /components/General/DownloadButtons.tsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import Image from "next/image"; 3 | 4 | const DownloadButtons = () => { 5 | return ( 6 | 7 | 8 | 21 |
22 | 23 | 24 | 37 |
38 | 39 | 40 | ); 41 | } 42 | 43 | export default DownloadButtons; 44 | 45 | const ButtonContainer = styled.div` 46 | flex: 1; 47 | display: flex; 48 | position: relative; 49 | 50 | @media (max-width: 768px) { 51 | align-items: center; 52 | justify-content: center; 53 | gap: 1rem; 54 | width: 100%; 55 | } 56 | `; 57 | 58 | const ButtonInner = styled.div` 59 | position: relative; 60 | z-index: 2; 61 | margin: 0 0.5rem; 62 | 63 | & > div { 64 | position: absolute; 65 | width: 100%; 66 | height: 100%; 67 | background: var(--color-tertiary); 68 | position: absolute; 69 | top: 3px; 70 | left: 3px; 71 | z-index: -1; 72 | transition: all 0.3s ease-in-out; 73 | } 74 | 75 | &:hover { 76 | div { 77 | top: 0; 78 | left: 0; 79 | } 80 | } 81 | 82 | &:nth-child(2) { 83 | button { 84 | background: #cefe20; 85 | } 86 | } 87 | 88 | @media (max-width: 768px) { 89 | margin: 0.2rem; 90 | } 91 | `; 92 | 93 | const Button = styled.button` 94 | width: auto; 95 | padding: 0 0.5rem; 96 | display: flex; 97 | align-items: center; 98 | gap: 1px; 99 | background: var(--color-orange); 100 | border: 2px solid var(--color-primary); 101 | position: relative; 102 | z-index: 1; 103 | cursor: pointer; 104 | transition: all 0.3s ease-in-out; 105 | 106 | @media (max-width: 768px) { 107 | padding: 0.5rem 0.5rem; 108 | width: 100%; 109 | } 110 | `; 111 | 112 | const Text = styled.div` 113 | span { 114 | font-weight: var(--font-weight-normal); 115 | font-size: 8px; 116 | } 117 | font-family: var(--font-family-lufga); 118 | font-weight: var(--font-weight-normal); 119 | font-size: var(--font-size-lg); 120 | color: var(--color-tertiary); 121 | text-align: left; 122 | 123 | @media (max-width: 768px) { 124 | span { 125 | font-size: 6px; 126 | } 127 | font-size: var(--font-size-sm); 128 | } 129 | `; -------------------------------------------------------------------------------- /components/General/GlobalStyle.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export const GlobalStyle = createGlobalStyle` 4 | :root { 5 | //font family 6 | --font-primary: 'Montserrat', sans-serif; 7 | --font-family-clash-display: 'Clash Display', sans-serif; 8 | --font-family-lufga: 'Lufga', sans-serif; 9 | 10 | //font size 11 | --font-size-xxs: 0.625rem; // 10px 12 | --font-size-xs: 0.75rem; // 12px 13 | --font-size-sm: 0.875rem; // 14px 14 | --font-size-md: 1rem; // 16px 15 | --font-size-lg: 1.125rem; // 18px 16 | --font-size-xl: 1.25rem; // 20px 17 | --font-size-xxl: 1.5rem; // 24px 18 | --font-size-xxxl: 2rem; // 32px 19 | --font-size-xxxxl: 2.5rem; // 40px 20 | 21 | //font weight 22 | --font-weight-light: 300; 23 | --font-weight-normal: 400; 24 | --font-weight-medium: 500; 25 | --font-weight-semi-bold: 600; 26 | --font-weight-bold: 700; 27 | 28 | //line height 29 | --line-height-xs: 1.2; // 12px 30 | --line-height-sm: 1.4; // 14px 31 | --line-height-md: 1.6; // 16px 32 | --line-height-lg: 1.8; // 18px 33 | --line-height-xl: 2; // 20px 34 | 35 | // colors 36 | --color-primary: #000000; 37 | --color-secondary: #FFFFFF; 38 | --color-tertiary: #1E1E1E; 39 | --color-orange: #F16B4D; 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /components/General/ParallaxText.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | import { 3 | motion, 4 | useScroll, 5 | useSpring, 6 | useTransform, 7 | useMotionValue, 8 | useVelocity, 9 | useAnimationFrame, 10 | } from 'framer-motion'; 11 | import { wrap } from '@motionone/utils'; 12 | 13 | interface ParallaxProps { 14 | children: React.ReactNode; 15 | baseVelocity: number; 16 | } 17 | 18 | function ParallaxText({ children, baseVelocity = 100 }: ParallaxProps) { 19 | const baseX = useMotionValue(0); 20 | const { scrollY } = useScroll(); 21 | const scrollVelocity = useVelocity(scrollY); 22 | const smoothVelocity = useSpring(scrollVelocity, { 23 | damping: 50, 24 | stiffness: 400, 25 | }); 26 | const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], { 27 | clamp: false, 28 | }); 29 | 30 | /** 31 | * This is a magic wrapping for the length of the text - you 32 | * have to replace for wrapping that works for you or dynamically 33 | * calculate 34 | */ 35 | const x = useTransform(baseX, (v) => `${wrap(-20, -45, v)}%`); 36 | 37 | const directionFactor = useRef(1); 38 | useAnimationFrame((t, delta) => { 39 | let moveBy = directionFactor.current * baseVelocity * (delta / 1000); 40 | 41 | /** 42 | * This is what changes the direction of the scroll once we 43 | * switch scrolling directions. 44 | */ 45 | if (velocityFactor.get() < 0) { 46 | directionFactor.current = -1; 47 | } else if (velocityFactor.get() > 0) { 48 | directionFactor.current = 1; 49 | } 50 | 51 | moveBy += directionFactor.current * moveBy * velocityFactor.get(); 52 | 53 | baseX.set(baseX.get() + moveBy); 54 | }); 55 | 56 | /** 57 | * The number of times to repeat the child text should be dynamically calculated 58 | * based on the size of the text and viewport. Likewise, the x motion value is 59 | * currently wrapped between -20 and -45% - this 25% is derived from the fact 60 | * we have four children (100% / 4). This would also want deriving from the 61 | * dynamically generated number of children. 62 | */ 63 | return ( 64 |
65 | 66 | {children} 67 | {children} 68 | {children} 69 | {children} 70 | 71 |
72 | ); 73 | } 74 | 75 | export default ParallaxText; -------------------------------------------------------------------------------- /components/General/Preloader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | type PreloaderProps = { 4 | loading: boolean; 5 | }; 6 | 7 | const Preloader = ({ loading }: PreloaderProps) => { 8 | return ( 9 |
10 | 11 | 12 | 16 | 17 | 18 | 19 | 104 | 105 | 106 |
107 | ); 108 | }; 109 | 110 | export default Preloader; 111 | -------------------------------------------------------------------------------- /components/UI/Available.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import DownloadButtons from '../General/DownloadButtons'; 3 | import available_1 from '../../public/svgs/available_1.svg'; 4 | import available_2 from '../../public/svgs/available_2.svg'; 5 | import Image from 'next/image'; 6 | 7 | const Available = () => { 8 | return ( 9 | 10 | 11 | 12 |

Available Now on Each Platform

13 | 14 | 15 | 16 | 17 | hero image 18 | hero image 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default Available; 27 | 28 | const Wrapper = styled.div` 29 | width: 80%; 30 | margin: -140px auto 0; 31 | height: 100%; 32 | position: relative; 33 | background: #f4a460; 34 | border: 4px solid #1e1e1e; 35 | border-radius: 25px; 36 | @media (max-width: 768px) { 37 | width: 95%; 38 | flex-direction: column; 39 | padding: 0 2%; 40 | overflow: hidden; 41 | } 42 | `; 43 | 44 | const Inner = styled.div` 45 | width: 90%; 46 | margin: 0 auto; 47 | display: flex; 48 | align-items: center; 49 | justify-content: space-between; 50 | @media (max-width: 768px) { 51 | flex-direction: column; 52 | align-items: center; 53 | } 54 | `; 55 | 56 | const LHS = styled.div` 57 | display: flex; 58 | flex-direction: column; 59 | width: 50%; 60 | height: 100%; 61 | gap: 2em; 62 | @media (max-width: 768px) { 63 | width: 100%; 64 | padding: 2em 0; 65 | } 66 | h1 { 67 | font-size: var(--font-size-xxxl); 68 | font-weight: var(--font-weight-semi-bold); 69 | font-family: var(--font-family-clash-display); 70 | @media (max-width: 768px) { 71 | font-size: var(--font-size-xxl); 72 | text-align: center; 73 | } 74 | } 75 | `; 76 | 77 | const RHS = styled.div` 78 | display: flex; 79 | flex-direction: column; 80 | width: 50%; 81 | height: 100%; 82 | gap: 2em; 83 | padding: 2% 2% 0; 84 | @media (max-width: 768px) { 85 | width: 100%; 86 | } 87 | `; 88 | 89 | const ImageContainer = styled.div` 90 | justify-content: flex-end; 91 | display: flex; 92 | align-items: baseline; 93 | width: 100%; 94 | height: 100%; 95 | @media (max-width: 768px) { 96 | flex-direction: row; 97 | } 98 | img { 99 | object-fit: contain; 100 | 101 | @media (max-width: 768px) { 102 | width: 70%; 103 | } 104 | } 105 | `; 106 | -------------------------------------------------------------------------------- /components/UI/Beta.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import styled from 'styled-components'; 3 | import beta_ellipse from '../../public/images/beta_ellipse.png'; 4 | import ParallaxText from '../General/ParallaxText'; 5 | 6 | const Beta = () => { 7 | return ( 8 | 9 | 10 | 11 |
12 | beta_ellipse 13 |

Beta

14 | beta_ellipse 15 |
16 |

17 | all users who test the beta app gets a 2-month discount off premium 18 | services 19 |

20 |
21 | beta_ellipse 22 |

Beta

23 | beta_ellipse 24 |
25 |

26 | all users who test the beta app gets a 2-month discount off premium 27 | services 28 |

29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default Beta; 36 | 37 | const Wrapper = styled.div` 38 | width: 100%; 39 | height: 12vh; 40 | display: flex; 41 | background: #8db1fd; 42 | align-items: center; 43 | justify-content: center; 44 | 45 | @media (max-width: 768px) { 46 | height: 15vh; 47 | } 48 | `; 49 | 50 | const Inner = styled.div` 51 | width: 400%; 52 | transform: rotate(1deg); 53 | margin: 0 auto; 54 | display: flex; 55 | align-items: center; 56 | padding: 1%; 57 | background: #ffe6a9; 58 | border: 3px solid #1e1e1e; 59 | margin-right: -10%; 60 | margin-left: -10%; 61 | position: relative; 62 | z-index: 1; 63 | `; 64 | 65 | const DIV = styled.div` 66 | display: flex; 67 | align-items: center; 68 | margin: 0 1em; 69 | padding: 0.5em 0; 70 | 71 | & > img { 72 | width: 1rem; 73 | height: 1rem; 74 | margin: 0 0.5em; 75 | } 76 | 77 | @media (max-width: 768px) { 78 | & > img { 79 | width: 0.8rem; 80 | height: 0.8rem; 81 | } 82 | } 83 | `; 84 | 85 | const H2 = styled.h2` 86 | font-family: var(--font-family-clash-display); 87 | font-weight: var(--font-weight-semi-bold); 88 | font-size: 2.5rem; 89 | color: #1e1e1e; 90 | margin: 0 1em; 91 | 92 | @media (max-width: 768px) { 93 | font-size: 1.75rem; 94 | } 95 | `; 96 | 97 | const P = styled.p` 98 | font-family: var(--font-family-clash-display); 99 | font-weight: var(--font-weight-normal); 100 | font-size: 1.75rem; 101 | color: #1e1e1e; 102 | margin: 0 1em; 103 | 104 | @media (max-width: 768px) { 105 | font-size: 1.25rem; 106 | padding: 1em 0; 107 | } 108 | `; 109 | -------------------------------------------------------------------------------- /components/UI/Enhanced.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { motion } from 'framer-motion'; 3 | import { card, item } from '@/utils/motionVariants'; 4 | 5 | const Enhanced = () => { 6 | return ( 7 | 8 | 9 |
10 | 11 | Enhanced financial journey at every step 12 | 13 | 14 | Our platform provides personalized financial guidance, tailored 15 | notifications, optimized security measures, and virtual 16 | consultations with experts. We’re committed to enhancing your 17 | financial journey at every step, so you can achieve your goals with 18 | ease 19 | 20 |
21 | 22 | 23 |

Marketing

24 |

25 | Stay in the know with our marketing messages. We’ll keep you 26 | up-to-date on the latest product features, financial news, and 27 | insider tips to help you reach your goals. 28 |

29 | 30 | 31 |

Customer Support

32 |

33 | Get instant support with our push notifications. Whether you need 34 | help setting up your account or have a question about a 35 | transaction, our customer support team is just a notification 36 | away. 37 |

38 | 39 | 40 |

Account Security

41 |

42 | Stay Informed with our delivery alerts. We’ll keep you in the loop 43 | about any account activity, so you can stay on top of your 44 | finances and detect any fraudulent activity. 45 |

46 | 47 | 48 |

Sales

49 |

50 | Stay up-to-date with our app updates. We’re constantly improving 51 | our platform to provide you with the best possible experience 52 |

53 | 54 | 55 | 56 | 57 | ); 58 | }; 59 | 60 | export default Enhanced; 61 | 62 | const Wrapper = styled.div` 63 | background: #fcfaed; 64 | width: 100%; 65 | height: 100%; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | padding: 2em 0; 70 | `; 71 | 72 | const Inner = styled.div` 73 | width: 90%; 74 | height: 100%; 75 | display: flex; 76 | flex-direction: column; 77 | justify-content: center; 78 | align-items: center; 79 | `; 80 | 81 | const Header = styled(motion.div)` 82 | width: 100%; 83 | height: 100%; 84 | display: flex; 85 | align-items: center; 86 | gap: 3em; 87 | margin: 2em 0; 88 | h1 { 89 | font-family: var(--font-family-clash-display); 90 | font-weight: var(--font-weight-semi-bold); 91 | font-size: var(--font-size-xxxl); 92 | line-height: 39px; 93 | color: #1e1e1e; 94 | 95 | @media (max-width: 768px) { 96 | font-size: var(--font-size-xxl); 97 | } 98 | } 99 | p { 100 | width: 100%; 101 | margin-left: auto; 102 | font-family: var(--font-family-lufga); 103 | font-weight: var(--font-weight-medium); 104 | font-size: var(--font-size-md); 105 | line-height: 21px; 106 | color: var(--color-tertiary); 107 | 108 | @media (max-width: 768px) { 109 | font-size: var(--font-size-sm); 110 | } 111 | } 112 | 113 | @media (max-width: 768px) { 114 | flex-direction: column; 115 | gap: 1em; 116 | } 117 | `; 118 | 119 | const CardContainer = styled(motion.div)` 120 | width: 80%; 121 | height: 100%; 122 | display: grid; 123 | grid-template-columns: repeat(2, 1fr); 124 | grid-template-rows: repeat(2, 1fr); 125 | grid-gap: 2em; 126 | justify-items: center; 127 | align-items: center; 128 | position: relative; 129 | z-index: 2; 130 | @media (max-width: 768px) { 131 | grid-template-columns: repeat(1, 1fr); 132 | grid-template-rows: repeat(4, 1fr); 133 | width: 90%; 134 | } 135 | `; 136 | 137 | const Card = styled(motion.div)` 138 | width: 100%; 139 | height: 100%; 140 | display: flex; 141 | flex-direction: column; 142 | justify-content: center; 143 | align-items: center; 144 | background: #fcfaed; 145 | border: 2px solid var(--color-tertiary); 146 | border-radius: 25px; 147 | padding: 2em; 148 | position: relative; 149 | cursor: pointer; 150 | 151 | h2 { 152 | font-family: var(--font-family-clash-display); 153 | font-weight: var(--font-weight-semi-bold); 154 | font-size: var(--font-size-xxxl); 155 | line-height: 39px; 156 | color: var(--color-tertiary); 157 | margin-bottom: 0.5em; 158 | 159 | @media (max-width: 768px) { 160 | font-size: var(--font-size-xxl); 161 | } 162 | } 163 | p { 164 | font-family: var(--font-family-lufga); 165 | font-size: 1.2em; 166 | font-weight: 400; 167 | color: var(--color-tertiary); 168 | line-height: 1.5; 169 | 170 | @media (max-width: 768px) { 171 | font-size: var(--font-size-sm); 172 | } 173 | } 174 | 175 | &::after { 176 | content: ''; 177 | position: absolute; 178 | top: 0; 179 | left: 0; 180 | width: 100%; 181 | height: 100%; 182 | background: var(--color-tertiary); 183 | border: 2px solid var(--color-tertiary); 184 | border-radius: 25px; 185 | z-index: -1; 186 | transform-origin: center; 187 | transition: all 0.3s ease-in-out; 188 | } 189 | 190 | &:hover { 191 | &::after { 192 | top: 10px; 193 | left: 10px; 194 | } 195 | } 196 | 197 | @media (max-width: 768px) { 198 | padding: 1em; 199 | } 200 | `; 201 | -------------------------------------------------------------------------------- /components/UI/FAQ.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import styled from 'styled-components'; 3 | import faq from '@/public/svgs/FAQ.svg'; 4 | import one from '@/public/svgs/1.svg'; 5 | import two from '@/public/svgs/2.svg'; 6 | import three from '@/public/svgs/3.svg'; 7 | 8 | const FAQ = () => { 9 | return ( 10 | 11 |
12 | 13 | 14 |

FAQ's

15 | FAQ 16 | 17 | 18 |
19 | 1 20 |
21 |

Is my personal information safe and secure?

22 |

23 | Yes, we take the security of your personal information very 24 | seriously. Our platform utilizes advanced security measures to 25 | protect your data and prevent unauthorized access 26 |

27 |
28 |
29 |
30 | 2 31 |
32 |

Can I access my account from multiple devices?

33 |

34 | Yes, you can access your account from any device with an 35 | internet connection 36 |

37 |
38 |
39 |
40 | 3 41 |
42 |

What kind of financial guidance do you provide?

43 |

44 | Our financial guidance is tailored to your specific needs and 45 | goals. Whether you're looking to save for a major purchase 46 | or invest for the future, we’ll provide personalized advice to 47 | help you achieve your objectives 48 |

49 |
50 |
51 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | export default FAQ; 58 | 59 | const Wrapper = styled.section` 60 | background: #fce37a; 61 | position: relative; 62 | height: 100%; 63 | padding: 4em 0 15em; 64 | 65 | hr { 66 | border: 1px solid #1e1e1e; 67 | margin-bottom: 2em; 68 | } 69 | `; 70 | 71 | const Inner = styled.div` 72 | display: flex; 73 | justify-content: space-between; 74 | width: 90%; 75 | margin: 0 auto; 76 | 77 | @media (max-width: 768px) { 78 | flex-direction: column; 79 | } 80 | `; 81 | 82 | const LHS = styled.div` 83 | display: flex; 84 | flex-direction: column; 85 | width: 50%; 86 | height: 100%; 87 | gap: 2em; 88 | 89 | h1 { 90 | font-size: var(--font-size-xxxl); 91 | font-weight: var(--font-weight-semi-bold); 92 | font-family: var(--font-family-clash-display); 93 | color: var(--color--tertiary); 94 | 95 | @media (max-width: 768px) { 96 | font-size: var(--font-size-xxl); 97 | } 98 | } 99 | 100 | img { 101 | object-fit: contain; 102 | 103 | @media (max-width: 768px) { 104 | width: 100%; 105 | position: absolute; 106 | top: 50%; 107 | left: 50%; 108 | transform: translate(-50%, -50%); 109 | z-index: 0; 110 | } 111 | } 112 | 113 | @media (max-width: 768px) { 114 | width: 100%; 115 | align-items: center; 116 | } 117 | 118 | @media (max-width: 425px) { 119 | img { 120 | width: 100%; 121 | } 122 | } 123 | `; 124 | 125 | const RHS = styled.div` 126 | display: flex; 127 | flex-direction: column; 128 | width: 50%; 129 | height: 100%; 130 | gap: 8em; 131 | 132 | @media (max-width: 768px) { 133 | margin-top: 1em; 134 | width: 100%; 135 | align-items: center; 136 | gap: 4em; 137 | } 138 | `; 139 | 140 | const Div = styled.div` 141 | display: flex; 142 | align-items: center; 143 | gap: 2em; 144 | width: 100%; 145 | height: 100%; 146 | 147 | img { 148 | align-self: flex-end; 149 | object-fit: contain; 150 | 151 | @media (max-width: 768px) { 152 | align-self: center; 153 | } 154 | } 155 | 156 | div { 157 | display: flex; 158 | flex-direction: column; 159 | gap: 1em; 160 | width: 100%; 161 | height: 100%; 162 | 163 | h2 { 164 | font-size: var(--font-size-lg); 165 | font-weight: var(--font-weight-medium); 166 | font-family: var(--font-family-lufga); 167 | color: var(--color--tertiary); 168 | 169 | @media (max-width: 768px) { 170 | font-size: var(--font-size-md); 171 | } 172 | } 173 | 174 | p { 175 | font-size: var(--font-size-md); 176 | font-weight: var(--font-weight-medium); 177 | font-family: var(--font-family-lufga); 178 | color: var(--color--tertiary); 179 | 180 | @media (max-width: 768px) { 181 | font-size: var(--font-size-sm); 182 | } 183 | } 184 | } 185 | `; 186 | -------------------------------------------------------------------------------- /components/UI/Footer.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Link from 'next/link'; 3 | import styled from 'styled-components'; 4 | import google_icon from '@/public/svgs/ic-google.svg'; 5 | import twitter_icon from '@/public/svgs/ic-twitter.svg'; 6 | import facebook_icon from '@/public/svgs/ic-facebook.svg'; 7 | 8 | const Footer = () => { 9 | return ( 10 | 11 | 12 | 13 | PocketPal 14 | 15 |

Support

16 | Customer Login 17 | LinkedIn 18 | Facebook 19 | Beta Testing 20 | Waitlist 21 | 22 | 23 |

Why PocketPal?

24 | Our Technology 25 | API 26 | Diversity & Inclusion 27 | Partners 28 | AI Powered 29 | 30 | 31 |

Company

32 | Blog 33 | API 34 | About Us 35 | Our Mission 36 | Careers 37 | Contact Us 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 |

© 2021 PocketPal. All rights reserved.

46 | 47 | 48 | facebook 49 | 50 | 51 | instagram 52 | 53 | 54 | twitter 55 | 56 | 57 |
58 | 59 | 60 | ); 61 | }; 62 | 63 | export default Footer; 64 | 65 | const Wrapper = styled.footer` 66 | background: #000; 67 | color: #fff; 68 | padding: 10rem 0 2rem 0; 69 | margin-top: -300px; 70 | `; 71 | 72 | const Inner = styled.div` 73 | max-width: 1200px; 74 | margin: 0 auto; 75 | padding: 0 1rem; 76 | margin-top: 12em; 77 | `; 78 | 79 | const Top = styled.div` 80 | display: grid; 81 | grid-template-columns: repeat(4, 1fr); 82 | grid-gap: 2rem; 83 | 84 | @media (max-width: 768px) { 85 | grid-template-columns: repeat(2, 1fr); 86 | } 87 | `; 88 | 89 | const Logo = styled.h1` 90 | font-size: var(--font-size-xxl); 91 | font-weight: var(--font-size-semi-bold); 92 | color: #fff; 93 | font-family: var(--font-family-clash-display); 94 | `; 95 | 96 | const Links = styled.div` 97 | font-family: var(--font-family-lufga); 98 | h2 { 99 | font-size: 1.2rem; 100 | font-weight: 500; 101 | margin-bottom: 1rem; 102 | } 103 | 104 | a { 105 | display: block; 106 | margin-bottom: 1rem; 107 | color: #fff; 108 | font-size: 1rem; 109 | font-weight: 400; 110 | text-decoration: none; 111 | position: relative; 112 | 113 | &::after { 114 | content: ''; 115 | display: block; 116 | width: 0; 117 | height: 2px; 118 | background: #fff; 119 | transition: width 0.3s; 120 | } 121 | 122 | &:hover::after { 123 | width: 100%; 124 | transition: width 0.3s; 125 | } 126 | } 127 | `; 128 | 129 | const Bottom = styled.div` 130 | position: relative; 131 | width: 100%; 132 | 133 | hr { 134 | top: 0; 135 | left: 0; 136 | width: 100%; 137 | position: absolute; 138 | border: 1px solid #fff; 139 | opacity: 0.5; 140 | } 141 | 142 | & > div { 143 | display: flex; 144 | width: 90%; 145 | margin: 0 auto; 146 | justify-content: space-between; 147 | align-items: center; 148 | margin-top: var(--font-size-xxl); 149 | padding-top: var(--font-size-xxl); 150 | font-family: var(--font-family-lufga); 151 | 152 | p { 153 | font-size: var(--font-size-xs); 154 | font-weight: var(--font-weight-normal); 155 | color: #fff; 156 | } 157 | } 158 | `; 159 | 160 | const SocialIcons = styled.div` 161 | display: flex; 162 | align-items: center; 163 | gap: 1rem; 164 | width: 10%; 165 | 166 | @media (max-width: 768px) { 167 | width: 100%; 168 | justify-content: center; 169 | } 170 | 171 | a { 172 | display: inline-block; 173 | } 174 | 175 | img { 176 | width: var(--font-size-xxxl); 177 | height: var(--font-size-xxxl); 178 | padding: 0.5rem; 179 | background-color: #fff; 180 | border-radius: 50%; 181 | } 182 | `; 183 | -------------------------------------------------------------------------------- /components/UI/Hero.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import React from 'react'; 3 | import styled from 'styled-components'; 4 | import DownloadButtons from '../General/DownloadButtons'; 5 | import HeroDecor from './HeroDecor'; 6 | import { motion } from 'framer-motion'; 7 | import { item, container } from '@/utils/motionVariants'; 8 | 9 | const Hero = () => { 10 | return ( 11 | 12 | 13 | 14 |
20 |

21 | Take control of your finances with our Budgeting tool 22 |

23 |

24 | Set a budget, track your spending, and reach your financial goals 25 | with our easy-to-use budgeting app. Get alerts as you approach your 26 | budget limits and stsy on track to financial freedom.{' '} 27 | Download the app now and take control of your finances 28 |

29 |
30 |
31 | 32 |
33 | 34 | hero image 40 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default Hero; 47 | 48 | const Wrapper = styled.div` 49 | width: 100%; 50 | height: 100%; 51 | display: flex; 52 | justify-content: space-between; 53 | align-items: center; 54 | padding: 2% 0 0 0; 55 | position: relative; 56 | @media (max-width: 768px) { 57 | flex-direction: column; 58 | padding: 0 2%; 59 | } 60 | `; 61 | 62 | const Inner = styled.div` 63 | width: 90%; 64 | margin: 0 auto; 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: space-between; 68 | align-items: center; 69 | 70 | @media (max-width: 768px) { 71 | flex-direction: column; 72 | align-items: center; 73 | } 74 | `; 75 | 76 | const Div = styled.div` 77 | margin: 0.5em 0 2em; 78 | `; 79 | 80 | const Header = styled(motion.div)` 81 | flex: 1; 82 | padding: 0 2%; 83 | @media (max-width: 768px) { 84 | padding: 0; 85 | } 86 | `; 87 | 88 | const H1 = styled(motion.h1)` 89 | font-family: var(--font-family-clash-display); 90 | font-weight: var(--font-weight-semi-bold); 91 | font-size: 3.1rem; // 50px 92 | line-height: 1.2; 93 | margin-bottom: 1rem; 94 | text-align: center; 95 | 96 | span { 97 | color: var(--color-orange); 98 | } 99 | @media (max-width: 768px) { 100 | font-size: 2rem; 101 | } 102 | `; 103 | 104 | const P = styled(motion.p)` 105 | display: flex; 106 | flex-direction: column; 107 | padding: 0 2em; 108 | font-family: var(--font-family-lufga); 109 | font-weight: var(--font-weight-medium); 110 | font-size: var(--font-size-xl); 111 | line-height: var(--line-height-xl); 112 | text-align: center; 113 | position: relative; 114 | z-index: 4; 115 | @media (max-width: 768px) { 116 | font-size: 1rem; 117 | padding: 0; 118 | } 119 | `; 120 | 121 | const ImageContainer = styled.div` 122 | flex: 1; 123 | display: flex; 124 | justify-content: flex-end; 125 | margin-top: 2rem; 126 | margin-bottom: 0; 127 | position: relative; 128 | z-index: 3; 129 | @media (max-width: 768px) { 130 | width: 90%; 131 | margin: 0 auto -3rem; 132 | } 133 | 134 | img { 135 | object-fit: contain; 136 | 137 | @media (max-width: 768px) { 138 | width: 100%; 139 | } 140 | } 141 | `; 142 | -------------------------------------------------------------------------------- /components/UI/HeroDecor.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import styled from 'styled-components'; 3 | import top_left_cross from '../../public/images/top-left-cross.png'; 4 | import star from '../../public/images/star.png'; 5 | import top_left_flash from '../../public/images/top-left-flash.png'; 6 | import star_blue from '../../public/images/star-blue.png'; 7 | import top_right_cross from '../../public/images/top-right-cross.png'; 8 | import star_orange from '../../public/images/star-orange.png'; 9 | import star_outline from '../../public/images/star-outline.png'; 10 | import bread from '../../public/images/bread.png'; 11 | import bottom_right_flash from '../../public/images/bottom-right-flash.png'; 12 | 13 | 14 | const HeroDecor = () => { 15 | return ( 16 | 17 | hero decor 23 | hero decor 24 | hero decor 30 | hero decor 31 | hero decor 37 | hero decor 43 | hero decor 48 | hero decor 54 | hero decor 55 | hero decor 61 | 62 | ); 63 | }; 64 | 65 | export default HeroDecor; 66 | 67 | const Decor = styled.div` 68 | img { 69 | position: absolute; 70 | object-fit: contain; 71 | 72 | &:nth-child(1) { 73 | top: 0; 74 | left: 0; 75 | } 76 | 77 | &:nth-child(2) { 78 | top: 5%; 79 | left: 90%; 80 | transform: translateX(-50%); 81 | } 82 | 83 | &:nth-child(3) { 84 | top: 60%; 85 | left: 0%; 86 | } 87 | 88 | &:nth-child(4) { 89 | bottom: 2%; 90 | left: 2%; 91 | transform: translateX(-50%); 92 | } 93 | 94 | &:nth-child(5) { 95 | top: 60%; 96 | left: 20%; 97 | transform: translateX(-50%); 98 | 99 | @media (max-width: 768px) { 100 | top: 45%; 101 | left: 0%; 102 | } 103 | } 104 | 105 | &:nth-child(6) { 106 | top: 30%; 107 | right: 0%; 108 | } 109 | 110 | &:nth-child(7) { 111 | top: 70%; 112 | right: 0%; 113 | transform: translateX(-50%); 114 | } 115 | 116 | &:nth-child(8) { 117 | top: 85%; 118 | right: 25%; 119 | transform: translateX(-50%); 120 | } 121 | 122 | &:nth-child(9) { 123 | top: 60%; 124 | right: 28%; 125 | 126 | @media (max-width: 768px) { 127 | top: 56%; 128 | right: 0%; 129 | } 130 | } 131 | 132 | &:nth-child(10) { 133 | bottom: 2%; 134 | right: 0%; 135 | } 136 | 137 | &:nth-child(2), 138 | &:nth-child(4), 139 | &:nth-child(7), 140 | &:nth-child(8) { 141 | animation: star 2s infinite; 142 | } 143 | 144 | &:nth-child(3), 145 | &:nth-child(5), 146 | &:nth-child(6), 147 | &:nth-child(9), 148 | &:nth-child(10) { 149 | animation: flash 2s infinite; 150 | } 151 | 152 | @keyframes star { 153 | 0% { 154 | transform: scale(1); 155 | } 156 | 50% { 157 | transform: scale(1.2); 158 | } 159 | 100% { 160 | transform: scale(1); 161 | } 162 | } 163 | 164 | @keyframes flash { 165 | 0% { 166 | transform: scale(1); 167 | } 168 | 50% { 169 | transform: scale(1.2); 170 | } 171 | 100% { 172 | transform: scale(1); 173 | } 174 | } 175 | } 176 | `; 177 | -------------------------------------------------------------------------------- /components/UI/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import Link from 'next/link'; 4 | 5 | const Navbar = () => { 6 | const [toggle, setToggle] = React.useState(false); 7 | return ( 8 | 9 | 10 | 11 |

PocketPal

12 | { 14 | setToggle(!toggle); 15 | }} 16 | > 17 |
18 |
19 |
20 | 21 | 22 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default Navbar; 50 | 51 | const Wrapper = styled.div` 52 | width: 100%; 53 | `; 54 | 55 | const Inner = styled.div` 56 | width: 90%; 57 | margin: 0 auto; 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | height: 80px; 62 | 63 | @media (max-width: 768px) { 64 | flex-direction: column; 65 | } 66 | `; 67 | 68 | const Logo = styled.div` 69 | flex: 1; 70 | 71 | @media (max-width: 768px) { 72 | padding: 20px 0; 73 | display: flex; 74 | align-items: center; 75 | justify-content: space-between; 76 | width: 100%; 77 | } 78 | `; 79 | 80 | const Burger = styled.div` 81 | display: none; 82 | 83 | div { 84 | width: 30px; 85 | height: 3px; 86 | background: var(--color-tertiary); 87 | margin: 5px; 88 | transition: all 0.3s ease-in-out; 89 | border-radius: 5px; 90 | } 91 | 92 | @media (max-width: 768px) { 93 | display: flex; 94 | flex-direction: column; 95 | justify-content: space-between; 96 | cursor: pointer; 97 | } 98 | `; 99 | 100 | const H3 = styled.h3` 101 | font-family: var(--font-family-clash-display); 102 | font-weight: var(--font-weight-semi-bold); 103 | font-size: var(--font-size-md); 104 | line-height: var(--font-line-height-xl); 105 | color: var(--color-primary); 106 | `; 107 | 108 | const Nav = styled.nav` 109 | flex: 2; 110 | transition: visibility opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 111 | ul { 112 | display: flex; 113 | list-style: none; 114 | justify-content: space-between; 115 | width: 100%; 116 | position: relative; 117 | li { 118 | a { 119 | font-family: var(--font-family-lufga); 120 | font-weight: var(--font-weight-normal); 121 | font-size: var(--font-size-md); 122 | line-height: var(--font-line-height-xl); 123 | color: var(--color-primary); 124 | transition: all 0.2s ease-in-out; 125 | } 126 | 127 | &:hover { 128 | a { 129 | color: var(--color-secondary); 130 | padding: 0 0 5px 0; 131 | border-bottom: 2px solid var(--color-secondary); 132 | } 133 | } 134 | } 135 | 136 | @media (max-width: 768px) { 137 | flex-direction: column; 138 | align-items: center; 139 | position: absolute; 140 | z-index: 20; 141 | top: 80px; 142 | left: 50%; 143 | width: 90%; 144 | transform: translateX(-50%); 145 | background: var(--color-orange); 146 | border-radius: 20px; 147 | li { 148 | margin-top: 20px; 149 | 150 | a { 151 | color: var(--color-secondary); 152 | } 153 | } 154 | max-height: 0; 155 | overflow: hidden; 156 | padding: 0; 157 | transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 158 | border: none; 159 | 160 | &.active { 161 | max-height: 100%; 162 | padding: 2em 2em 6em 2em; 163 | border: 2px solid var(--color-tertiary); 164 | } 165 | } 166 | } 167 | 168 | @media (max-width: 768px) { 169 | margin-top: 20px; 170 | } 171 | `; 172 | 173 | const ButtonContainer = styled.div` 174 | flex: 1; 175 | display: flex; 176 | justify-content: flex-end; 177 | position: relative; 178 | z-index: 20; 179 | 180 | @media (max-width: 768px) { 181 | top: 200px; 182 | opacity: 0; 183 | transform: translateY(-50%); 184 | transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 185 | } 186 | 187 | &.active { 188 | transform: translateY(0); 189 | opacity: 1; 190 | } 191 | `; 192 | 193 | const ButtonInner = styled.div` 194 | position: relative; 195 | z-index: 20; 196 | 197 | div { 198 | position: absolute; 199 | width: 155px; 200 | height: 45px; 201 | background: var(--color-tertiary); 202 | position: absolute; 203 | top: 5px; 204 | left: 5px; 205 | z-index: -1; 206 | transition: all 0.3s ease-in-out; 207 | } 208 | 209 | &:hover { 210 | div { 211 | top: 0; 212 | left: 0; 213 | } 214 | } 215 | `; 216 | 217 | const Button = styled.button` 218 | width: 155px; 219 | height: 45px; 220 | background: var(--color-secondary); 221 | border: 2px solid var(--color-tertiary); 222 | font-family: var(--font-family-lufga); 223 | font-weight: var(--font-weight-normal); 224 | font-size: var(--font-size-md); 225 | line-height: var(--font-line-height-xl); 226 | color: var(--color-tertiary); 227 | position: relative; 228 | z-index: 20; 229 | cursor: pointer; 230 | transition: all 0.3s ease-in-out; 231 | `; 232 | -------------------------------------------------------------------------------- /components/UI/ProductDisp.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ParallaxText from '../General/ParallaxText'; 3 | 4 | const ProductDisp = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 |

In corporation with over 100 companies

12 | 13 | 14 | 15 |

Facebook

16 | 17 | 18 |

Google

19 | 20 | 21 |

Twitter

22 | 23 | 24 |

Kuda

25 | 26 | 27 |

Opay

28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default ProductDisp; 38 | 39 | const Wrapper = styled.div` 40 | width: 100%; 41 | height: 20vh; 42 | display: flex; 43 | background-color: #faca52; 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | `; 48 | 49 | const Inner = styled.div` 50 | width: 400%; 51 | transform: rotate(-2deg); 52 | margin: 0 auto; 53 | display: flex; 54 | align-items: center; 55 | padding: 2% 0 0 0; 56 | position: relative; 57 | background: #e6e6fa; 58 | border: 3px solid #1e1e1e; 59 | transform: rotate(-1deg); 60 | margin-right: -10%; 61 | margin-left: -10%; 62 | z-index: 20; 63 | `; 64 | 65 | const Content = styled.div` 66 | width: 90%; 67 | margin: 0 auto; 68 | display: flex; 69 | align-items: center; 70 | justify-content: space-between; 71 | padding: 1%; 72 | margin-top: -20px; 73 | `; 74 | 75 | const Text = styled.div` 76 | width: 650px; 77 | padding: 1em; 78 | 79 | h2 { 80 | font-family: var(--font-family-clash-display); 81 | font-weight: var(--font-weight-normal); 82 | font-size: 2rem; 83 | line-height: 1.2; 84 | color: var(--color-tertiary); 85 | transform: rotate(-1deg); 86 | } 87 | @media (max-width: 768px) { 88 | padding: 0; 89 | } 90 | `; 91 | 92 | const CompanyContainer = styled.div` 93 | display: flex; 94 | justify-content: space-between; 95 | align-items: center; 96 | padding: 0 2%; 97 | @media (max-width: 768px) { 98 | padding: 0; 99 | } 100 | `; 101 | 102 | const Company = styled.div` 103 | width: 190px; 104 | height: 79px; 105 | background: #ffffff; 106 | border: 2px solid #1e1e1e; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | margin: 1%; 111 | h2 { 112 | font-family: var(--font-family-clash-display); 113 | font-weight: var(--font-weight-normal); 114 | font-size: 1.5rem; 115 | line-height: 1.2; 116 | color: var(--color-tertiary); 117 | transform: rotate(-1deg); 118 | } 119 | @media (max-width: 768px) { 120 | width: 40%; 121 | height: 100%; 122 | padding: 1em 2em; 123 | } 124 | `; 125 | -------------------------------------------------------------------------------- /components/UI/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import styled from 'styled-components'; 3 | import person_1 from '@/public/images/person_1.png'; 4 | import person_2 from '@/public/images/person_2.png'; 5 | import person_3 from '@/public/images/person_3.png'; 6 | import arrow_left from '@/public/images/arrow-left.png'; 7 | import arrow_right from '@/public/images/arrow-right.png'; 8 | import yellow_star from '@/public/images/yellow-star.png'; 9 | 10 | const Testimonials = () => { 11 | return ( 12 | 13 | 14 | yellow_star 15 | yellow_star 16 | yellow_star 17 | 18 | 19 |
20 |

Testimonials

21 |

22 | Tens of thousands of customers are building a brighter future with 23 | PocketPal 24 |

25 |
26 | 27 | 28 |
29 | arrow_left 30 |
31 | 32 | 33 | “ 34 | ” 35 | 36 | 37 | person_1 38 | person_2 39 | person_3 40 | 41 | 42 |

43 | “ Thanks to PocketPal, I’ve been able to optimize my financial 44 | journey and achieve my goals faster than I ever thought 45 | possible. The user-friendly interface and exceptional customer 46 | support makes managing my finances a breeze.” 47 |

48 |

-Tom S.

49 | 50 | 51 |
52 | arrow_right 53 |
54 | 55 | 56 | 57 | 58 | ); 59 | }; 60 | 61 | export default Testimonials; 62 | 63 | const Wrapper = styled.section` 64 | background: #fff; 65 | position: relative; 66 | height: 100vh; 67 | `; 68 | 69 | const Decor = styled.div` 70 | position: absolute; 71 | width: 100%; 72 | height: 100%; 73 | img { 74 | position: absolute; 75 | 76 | &:nth-child(1) { 77 | top: 0; 78 | left: 0; 79 | } 80 | 81 | &:nth-child(2) { 82 | top: 0; 83 | right: 0; 84 | } 85 | 86 | &:nth-child(3) { 87 | bottom: 0; 88 | left: 0; 89 | } 90 | } 91 | `; 92 | 93 | const Inner = styled.div` 94 | margin: 0 auto; 95 | padding: 2rem; 96 | display: flex; 97 | flex-direction: column; 98 | align-items: center; 99 | justify-content: center; 100 | position: relative; 101 | z-index: 1; 102 | height: 100%; 103 | overflow: hidden; 104 | 105 | @media (max-width: 768px) { 106 | padding: 5rem 1rem 5rem 1rem; 107 | } 108 | `; 109 | 110 | const Header = styled.div` 111 | text-align: center; 112 | h1 { 113 | font-family: var(--font-family-clash-display); 114 | font-size: var(--font-size-xxxl); 115 | font-weight: var(--font-weight-semi-bold); 116 | color: var(--color-tertiary); 117 | margin-bottom: 1rem; 118 | } 119 | p { 120 | font-family: var(--font-family-lufga); 121 | font-size: var(--font-size-md); 122 | font-weight: var(--font-weight-normal); 123 | color: var(--color-tertiary); 124 | margin-bottom: 2rem; 125 | } 126 | 127 | @media (max-width: 768px) { 128 | h1 { 129 | font-size: var(--font-size-xxl); 130 | } 131 | 132 | p { 133 | font-size: var(--font-size-sm); 134 | } 135 | } 136 | `; 137 | 138 | const TestimonialContainer = styled.div` 139 | height: 100%; 140 | `; 141 | 142 | const Testimonial = styled.div` 143 | position: relative; 144 | display: flex; 145 | align-items: center; 146 | justify-content: center; 147 | margin-top: 3rem; 148 | `; 149 | 150 | const Div = styled.div` 151 | width: 85px; 152 | height: 85px; 153 | background: #faca52; 154 | border: 2px solid #1e1e1e; 155 | display: flex; 156 | align-items: center; 157 | justify-content: center; 158 | border-radius: 50%; 159 | position: absolute; 160 | left: -40px; 161 | cursor: pointer; 162 | transition: all 0.3s ease-in-out; 163 | z-index: 2; 164 | 165 | &:nth-child(3) { 166 | left: 95%; 167 | 168 | @media (max-width: 768px) { 169 | left: 84%; 170 | } 171 | } 172 | 173 | img { 174 | object-fit: contain; 175 | width: 100%; 176 | } 177 | 178 | @media (max-width: 768px) { 179 | width: 50px; 180 | height: 50px; 181 | left: 5px; 182 | } 183 | `; 184 | 185 | const TestmonialCard = styled.div` 186 | background: #fffae9; 187 | border: 2px solid #4b83fb; 188 | border-radius: 34px; 189 | padding: 3rem; 190 | width: 100%; 191 | max-width: 900px; 192 | display: flex; 193 | flex-direction: column; 194 | align-items: center; 195 | justify-content: center; 196 | position: relative; 197 | text-align: center; 198 | 199 | p { 200 | font-family: var(--font-family-clash-display); 201 | font-size: var(--font-size-xxl); 202 | font-weight: var(--font-weight-semi-bold); 203 | color: var(--color-tertiary); 204 | margin-bottom: 1rem; 205 | } 206 | 207 | h3 { 208 | font-family: var(--font-family-lufga); 209 | font-size: 28px; 210 | font-weight: var(--font-weight-normal); 211 | color: #65c8cf; 212 | } 213 | 214 | &::after { 215 | content: ''; 216 | position: absolute; 217 | background: #65c8cf; 218 | border: 2px solid #4b83fb; 219 | border-radius: 34px; 220 | width: 100%; 221 | height: 100%; 222 | top: 10px; 223 | left: 10px; 224 | z-index: -1; 225 | } 226 | 227 | @media (max-width: 768px) { 228 | padding: 1rem; 229 | p { 230 | font-size: var(--font-size-sm); 231 | font-weight: 500; 232 | letter-spacing: 0.7px; 233 | } 234 | } 235 | `; 236 | 237 | const Quote = styled.div` 238 | span { 239 | font-family: var(--font-family-clash-display); 240 | font-weight: var(--font-weight-semi-bold); 241 | font-size: 250px; 242 | color: #faca52; 243 | position: absolute; 244 | } 245 | span:nth-child(1) { 246 | top: -100px; 247 | left: 0; 248 | 249 | @media (max-width: 768px) { 250 | top: -60px; 251 | } 252 | } 253 | span:nth-child(2) { 254 | bottom: -200px; 255 | right: 0; 256 | 257 | @media (max-width: 768px) { 258 | bottom: -120px; 259 | } 260 | } 261 | 262 | @media (max-width: 768px) { 263 | span { 264 | font-size: 150px; 265 | } 266 | } 267 | `; 268 | 269 | const Images = styled.div` 270 | display: flex; 271 | align-items: center; 272 | justify-content: center; 273 | margin-bottom: 2rem; 274 | gap: 0; 275 | margin-top: -90px; 276 | background: #fff; 277 | border-radius: 50%; 278 | 279 | img { 280 | &:nth-child(1) { 281 | opacity: 0.6; 282 | 283 | @media (max-width: 768px) { 284 | width: 50px; 285 | height: 50px; 286 | } 287 | } 288 | 289 | &:nth-child(2) { 290 | @media (max-width: 768px) { 291 | width: 50px; 292 | height: 50px; 293 | } 294 | } 295 | 296 | &:nth-child(3) { 297 | opacity: 0.6; 298 | 299 | @media (max-width: 768px) { 300 | width: 50px; 301 | height: 50px; 302 | } 303 | } 304 | } 305 | 306 | @media (max-width: 768px) { 307 | margin-top: -50px; 308 | } 309 | `; 310 | 311 | const TestimonialText = styled.div` 312 | display: flex; 313 | flex-direction: column; 314 | align-items: center; 315 | justify-content: center; 316 | gap: 0; 317 | width: 80%; 318 | margin: 1rem auto; 319 | `; 320 | -------------------------------------------------------------------------------- /components/UI/Works.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import styled from 'styled-components'; 3 | import frameOne from '../../public/svgs/works_1.svg'; 4 | import frameTwo from '../../public/svgs/works_2.svg'; 5 | import frameThree from '../../public/svgs/works_3.svg'; 6 | import star from '../../public/images/star.png'; 7 | import { motion } from 'framer-motion'; 8 | import { item } from '@/utils/motionVariants'; 9 | 10 | const Works = () => { 11 | return ( 12 | 13 | 14 | star 15 | star 16 | star 17 | star 18 | star 19 | 20 | 21 |
22 |

How PocketPal works

23 |

24 | PocketPal simplifies the process and makes it easy for you to 25 | achieve your goals. Just sign up, set your savings target, and let 26 | our automated tools do the rest. YOu can earn interest on your 27 | money, track your progress, and get helpful reminders and tips to 28 | stay on track. It’s that simple! 29 |

30 |
31 | 32 | 33 | 34 | 35 | frame 1 36 |

37 | Track your spending and see your account activity with the 38 | transaction screen. View your transactions by date, category, 39 | or amount and easily monitor your spending patterns. With our 40 | intuitive design and user-friendly interface, you can quickly 41 | and easily stay on top of your financial activity 42 |

43 | 44 | 45 | 46 | 47 | frame 2 48 |

49 | Stay on top of your finances with our budgeting screen. Easily 50 | set and track your spending goals for different categories and 51 | see your progress with a simple chart. Whether you're 52 | saving for a big purchase or trying to cur back on expenses, 53 | our budgeting screen makes it easy to stay on track 54 |

55 | 56 | 57 | frame 3 58 |

59 | Never miss a beat with the alert screen. Stay informed on all 60 | your activities with real-time alerts for important events, 61 | such as when you've hit a savings goal, received a 62 | payment, or have low balance. You can customize your alerts to 63 | suit your needs, so you can stay on top of your finances with 64 | ease 65 |

66 | 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | }; 74 | 75 | export default Works; 76 | 77 | const Wrapper = styled.div` 78 | width: 100%; 79 | height: 100%; 80 | background: #ffe5b4; 81 | display: flex; 82 | justify-content: center; 83 | align-items: center; 84 | padding: 2em 0; 85 | position: relative; 86 | `; 87 | 88 | const Decor = styled.div` 89 | position: absolute; 90 | top: 0; 91 | left: 0; 92 | width: 100%; 93 | height: 100%; 94 | 95 | img { 96 | position: absolute; 97 | &:nth-child(1) { 98 | top: 10%; 99 | left: 0%; 100 | } 101 | 102 | &:nth-child(2) { 103 | top: 5%; 104 | right: 0%; 105 | } 106 | 107 | &:nth-child(3) { 108 | top: 55%; 109 | left: 49%; 110 | } 111 | 112 | &:nth-child(4) { 113 | bottom: 0%; 114 | right: 0%; 115 | } 116 | 117 | &:nth-child(5) { 118 | bottom: 0%; 119 | left: 0%; 120 | } 121 | } 122 | `; 123 | 124 | const Inner = styled.div` 125 | width: 90%; 126 | height: 100%; 127 | display: flex; 128 | flex-direction: column; 129 | justify-content: space-between; 130 | align-items: center; 131 | @media (max-width: 768px) { 132 | flex-direction: column; 133 | align-items: center; 134 | } 135 | `; 136 | 137 | const Header = styled(motion.div)` 138 | width: 80%; 139 | display: flex; 140 | flex-direction: column; 141 | align-self: flex-start; 142 | gap: 0.5em; 143 | margin-bottom: 2em; 144 | 145 | @media (max-width: 768px) { 146 | width: 100%; 147 | align-items: center; 148 | } 149 | `; 150 | 151 | const H1 = styled(motion.h1)` 152 | font-family: var(--font-family-clash-display); 153 | font-weight: var(--font-weight-semi-bold); 154 | font-size: var(--font-size-xxxl); 155 | line-height: 39px; 156 | 157 | @media (max-width: 768px) { 158 | font-size: var(--font-size-xxl); 159 | } 160 | `; 161 | 162 | const P = styled(motion.p)` 163 | font-family: var(--font-family-lufga); 164 | font-weight: var(--font-weight-medium); 165 | font-size: var(--font-size-xl); 166 | line-height: 26px; 167 | color: var(--color-tertiary); 168 | position: relative; 169 | z-index: 2; 170 | 171 | @media (max-width: 768px) { 172 | font-size: var(--font-size-lg); 173 | } 174 | `; 175 | 176 | const Content = styled.div``; 177 | 178 | const CardContainer = styled.div` 179 | display: flex; 180 | align-items: center; 181 | gap: 3em; 182 | 183 | @media (max-width: 768px) { 184 | flex-direction: column; 185 | align-items: center; 186 | } 187 | `; 188 | 189 | const LHS = styled.div` 190 | z-index: 2; 191 | `; 192 | 193 | const RHS = styled.div` 194 | display: flex; 195 | flex-direction: column; 196 | gap: 2em; 197 | z-index: 2; 198 | `; 199 | 200 | const LHSCard = styled.div` 201 | background: #ffc683; 202 | border: 2px solid #1e1e1e; 203 | border-radius: 25px; 204 | display: flex; 205 | align-items: center; 206 | gap: 2em; 207 | padding: 2em; 208 | position: relative; 209 | transition: all 0.5s ease-in-out; 210 | cursor: pointer; 211 | 212 | &::after { 213 | content: ''; 214 | position: absolute; 215 | top: 10px; 216 | left: 10px; 217 | width: 100%; 218 | height: 100%; 219 | background: #d1e6df; 220 | border: 2px solid #1e1e1e; 221 | border-radius: 25px; 222 | z-index: -1; 223 | transition: all 0.3s ease-in-out; 224 | } 225 | 226 | &:hover::after { 227 | top: 0; 228 | left: 0; 229 | } 230 | 231 | @media (max-width: 768px) { 232 | flex-direction: column; 233 | align-items: center; 234 | gap: 1em; 235 | padding: 1em; 236 | } 237 | `; 238 | 239 | const RHSCard = styled.div` 240 | width: auto; 241 | height: 347px; 242 | display: flex; 243 | align-items: center; 244 | padding: 1em 2em; 245 | gap: 2em; 246 | background: #fbada5; 247 | border: 2px solid #1e1e1e; 248 | border-radius: 25px; 249 | position: relative; 250 | cursor: pointer; 251 | 252 | &::after { 253 | content: ''; 254 | position: absolute; 255 | top: 10px; 256 | left: 10px; 257 | width: 100%; 258 | height: 100%; 259 | background: #d1e6df; 260 | border: 2px solid #1e1e1e; 261 | border-radius: 25px; 262 | z-index: -1; 263 | transition: all 0.3s ease-in-out; 264 | } 265 | 266 | &:nth-child(2) { 267 | background: #c6bcfa; 268 | flex-direction: row-reverse; 269 | &::after { 270 | content: ''; 271 | position: absolute; 272 | top: 10px; 273 | left: -15px; 274 | width: 100%; 275 | height: 100%; 276 | background: #eff1f7; 277 | border: 2px solid #1e1e1e; 278 | border-radius: 25px; 279 | z-index: -1; 280 | } 281 | 282 | @media (max-width: 768px) { 283 | flex-direction: column; 284 | align-items: center; 285 | gap: 1em; 286 | padding: 1em; 287 | height: 100%; 288 | } 289 | } 290 | 291 | &:hover::after { 292 | top: 0; 293 | left: 0; 294 | } 295 | 296 | @media (max-width: 768px) { 297 | flex-direction: column; 298 | align-items: center; 299 | gap: 1em; 300 | padding: 1em; 301 | height: 100%; 302 | } 303 | `; 304 | -------------------------------------------------------------------------------- /components/UI/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Available } from './Available'; 2 | export { default as Beta } from './Beta'; 3 | export { default as Enhanced } from './Enhanced'; 4 | export { default as FAQ } from './FAQ'; 5 | export { default as Footer } from './Footer'; 6 | export { default as Hero } from './Hero'; 7 | export { default as HeroDecor } from './HeroDecor'; 8 | export { default as Navbar } from './Navbar'; 9 | export { default as ProductDisp } from './ProductDisp'; 10 | export { default as Testimonials } from './Testimonials'; 11 | export { default as Works } from './Works'; 12 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | compiler: { 5 | styledComponents: true, 6 | }, 7 | }; 8 | 9 | module.exports = nextConfig; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pocketpal", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@motionone/utils": "^10.15.1", 13 | "@types/node": "18.14.2", 14 | "@types/react": "18.0.28", 15 | "@types/react-dom": "18.0.11", 16 | "@types/styled-components": "^5.1.26", 17 | "eslint": "8.35.0", 18 | "eslint-config-next": "13.2.2", 19 | "framer-motion": "^10.0.1", 20 | "next": "13.2.2", 21 | "react": "18.2.0", 22 | "react-dom": "18.2.0", 23 | "styled-components": "^5.3.6", 24 | "typescript": "4.9.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { GlobalStyle } from '@/components/General/GlobalStyle'; 2 | import Preloader from '@/components/General/Preloader'; 3 | import '@/styles/globals.css'; 4 | import type { AppProps } from 'next/app'; 5 | import { useEffect, useState } from 'react'; 6 | 7 | export default function App({ Component, pageProps }: AppProps) { 8 | // a preloader can be added here 9 | const [loading, setLoading] = useState(true); 10 | 11 | useEffect(() => { 12 | setTimeout(() => { 13 | setLoading(false); 14 | }, 4000); 15 | }, []); 16 | return ( 17 | <> 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Available, Beta, Enhanced, FAQ, Footer, Hero, Navbar, ProductDisp, Testimonials, Works } from '@/components/UI'; 2 | import Head from 'next/head'; 3 | import styled from 'styled-components'; 4 | 5 | export default function Home() { 6 | return ( 7 | <> 8 | 9 | PocketPal 10 | 11 | 12 | 13 | 17 | 18 |
19 |
20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 | ); 34 | } 35 | 36 | const Section = styled.section` 37 | background: #87ceeb; 38 | `; 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/favicon.ico -------------------------------------------------------------------------------- /public/images/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/arrow-left.png -------------------------------------------------------------------------------- /public/images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/arrow-right.png -------------------------------------------------------------------------------- /public/images/available_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/available_1.png -------------------------------------------------------------------------------- /public/images/available_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/available_2.png -------------------------------------------------------------------------------- /public/images/beta_ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/beta_ellipse.png -------------------------------------------------------------------------------- /public/images/bottom-right-flash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/bottom-right-flash.png -------------------------------------------------------------------------------- /public/images/bread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/bread.png -------------------------------------------------------------------------------- /public/images/frame_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/frame_1.png -------------------------------------------------------------------------------- /public/images/frame_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/frame_2.png -------------------------------------------------------------------------------- /public/images/frame_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/frame_3.png -------------------------------------------------------------------------------- /public/images/half-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/half-phone.png -------------------------------------------------------------------------------- /public/images/ios-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/ios-store.png -------------------------------------------------------------------------------- /public/images/person_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/person_1.png -------------------------------------------------------------------------------- /public/images/person_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/person_2.png -------------------------------------------------------------------------------- /public/images/person_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/person_3.png -------------------------------------------------------------------------------- /public/images/play-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/play-store.png -------------------------------------------------------------------------------- /public/images/star-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/star-blue.png -------------------------------------------------------------------------------- /public/images/star-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/star-orange.png -------------------------------------------------------------------------------- /public/images/star-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/star-outline.png -------------------------------------------------------------------------------- /public/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/star.png -------------------------------------------------------------------------------- /public/images/top-left-cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/top-left-cross.png -------------------------------------------------------------------------------- /public/images/top-left-flash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/top-left-flash.png -------------------------------------------------------------------------------- /public/images/top-right-cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/top-right-cross.png -------------------------------------------------------------------------------- /public/images/yellow-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Temitayo-spec/PocketPal/a558e0f6de2f8ff7ec200062e2261c3b62dd41f7/public/images/yellow-star.png -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/svgs/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/FAQ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/ic-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/ic-google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/ic-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svgs/works_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.cdnfonts.com/css/montserrat'); 2 | @import url('https://fonts.cdnfonts.com/css/lufga'); 3 | 4 | * { 5 | box-sizing: border-box; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | html, 11 | body { 12 | max-width: 100vw; 13 | overflow-x: hidden; 14 | scroll-behavior: smooth; 15 | } 16 | 17 | a { 18 | color: inherit; 19 | text-decoration: none; 20 | } 21 | 22 | ::-webkit-scrollbar { 23 | width: 0.5rem; 24 | } 25 | 26 | ::-webkit-scrollbar-track { 27 | background: #f1f1f1; 28 | } 29 | 30 | ::-webkit-scrollbar-thumb { 31 | background: #888; 32 | } 33 | 34 | ::-webkit-scrollbar-thumb:hover { 35 | background: #555; 36 | } 37 | 38 | .parallax { 39 | display: flex; 40 | align-items: center; 41 | } 42 | 43 | .parallax .scroller { 44 | display: flex; 45 | white-space: nowrap; 46 | display: flex; 47 | flex-wrap: nowrap; 48 | } 49 | 50 | .parallax span { 51 | display: inline-flex; 52 | margin-right: 30px; 53 | } 54 | svg { 55 | display:block; 56 | width:258px; 57 | height:258px; 58 | position:absolute; 59 | left:50%; 60 | top:50%; 61 | transform:translate(-50%,-50%); 62 | } 63 | 64 | .tree { 65 | fill: #E73E0D; 66 | } 67 | 68 | .circle-mask { 69 | transform-origin: 50% 90%; 70 | animation: scale 5s infinite ease-out; 71 | } 72 | 73 | @keyframes scale { 74 | 0%, 100% { 75 | transform: scale(0.0); 76 | } 77 | 7%, 90% { 78 | transform: scale(0.4); 79 | } 80 | 50% { 81 | transform: scale(1); 82 | } 83 | } 84 | 85 | .fade_in { 86 | opacity: 1; 87 | transition: opacity 1s ease-in-out; 88 | position: fixed; 89 | top: 0; 90 | left: 0; 91 | width: 100%; 92 | height: 100vh; 93 | background: #fff; 94 | z-index: 99999; 95 | } 96 | 97 | .fade_out { 98 | opacity: 0; 99 | transition: opacity 1s ease-in-out; 100 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /utils/motionVariants.ts: -------------------------------------------------------------------------------- 1 | const container = { 2 | hidden: { opacity: 1 }, 3 | visible: { 4 | opacity: 1, 5 | transition: { 6 | duration: 0.6, 7 | delayChildren: 0.5, 8 | staggerChildren: 0.3, 9 | }, 10 | }, 11 | }; 12 | 13 | const item = { 14 | hidden: { y: 20, opacity: 0 }, 15 | visible: { 16 | y: 0, 17 | opacity: 1, 18 | transition: { 19 | duration: 1, 20 | delayChildren: 0.5, 21 | staggerChildren: 0.3, 22 | }, 23 | }, 24 | }; 25 | 26 | const card = { 27 | hidden: { opacity: 0, scale: 0.9 }, 28 | visible: { 29 | opacity: 1, 30 | scale: 1, 31 | transition: { 32 | duration: 0.6, 33 | delayChildren: 0.5, 34 | staggerChildren: 0.3, 35 | }, 36 | }, 37 | }; 38 | 39 | export { container, item, card }; 40 | --------------------------------------------------------------------------------