├── .eslintrc.json ├── app ├── favicon.ico ├── layout.js ├── page.css ├── globals.css └── page.js ├── public ├── video.mp4 ├── persons.png ├── hero │ ├── person1.jpg │ ├── person2.jpg │ ├── person3.jpg │ ├── person4.jpg │ ├── person5.jpg │ ├── person6.jpg │ └── hero-arrow.png ├── OurDiff │ ├── Frame-0.png │ ├── Frame-1.png │ └── Frame-2.png ├── features │ ├── Frame-0.png │ ├── Frame-1.png │ ├── Frame-2.png │ ├── Frame-3.png │ ├── Frame-4.png │ └── Frame-5.png ├── howItWorks │ ├── Frame-0.png │ ├── Frame-1.png │ └── Frame-2.png ├── apos.svg ├── vercel.svg ├── next.svg └── vite.svg ├── jsconfig.json ├── next.config.js ├── .gitignore ├── package.json ├── src ├── components │ ├── BrandingVideo │ │ ├── BrandingVideo.css │ │ └── BrandingVideo.jsx │ ├── Testimonials │ │ ├── Testimonials.jsx │ │ ├── Testimonials.css │ │ └── SlickSlider.jsx │ ├── EmailBox │ │ ├── EmailBox.css │ │ └── EmailBox.jsx │ ├── Footer │ │ ├── Footer.css │ │ └── Footer.jsx │ ├── OurDiff │ │ ├── OurDiff.css │ │ └── OurDiff.jsx │ ├── WhoWeInvest │ │ ├── WhoWeInvest.css │ │ └── WhoWeInvest.jsx │ ├── HowItWorks │ │ ├── HowItWorks.css │ │ └── HowItWorks.jsx │ ├── WhatWeDo │ │ ├── WhatWeDo.css │ │ └── WhatWeDo.jsx │ ├── Navbar │ │ ├── Navbar.css │ │ └── Navbar.jsx │ └── Hero │ │ ├── Hero.css │ │ └── Hero.jsx └── utils │ ├── animation.js │ └── data.js └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/video.mp4 -------------------------------------------------------------------------------- /public/persons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/persons.png -------------------------------------------------------------------------------- /public/hero/person1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person1.jpg -------------------------------------------------------------------------------- /public/hero/person2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person2.jpg -------------------------------------------------------------------------------- /public/hero/person3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person3.jpg -------------------------------------------------------------------------------- /public/hero/person4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person4.jpg -------------------------------------------------------------------------------- /public/hero/person5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person5.jpg -------------------------------------------------------------------------------- /public/hero/person6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/person6.jpg -------------------------------------------------------------------------------- /public/OurDiff/Frame-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/OurDiff/Frame-0.png -------------------------------------------------------------------------------- /public/OurDiff/Frame-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/OurDiff/Frame-1.png -------------------------------------------------------------------------------- /public/OurDiff/Frame-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/OurDiff/Frame-2.png -------------------------------------------------------------------------------- /public/hero/hero-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/hero/hero-arrow.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/features/Frame-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-0.png -------------------------------------------------------------------------------- /public/features/Frame-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-1.png -------------------------------------------------------------------------------- /public/features/Frame-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-2.png -------------------------------------------------------------------------------- /public/features/Frame-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-3.png -------------------------------------------------------------------------------- /public/features/Frame-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-4.png -------------------------------------------------------------------------------- /public/features/Frame-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/features/Frame-5.png -------------------------------------------------------------------------------- /public/howItWorks/Frame-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/howItWorks/Frame-0.png -------------------------------------------------------------------------------- /public/howItWorks/Frame-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/howItWorks/Frame-1.png -------------------------------------------------------------------------------- /public/howItWorks/Frame-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Collins77/Agency-website/HEAD/public/howItWorks/Frame-2.png -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /public/apos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "digital-business-next", 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 | "eslint": "8.47.0", 13 | "eslint-config-next": "13.4.16", 14 | "framer-motion": "^10.15.2", 15 | "next": "13.4.16", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "react-icons": "^4.10.1", 19 | "react-scroll": "^1.8.9", 20 | "react-slick": "^0.29.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/BrandingVideo/BrandingVideo.css: -------------------------------------------------------------------------------- 1 | .bv-container .container { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | overflow: visible; 6 | } 7 | .bv-video { 8 | width: 95%; 9 | border-radius: 4rem; 10 | margin-top: -10rem; /* 10rem */ 11 | z-index: 1; 12 | } 13 | 14 | @media (max-width: 1024px) { 15 | .bv-video { 16 | margin-top: 1rem; 17 | } 18 | } 19 | 20 | @media (max-width: 768px) { 21 | .bv-video { 22 | border-radius: 2rem; 23 | } 24 | } 25 | 26 | @media (min-width: 768px) { 27 | .bv-video { 28 | margin-top: -5rem; 29 | width: 85%; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/Testimonials/Testimonials.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SlickSlider from './SlickSlider' 3 | import './Testimonials.css' 4 | 5 | const Testimonials = () => { 6 | return ( 7 |
8 |
9 |
10 |
11 | Testimonials 12 | Access capital that complements traditional funding options. 13 | What people say about us 14 |
15 |
16 | {/* slider */} 17 | 18 |
19 |
20 | ) 21 | } 22 | 23 | export default Testimonials -------------------------------------------------------------------------------- /app/layout.js: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import {Josefin_Sans} from 'next/font/google'; 3 | 4 | export const metadata = { 5 | title: "Cotek Technologies", 6 | description: "Generated by create next app", 7 | }; 8 | 9 | const Josef = Josefin_Sans({ 10 | subsets: ['latin'], 11 | weight: ['100', '200', '300', '400', '500', '600', '700'], 12 | display: 'swap' 13 | }) 14 | 15 | export default function RootLayout({ children }) { 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | {children} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/components/EmailBox/EmailBox.css: -------------------------------------------------------------------------------- 1 | .emailBox { 2 | background-color: white; 3 | padding: 1rem 2rem; 4 | border-radius: 999px; 5 | display: flex; 6 | align-items: center; 7 | width: 70%; 8 | position: relative; 9 | overflow: hidden; 10 | } 11 | 12 | .emailBox>input { 13 | outline: none; 14 | border: none; 15 | margin-left: 1rem; 16 | font-size: 1rem; 17 | color: rgb(150, 150, 150); 18 | font-family: '__Josefin_Sans_584c1b', '__Josefin_Sans_Fallback_584c1b'; 19 | flex: 1; 20 | } 21 | 22 | .emailBox>input::placeholder { 23 | font-size: 0.8rem; 24 | } 25 | 26 | .getFunded { 27 | position: absolute; 28 | right: 0.5rem; 29 | height: 80%; 30 | background-color: var(--secondary-color); 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | padding: 0rem 2rem; 35 | border-radius: 999px; 36 | color: white; 37 | } -------------------------------------------------------------------------------- /src/components/BrandingVideo/BrandingVideo.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import React, { useRef } from 'react' 4 | import './BrandingVideo.css' 5 | import { motion, useScroll, useTransform } from 'framer-motion' 6 | 7 | const BrandingVideo = () => { 8 | const ref = useRef(null); 9 | const {scrollYProgress} = useScroll({ 10 | target: ref, 11 | offset: ["start end", "end end"] 12 | }) 13 | 14 | const scale = useTransform(scrollYProgress, [0, 1], [.6, 1]) 15 | 16 | return ( 17 |
18 |
19 | 25 | 26 | 27 |
28 |
29 | ) 30 | } 31 | 32 | export default BrandingVideo -------------------------------------------------------------------------------- /src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .f-wrapper .container { 2 | margin-top: 5rem; 3 | padding-top: 5rem; 4 | padding-bottom: 2rem; 5 | } 6 | 7 | .f-wrapper { 8 | background-color: var(--primary-color); 9 | } 10 | 11 | .f-container { 12 | display: flex; 13 | flex-direction: column; 14 | gap: 2rem; 15 | align-items: center; 16 | } 17 | 18 | .f-container .title { 19 | color: white; 20 | } 21 | 22 | .f-container .emailBox { 23 | max-width: 36rem; 24 | } 25 | 26 | .f-container hr { 27 | border-color: var(--border-color-light); 28 | width: 100%; 29 | } 30 | 31 | .f-menu { 32 | display: flex; 33 | justify-content: space-between; 34 | width: 100%; 35 | flex-wrap: wrap; 36 | } 37 | 38 | .f-menu span { 39 | color: white; 40 | text-transform: uppercase; 41 | font-size: 0.9rem; 42 | font-weight: bold; 43 | } 44 | 45 | @media (max-width: 990px) { 46 | .f-menu { 47 | flex-direction: column; 48 | gap: 2rem; 49 | align-items: center; 50 | } 51 | } -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Footer.css' 3 | import EmailBox from '../EmailBox/EmailBox' 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 |
10 | 11 | Get Funded Today! 12 | 13 | 14 | 15 |
16 |
17 | Home 18 | What we do 19 | how it works 20 | who we invest 21 | testimonials 22 |
23 |
24 | 25 | 26 | Made with love by Cotek Technologies 27 | 28 |
29 |
30 |
31 | ) 32 | } 33 | 34 | export default Footer -------------------------------------------------------------------------------- /src/components/OurDiff/OurDiff.css: -------------------------------------------------------------------------------- 1 | .od-wrapper { 2 | padding-top: 12rem; 3 | } 4 | 5 | .od-container { 6 | display: flex; 7 | flex-direction: column; 8 | gap: 2rem; 9 | } 10 | 11 | .od-head { 12 | display: flex; 13 | flex-direction: column; 14 | gap: 2rem; 15 | align-items: center; 16 | } 17 | 18 | .od-head .tag { 19 | color: white; 20 | } 21 | 22 | .od-head .text { 23 | color: white; 24 | text-align: center; 25 | max-width: 65%; 26 | } 27 | 28 | .od-features { 29 | display: flex; 30 | gap: 2rem; 31 | } 32 | 33 | .od-feature { 34 | flex: 1; 35 | background-color: white; 36 | box-shadow: var(--shadow); 37 | display: flex; 38 | flex-direction: column; 39 | gap: 1rem; 40 | align-items: center; 41 | padding: 2rem; 42 | border-radius: 1rem; 43 | } 44 | 45 | .od-feature .text { 46 | text-align: center; 47 | } 48 | 49 | @media (max-width: 990px) { 50 | .od-features { 51 | flex-direction: column; 52 | } 53 | } 54 | 55 | @media (max-width: 590px) { 56 | .od-feature { 57 | width: 80%; 58 | margin: auto; 59 | } 60 | } -------------------------------------------------------------------------------- /app/page.css: -------------------------------------------------------------------------------- 1 | .app { 2 | position: relative; 3 | transition: all 300ms ease-out; 4 | } 5 | .tag { 6 | color: var(--secondary-color); 7 | font-size: 1.5rem; 8 | font-weight: bold; 9 | } 10 | 11 | .title { 12 | font-size: 2.6rem; 13 | color: var(--title-color); 14 | font-weight: bold; 15 | text-align: center; 16 | line-height: 3.5rem; 17 | text-transform: capitalize; 18 | } 19 | 20 | .des { 21 | font-size: 1.4rem; 22 | color: var(--text-color); 23 | line-height: 2rem; 24 | } 25 | 26 | .sec-title { 27 | font-size: 2rem; 28 | color: var(--title-color); 29 | font-weight: 600; 30 | text-align: center; 31 | line-height: 3rem; 32 | text-transform: capitalize; 33 | } 34 | 35 | .text { 36 | color: var(--text-color); 37 | font-size: 1.1rem; 38 | line-height: 1.8rem; 39 | } 40 | 41 | @media (max-width: 768px) { 42 | .title { 43 | font-size: 2.2rem; 44 | } 45 | .sec-title { 46 | font-size: 1.8rem; 47 | } 48 | 49 | .des { 50 | font-size: 1.8rem; 51 | } 52 | } 53 | 54 | @media (max-width: 640px) { 55 | .title { 56 | font-size: 1.8rem; 57 | } 58 | .sec-title { 59 | font-size: 1.6rem; 60 | } 61 | } -------------------------------------------------------------------------------- /src/utils/animation.js: -------------------------------------------------------------------------------- 1 | export const containerVariants = (delay = 0)=> ({ 2 | "offscreen": { 3 | opacity: 0, 4 | y: 30 5 | }, 6 | "onscreen": { 7 | opacity: 1, 8 | y: 0, 9 | transition: { 10 | type: "spring", 11 | duration: 2, 12 | delay 13 | } 14 | } 15 | }) 16 | 17 | export const tagVariants = { 18 | "offscreen": { 19 | opacity: 0, 20 | y: 10 21 | }, 22 | "onscreen": { 23 | opacity: 1, 24 | y: 0, 25 | transition: { 26 | type: "spring", 27 | duration: 2, 28 | } 29 | } 30 | } 31 | export const titleVariants = { 32 | "offscreen": { 33 | opacity: 0, 34 | y: 30 35 | }, 36 | "onscreen": { 37 | opacity: 1, 38 | y: 0, 39 | transition: { 40 | type: "spring", 41 | duration: 2.2, 42 | } 43 | } 44 | } 45 | export const desVariants = { 46 | "offscreen": { 47 | opacity: 0, 48 | y: 20 49 | }, 50 | "onscreen": { 51 | opacity: 1, 52 | y: 0, 53 | transition: { 54 | type: "spring", 55 | duration: 2.6, 56 | delay: .2 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --dark-bg: #000; 4 | --light-bg: #f6f7fb; 5 | --primary-color: #533fd7; 6 | --secondary-color: #00caf9; 7 | --third-color: #54f3a6; 8 | --fourth-color: #fee590; 9 | --text-color: #867eb5; 10 | --text-secondary: #554b92; 11 | --text-color-dark: #12183f; 12 | --text-color-light: #fcf3d4; 13 | --title-color: #221577; 14 | --border-color: #6a55f8; 15 | --border-color-dark: #27263a; 16 | --border-color-light: #6a55f8; 17 | --shadow: 10px 12px 48px rgba(181, 187, 203, 0.206); 18 | } 19 | 20 | html { 21 | box-sizing: border-box; 22 | } 23 | 24 | body { 25 | color: var(--text-color); 26 | margin: 0 !important; 27 | max-width: 100%; 28 | overflow-x: hidden; 29 | padding: 0 !important; 30 | touch-action: pan-y, pan-x; 31 | transition: all 0.4s cubic-bezier(0.57, 0.25, 0.33, 1) 0s; 32 | } 33 | 34 | .container { 35 | width: 100%; 36 | margin: auto; 37 | overflow: hidden; 38 | 39 | } 40 | 41 | @media (min-width: 2100px) { 42 | .container { 43 | max-width: 1600px; 44 | } 45 | } 46 | 47 | @media (min-width: 576px) { 48 | .container { 49 | max-width: 540px; 50 | } 51 | } 52 | 53 | @media (min-width: 768px) { 54 | .container { 55 | max-width: 720px; 56 | } 57 | } 58 | 59 | @media (min-width: 992px) { 60 | .container { 61 | max-width: 960px; 62 | } 63 | } 64 | 65 | @media (min-width: 1200px) { 66 | .container { 67 | max-width: 1200px; 68 | } 69 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 `app/page.js`. The page auto-updates as you edit the file. 18 | 19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | 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. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /src/components/WhoWeInvest/WhoWeInvest.css: -------------------------------------------------------------------------------- 1 | .wwi-wrapper .container { 2 | padding-top: 13rem; 3 | } 4 | 5 | .wwi-container { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } 10 | 11 | .wwi-container > div { 12 | flex: 1; 13 | } 14 | 15 | .wwi-left { 16 | display: flex; 17 | flex-direction: column; 18 | gap: 2rem; 19 | } 20 | 21 | .wwi-left .head { 22 | display: flex; 23 | flex-direction: column; 24 | gap: 1rem; 25 | align-items: flex-start; 26 | } 27 | 28 | .wwi-left .head .title { 29 | text-align: left; 30 | color: white; 31 | } 32 | 33 | .wwi-feature { 34 | display: flex; 35 | flex-direction: column; 36 | gap: 0.5rem; 37 | max-width: 28rem; 38 | } 39 | 40 | .wwi-feature .des { 41 | color: var(--fourth-color); 42 | } 43 | 44 | .wwi-feature .text { 45 | color: white; 46 | text-align: justify; 47 | } 48 | 49 | .wwi-right { 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | align-self: flex-end; 54 | } 55 | 56 | .wwi-right img { 57 | width: 100%; 58 | } 59 | 60 | @media (max-width: 990px) { 61 | .wwi-container { 62 | flex-direction: column; 63 | padding: 2rem; 64 | } 65 | 66 | .wwi-right { 67 | align-self: center; 68 | margin-top: 2rem; 69 | } 70 | 71 | .wwi-right img { 72 | max-width: 20rem; 73 | } 74 | } 75 | 76 | @media (min-width: 768px) { 77 | .container { 78 | max-width: 80%; 79 | } 80 | } -------------------------------------------------------------------------------- /src/components/EmailBox/EmailBox.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './EmailBox.css' 3 | import {LuMail} from 'react-icons/lu' 4 | import {motion} from 'framer-motion' 5 | import { containerVariants } from '@/src/utils/animation' 6 | 7 | const EmailBox = () => { 8 | return ( 9 | 23 | {/* icon */} 24 | 32 | 33 | 34 | 35 | {/* input */} 36 | 45 | 46 | {/* get funded button */} 47 | 55 | Get Funded 56 | 57 | 58 | ) 59 | } 60 | 61 | export default EmailBox -------------------------------------------------------------------------------- /app/page.js: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import Navbar from '@/src/components/Navbar/Navbar'; 4 | import './page.css' 5 | import Hero from '@/src/components/Hero/Hero'; 6 | import BrandingVideo from '@/src/components/BrandingVideo/BrandingVideo'; 7 | import WhatWeDo from '@/src/components/WhatWeDo/WhatWeDo'; 8 | import OurDiff from '@/src/components/OurDiff/OurDiff'; 9 | import { motion, useAnimation } from 'framer-motion'; 10 | import HowItWorks from '@/src/components/HowItWorks/HowItWorks'; 11 | import WhoWeInvest from '@/src/components/WhoWeInvest/WhoWeInvest'; 12 | import Testimonials from '@/src/components/Testimonials/Testimonials'; 13 | import Footer from '@/src/components/Footer/Footer'; 14 | 15 | export default function Home() { 16 | 17 | const controls = useAnimation() 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 27 | controls.start({ 28 | backgroundColor: "var(--secondary-color)", 29 | }) 30 | } 31 | onViewportLeave={()=> controls.start({ 32 | backgroundColor: "white", 33 | })} 34 | viewport={{amount: 0.4}} 35 | > 36 | 37 | 38 | 39 | 40 | 42 | controls.start({ 43 | backgroundColor: "var(--primary-color)", 44 | }) 45 | } 46 | onViewportLeave={()=> controls.start({ 47 | backgroundColor: "white", 48 | })} 49 | viewport={{amount: 0.4}} 50 | > 51 | 52 | 53 | 54 | 55 |