diff --git a/Components/Layout/footer.js b/Components/Layout/footer.js new file mode 100644 index 0000000..e69de29 diff --git a/Components/Layout/nav-item.js b/Components/Layout/nav-item.js new file mode 100644 index 0000000..e4e88cd --- /dev/null +++ b/Components/Layout/nav-item.js @@ -0,0 +1,15 @@ +import Link from "next/link"; +const NavItem = ({ text, href, active }) => { + return ( + + + + {text} + + + ); +}; + +export default NavItem; \ No newline at end of file diff --git a/Components/Layout/navbar.js b/Components/Layout/navbar.js new file mode 100644 index 0000000..2bb4b6a --- /dev/null +++ b/Components/Layout/navbar.js @@ -0,0 +1,49 @@ +import Link from "next/link"; +import Image from "next/image"; +import React, { useState } from "react"; +//import Logo from "./Logo"; +import NavItem from "./nav-item"; + +const MENU_LIST = [ + { text: "Home", href: "/" }, + { text: "About Us", href: "/about" }, + { text: "Contact", href: "/contact" }, +]; +const Navbar = () => { + const [navActive, setNavActive] = useState(null); + const [activeIdx, setActiveIdx] = useState(-1); + + return ( +
+ +
+ ); +}; + +export default Navbar; + diff --git a/package-lock.json b/package-lock.json index 21d5953..75782b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,12 @@ "dependencies": { "autoprefixer": "10.4.14", "next": "13.3.0", + "observer": "^0.0.2", "postcss": "8.4.22", - "react": "18.2.0", + "react": "^18.2.0", "react-dom": "18.2.0", + "react-intersection-observer": "^9.4.3", + "react-player": "^2.12.0", "tailwindcss": "3.3.1" } }, @@ -467,6 +470,14 @@ "node": ">=4" } }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -700,6 +711,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -711,6 +727,11 @@ "loose-envify": "cli.js" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -881,6 +902,11 @@ "node": ">= 6" } }, + "node_modules/observer": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/observer/-/observer-0.0.2.tgz", + "integrity": "sha512-wlWBeeMICA/Xo67Gqw3prCDJG9z/JYiRaXBnWYj9/9bSjA+GVWxVFAPFYZ2ENO/lmtJdxSBIABVWP999nbFQ5Q==" + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1030,6 +1056,16 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -1083,6 +1119,39 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", + "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==" + }, + "node_modules/react-intersection-observer": { + "version": "9.4.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz", + "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-player": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.12.0.tgz", + "integrity": "sha512-rymLRz/2GJJD+Wc01S7S+i9pGMFYnNmQibR2gVE3KmHJCBNN8BhPAlOPTGZtn1uKpJ6p4RPLlzPQ1OLreXd8gw==", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 87af639..c89b23f 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,12 @@ "dependencies": { "autoprefixer": "10.4.14", "next": "13.3.0", + "observer": "^0.0.2", "postcss": "8.4.22", - "react": "18.2.0", + "react": "^18.2.0", "react-dom": "18.2.0", + "react-intersection-observer": "^9.4.3", + "react-player": "^2.12.0", "tailwindcss": "3.3.1" } } diff --git a/pages/index.js b/pages/index.js index 9cf713b..d2cd451 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,124 +1,44 @@ -import Image from 'next/image' -import { Inter } from 'next/font/google' -const inter = Inter({ subsets: ['latin'] }) +import React from "react"; +import Navbar from "../Components/Layout/navbar"; +//import Footer from "../Components/Layout/footer"; +import ReactPlayer from 'react-player'; + +const Section = ({ children, videoUrl }) => { + + return ( +
+
+ +
+ {children} +
+ ); +}; export default function Home() { return ( -
-
-

- Get started by editing  - pages/index.js -

-
- - By{' '} - Vercel Logo - -
+ <> + +
+
+

Section 1

+
+
+

Section 2

+
+
+

Section 3

+
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Discover and deploy boilerplate example Next.js projects. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) + + ); } diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..4143938 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/gpt-4-92586ac_1080p60.mp4 b/public/gpt-4-92586ac_1080p60.mp4 new file mode 100644 index 0000000..995442c Binary files /dev/null and b/public/gpt-4-92586ac_1080p60.mp4 differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/shilohlogowhite.png b/public/shilohlogowhite.png new file mode 100644 index 0000000..4143938 Binary files /dev/null and b/public/shilohlogowhite.png differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index fd81e88..ebe5252 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -25,3 +25,99 @@ body { ) rgb(var(--background-start-rgb)); } +/*additional css*/ +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap'); +* { + margin: 0; + padding: 0; + outline: none; + box-sizing: border-box; + font-family: 'Work Sans', sans-serif; +} +a{ + text-decoration: none; + color: inherit; +} +header{ + position: sticky; + z-index: 30; + top: 0; +} +nav{ + display: flex; + padding: 16px; + justify-content: space-between; + align-items: center; + background-color: #f1f1f1; +} +.nav__menu-bar{ + display: flex; + flex-direction: column; + row-gap: 6px; + cursor: pointer; +} +.nav__menu-bar div{ + width: 40px; + height: 4px; + background-color: black; + border-radius: 2px; +} +.nav__menu-list{ + display: flex; + flex-direction: column; + position: fixed; + top: 60px; + width: 288px; + row-gap: 24px; + right: -288px; + padding: 24px 16px; + transition: all 0.2s; + min-height: calc(100vh - 60px); + background-color: #f1f1f1; +} +.nav__menu-list.active{ + right: 0; +} +.nav__link{ + font-size: 18px; + position: relative; + transition: all 0.2s; +} + +.nav__link:hover{ + font-weight: bold; +} + +.center{ + min-height: 600px; + display: flex; + justify-content: center; + align-items: center; +} +@media screen and (min-width: 768px) { + .nav__menu-bar{ + display: none; + } + .nav__menu-list{ + position: unset; + flex-direction: row; + min-height: fit-content; + width: fit-content; + column-gap: 24px; + align-items: center; + } + .nav__link::before{ + content: ''; + position: absolute; + width: 0%; + height: 6px; + bottom: -16px; + left: 0; + background-color: black; + transition: all 0.2s; + } + + .nav__link:hover:before{ + width: 100%; + } +} \ No newline at end of file