├── .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 |
16 | {text}
17 |
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 |
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 |
20 |
25 |
26 | {/* nav bar options */}
27 |
28 |
29 | About
30 | services
31 | technologies
32 | How to
33 |
34 |
35 | {/* navbar buttons */}
36 |
37 |
40 | contact us
41 |
42 |
49 |
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 |
23 | Build your world
24 |
25 |
43 |
44 |
45 | {/* hero section image */}
46 |
47 |
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 |
--------------------------------------------------------------------------------