├── .eslintrc.json ├── app ├── favicon.ico ├── globals.css ├── page.tsx └── layout.tsx ├── next.config.mjs ├── public ├── assets │ ├── png │ │ ├── hero.png │ │ ├── loc.png │ │ ├── msg.png │ │ ├── vive.png │ │ ├── vr.png │ │ ├── oculus.png │ │ ├── shape.png │ │ ├── unity.png │ │ ├── unreal.png │ │ ├── education.png │ │ ├── facebook.png │ │ ├── instagram.png │ │ ├── linkedin.png │ │ ├── logotext.png │ │ ├── navlogo.png │ │ ├── outdoor.png │ │ ├── pinterest.png │ │ ├── self-care.png │ │ ├── twitter.png │ │ ├── vrbanner.png │ │ ├── youtube.png │ │ ├── largearrow.png │ │ └── simulation.png │ ├── font │ │ └── Montserrat-Light.ttf │ └── svg │ │ ├── rightarrow.svg │ │ ├── smallarrow.svg │ │ ├── intro-arrow.svg │ │ ├── Vector 3.svg │ │ ├── Vector 4.svg │ │ ├── Vector 1.svg │ │ ├── msg.svg │ │ ├── Vector 2.svg │ │ ├── Vector 8.svg │ │ ├── Vector 7.svg │ │ ├── phone.svg │ │ └── loc.svg ├── vercel.svg └── next.svg ├── postcss.config.mjs ├── components ├── container │ └── Container.tsx ├── shared │ └── button │ │ └── Button.tsx ├── introduction │ └── Introduction.tsx ├── banner │ ├── BannerInnerContent.tsx │ └── Banner.tsx ├── navbar │ └── Navbar.tsx └── hero │ ├── InnerSection.tsx │ └── Hero.tsx ├── .gitignore ├── package.json ├── tsconfig.json ├── tailwind.config.ts └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /public/assets/png/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/hero.png -------------------------------------------------------------------------------- /public/assets/png/loc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/loc.png -------------------------------------------------------------------------------- /public/assets/png/msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/msg.png -------------------------------------------------------------------------------- /public/assets/png/vive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/vive.png -------------------------------------------------------------------------------- /public/assets/png/vr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/vr.png -------------------------------------------------------------------------------- /public/assets/png/oculus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/oculus.png -------------------------------------------------------------------------------- /public/assets/png/shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/shape.png -------------------------------------------------------------------------------- /public/assets/png/unity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/unity.png -------------------------------------------------------------------------------- /public/assets/png/unreal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/unreal.png -------------------------------------------------------------------------------- /public/assets/png/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/education.png -------------------------------------------------------------------------------- /public/assets/png/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/facebook.png -------------------------------------------------------------------------------- /public/assets/png/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/instagram.png -------------------------------------------------------------------------------- /public/assets/png/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/linkedin.png -------------------------------------------------------------------------------- /public/assets/png/logotext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/logotext.png -------------------------------------------------------------------------------- /public/assets/png/navlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/navlogo.png -------------------------------------------------------------------------------- /public/assets/png/outdoor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/outdoor.png -------------------------------------------------------------------------------- /public/assets/png/pinterest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/pinterest.png -------------------------------------------------------------------------------- /public/assets/png/self-care.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/self-care.png -------------------------------------------------------------------------------- /public/assets/png/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/twitter.png -------------------------------------------------------------------------------- /public/assets/png/vrbanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/vrbanner.png -------------------------------------------------------------------------------- /public/assets/png/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/youtube.png -------------------------------------------------------------------------------- /public/assets/png/largearrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/largearrow.png -------------------------------------------------------------------------------- /public/assets/png/simulation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/png/simulation.png -------------------------------------------------------------------------------- /public/assets/font/Montserrat-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/waseem567/landing-page-figma-design/HEAD/public/assets/font/Montserrat-Light.ttf -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /components/container/Container.tsx: -------------------------------------------------------------------------------- 1 | import React, { Children } from "react"; 2 | 3 | const Container = ({ 4 | children, 5 | }: Readonly<{ 6 | children: React.ReactNode; 7 | }>) => { 8 | return
{children}
; 9 | }; 10 | 11 | export default Container; 12 | -------------------------------------------------------------------------------- /public/assets/svg/rightarrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/svg/smallarrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/svg/intro-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | .text-gradient { 5 | background: linear-gradient(to right, #8176af, #c0b7e8); 6 | -webkit-background-clip: text; 7 | -webkit-text-fill-color: transparent; 8 | } 9 | .font-700 { 10 | font-size: 36px; 11 | font-weight: 700; 12 | } 13 | .font-700-thin { 14 | font-size: 36px; 15 | font-weight: 300; 16 | } 17 | .font-400-para { 18 | font-size: 16px; 19 | font-weight: 400; 20 | text-align: left; 21 | } 22 | /* * { 23 | border: 1px solid white; 24 | } */ 25 | -------------------------------------------------------------------------------- /.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.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 | -------------------------------------------------------------------------------- /components/shared/button/Button.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface RootInterface { 4 | height: string; 5 | width: string; 6 | text: string; 7 | to: string; 8 | background: string; 9 | } 10 | 11 | const Button = ({ height, width, text, to, background }: RootInterface) => { 12 | return ( 13 | 18 | ); 19 | }; 20 | 21 | export default Button; 22 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Banner from "@/components/banner/Banner"; 2 | import Container from "@/components/container/Container"; 3 | import Hero from "@/components/hero/Hero"; 4 | import Introduction from "@/components/introduction/Introduction"; 5 | import Navbar from "@/components/navbar/Navbar"; 6 | import Image from "next/image"; 7 | 8 | export default function Home() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/assets/svg/msg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "landing-page-figma-design", 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 | "next": "14.2.3", 13 | "react": "^18", 14 | "react-dom": "^18", 15 | "react-icons": "^5.2.1" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "eslint": "^8", 22 | "eslint-config-next": "14.2.3", 23 | "postcss": "^8", 24 | "tailwindcss": "^3.4.1", 25 | "typescript": "^5" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /public/assets/svg/Vector 7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Montserrat } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Montserrat({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | 23 | {children} 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | colors: { 17 | customColor1: "#3A3456F2", 18 | customColor2: "#211E2E", 19 | }, 20 | }, 21 | }, 22 | plugins: [], 23 | }; 24 | export default config; 25 | -------------------------------------------------------------------------------- /public/assets/svg/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/assets/svg/loc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/introduction/Introduction.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Introduction = () => { 4 | return ( 5 |
6 |
7 | INTRODUCTION TO HYDRA VR 8 |
9 | 16 | 23 | 24 | 25 |
26 |
27 |
28 | ); 29 | }; 30 | 31 | export default Introduction; 32 | -------------------------------------------------------------------------------- /public/next.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 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | 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. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /components/banner/BannerInnerContent.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const BannerInnerContent = () => { 4 | return ( 5 |
6 | 13 | 19 | 20 |
21 |

Pay Us a Visit

22 |

23 | Union St, Seattle, WA 98101, United States 24 |

25 |
26 |
27 | ); 28 | }; 29 | 30 | export default BannerInnerContent; 31 | -------------------------------------------------------------------------------- /components/navbar/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import navLogo from "@/public/assets/png/navlogo.png"; 3 | import logoText from "@/public/assets/png/logotext.png"; 4 | import { Butcherman } from "next/font/google"; 5 | import Button from "../shared/button/Button"; 6 | import localFont from "next/font/local"; 7 | import { GiHamburgerMenu } from "react-icons/gi"; 8 | 9 | const Navbar = () => { 10 | return ( 11 |
12 | {/* navbar hydra logo */} 13 |
14 | nav logo 20 | logo text 25 |
26 | {/* nav bar options */} 27 |
28 | 34 |
35 | {/* navbar buttons */} 36 |
37 | 42 |
50 | {/* hamburger */} 51 |
52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Navbar; 59 | -------------------------------------------------------------------------------- /components/hero/InnerSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import hero_image from "@/public/assets/png/hero.png"; 3 | import Image from "next/image"; 4 | 5 | const InnerSection = () => { 6 | return ( 7 |
8 | {/* hero section text */} 9 |
10 |

11 | Dive into the depths of{" "} 12 | Virtual Reality 13 |

14 |

15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 16 | eiusmod tempor incididunt ut labore et dolore nisl tincidunt eget. 17 | Lectus mauris eros in vitae . 18 |

19 |
20 | 25 |
26 | 34 | 41 | 42 |
43 |
44 |
45 | {/* hero section image */} 46 |
47 | hero section main image 52 |
53 |
54 | ); 55 | }; 56 | 57 | export default InnerSection; 58 | -------------------------------------------------------------------------------- /components/hero/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import InnerSection from "./InnerSection"; 3 | 4 | const Hero = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 | {/* 1 */} 11 | {/* 19 | 24 | 25 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | */} 40 | {/* 2 */} 41 | {/* 49 | 54 | 55 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | */} 70 | {/* 3 */} 71 | {/* 79 | 84 | 85 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | */} 100 | {/* 4 */} 101 |
102 | ); 103 | }; 104 | 105 | export default Hero; 106 | -------------------------------------------------------------------------------- /components/banner/Banner.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import location from "@/public/assets/svg/loc.svg"; 3 | const Banner = () => { 4 | return ( 5 |
6 | {/* col 1 */} 7 |
8 | 15 | 21 | 22 |
23 |

24 | Pay Us a Visit 25 |

26 |

27 | Union St, Seattle, WA 98101, United States 28 |

29 |
30 |
31 | {/* col 2 */} 32 |
33 | 40 | 47 | 48 | 49 |
50 |

51 | Give Us A Call 52 |

53 |

(110) 1111-1010

54 |
55 |
56 |
57 | 64 | 71 | 72 | 73 |
74 |

75 | Send Us a Message 76 |

77 |

78 | Contact@HydraVTech.com 79 |

80 |
81 |
82 |
83 | ); 84 | }; 85 | 86 | export default Banner; 87 | --------------------------------------------------------------------------------