More major updates to the app
This commit is contained in:
parent
c388a82fbb
commit
720cd33399
@ -2,12 +2,14 @@ import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React, { useState } from "react";
|
||||
//import Logo from "./Logo";
|
||||
import NavItem from "./nav-item";
|
||||
import NavItem from "./nav-item";
|
||||
|
||||
const MENU_LIST = [
|
||||
{ text: "Home", href: "/" },
|
||||
{ text: "About Us", href: "/about" },
|
||||
{ text: "Contact", href: "/contact" },
|
||||
{ text: "about", href: "/about" },
|
||||
{ text: "get involved", href: "/getinvolved" },
|
||||
{ text: "projects", href: "/projects" },
|
||||
{ text: "hire us", href: "/hireus" },
|
||||
{ text: "contact us", href: "/contactus" },
|
||||
];
|
||||
const Navbar = () => {
|
||||
const [navActive, setNavActive] = useState(null);
|
||||
@ -17,7 +19,8 @@ const Navbar = () => {
|
||||
<header>
|
||||
<nav className={`nav`}>
|
||||
<Link href={"/"}>
|
||||
<h1 className="logo">CodeWithMarish</h1>
|
||||
<div className="flex items-center"><Image src="/shilohlogowhite.png" alt="Description of the image" width={50} height={50} />
|
||||
<h1 className="logo px-5">shiloh</h1></div>
|
||||
</Link>
|
||||
<div
|
||||
onClick={() => setNavActive(!navActive)}
|
||||
@ -46,4 +49,3 @@ const Navbar = () => {
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
||||
58
Components/Layout/section.jsx
Normal file
58
Components/Layout/section.jsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
|
||||
const videoRef = useRef(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const options = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.5,
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsPlaying(true);
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
setIsPlaying(false);
|
||||
videoRef.current.pause();
|
||||
}
|
||||
});
|
||||
}, options);
|
||||
|
||||
observer.observe(videoRef.current);
|
||||
|
||||
return () => {
|
||||
observer.unobserve(videoRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative z-10 h-screen w-screen">
|
||||
<video
|
||||
className="absolute h-screen w-screen object-cover blur-sm"
|
||||
src={videoUrl}
|
||||
ref={videoRef}
|
||||
muted
|
||||
loop
|
||||
autoPlay={isPlaying}
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
||||
<div className="relative flex justify-center items-end w-full mb-20">
|
||||
<h1 className="text-6xl font-normal text-white">{text}</h1>
|
||||
</div>
|
||||
<div className="flex justify-start space-x-4">
|
||||
<button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonOneText}</button>
|
||||
<button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonTwoText}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Section;
|
||||
12
package-lock.json
generated
12
package-lock.json
generated
@ -8,6 +8,8 @@
|
||||
"name": "shiloh",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@next/font": "^13.3.0",
|
||||
"animejs": "^3.2.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"next": "13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
@ -72,6 +74,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.0.tgz",
|
||||
"integrity": "sha512-AjppRV4uG3No7L1plinoTQETH+j2F10TEnrMfzbTUYwze5sBUPveeeBAPZPm8OkJZ1epq9OyYKhZrvbD6/9HCQ=="
|
||||
},
|
||||
"node_modules/@next/font": {
|
||||
"version": "13.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/font/-/font-13.3.0.tgz",
|
||||
"integrity": "sha512-xUv7VRUA2Zr6n/KJDILyv7/zGy9xKUsyQURaQqYr7lVxn0REScazwyZQzhSm+DnJoUyo+9DcFs2J3WsZXHUvQw=="
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "13.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.0.tgz",
|
||||
@ -247,6 +254,11 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/animejs": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
|
||||
"integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
|
||||
},
|
||||
"node_modules/any-promise": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@next/font": "^13.3.0",
|
||||
"animejs": "^3.2.1",
|
||||
"autoprefixer": "10.4.14",
|
||||
"next": "13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
import '@/styles/globals.css'
|
||||
import {Fira_Code} from '@next/font/google'
|
||||
|
||||
const firaCode = Fira_Code ({
|
||||
subsets: ["latin"],
|
||||
})
|
||||
export default function App({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
return (
|
||||
<main className={firaCode.className}>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,44 +1,48 @@
|
||||
|
||||
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 (
|
||||
<div className="w-screen h-screen flex items-center justify-center">
|
||||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
|
||||
<ReactPlayer
|
||||
url={videoUrl}
|
||||
playing
|
||||
loop
|
||||
muted
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="absolute top-0 left-0 z-0"
|
||||
/>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
import Navbar from "../Components/Layout/navbar.jsx";
|
||||
import Section from "../Components/Layout/section.jsx"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="relative z-10 w-full ">
|
||||
<Section videoUrl="https://rr1---sn-nx57ynlk.googlevideo.com/videoplayback?expire=1681805759&ei=X_09ZOmaG4rq8wSR9ZaIBA&ip=15.204.174.204&id=o-AAN2qc1B4B5weQXzki-zyga9riiXNdYSWNwsFLqtFO_N&itag=22&source=youtube&requiressl=yes&spc=99c5CXFG1SFqPY_xVJXZu9IItHSOjK0&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=192.493&lmt=1679719792702831&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIhAIjTG6lZpB9hSX4KHOQUz9ThofD0UW27Nf17H9vPHzhIAiAD1PIDbaAutrCqtjj7FicmvVrMe80zZxTLvKRQA3mqcw%3D%3D&host=rr1---sn-p5qs7nzk.googlevideo.com&redirect_counter=1&rm=sn-p5qe7y7e&req_id=5b5754df8b7ea3ee&cms_redirect=yes&ipbypass=yes&mh=ZX&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=31&mn=sn-nx57ynlk&ms=au&mt=1681783749&mv=m&mvi=1&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAIMXzPMAU4sbWbTrPYHI9ZdevPiv_0smLPtkJ4lR9-6YAiBMTl83ovfDZc9ZGyKtU5ig3X5gYNJqDpyulMho4SlrMg%3D%3D">
|
||||
<h1 className="text-6xl text-white font-bold">Section 1</h1>
|
||||
</Section>
|
||||
<Section videoUrl="https://vid.puffyan.us/watch?v=AyOnug-3OKM">
|
||||
<h1 className="text-6xl text-white font-bold">Section 2</h1>
|
||||
</Section>
|
||||
<Section videoUrl="https://vid.puffyan.us/watch?v=AyOnug-3OKM">
|
||||
<h1 className="text-6xl text-white font-bold">Section 3</h1>
|
||||
</Section>
|
||||
</div>
|
||||
</>
|
||||
<Section
|
||||
videoUrl="https://rr3---sn-nx5s7nel.googlevideo.com/videoplayback?expire=1681812183&ei=dxY-ZIiXLKCM_9EPusy-sA8&ip=15.204.174.204&id=o-AE49oMVwQRTSFMBjl7XvZoZt2-4d8o_Rgs9TXq-Sm5ux&itag=22&source=youtube&requiressl=yes&spc=99c5CdZXd08O95IMloGPGq5mcstIep4&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=192.493&lmt=1679719792702831&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgRKyJdJhOvhiuHCLkPM1jqozgkaliM9oin1SkU-c4ZMMCIExEOHxWBR-Fw_2xqCKEYobSq_K0mXqVGp-Drb5H4MZY&host=rr1---sn-p5qs7nzk.googlevideo.com&redirect_counter=1&rm=sn-p5qe7y7e&req_id=7b420ee96ae3a3ee&cms_redirect=yes&ipbypass=yes&mh=ZX&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=31&mn=sn-nx5s7nel&ms=au&mt=1681790222&mv=m&mvi=3&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhAPK8gNbgu42rwz3uqR1lMBAKYCmcuIYMejjVsXNxz9GXAiEA-HKjPzRU_JSX26Nmt-q01WZQ1fKBFRe5K6uW1JWRoRA%3D"
|
||||
text="redemptive tech in Jesus' name"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
<Section
|
||||
videoUrl="https://rr2---sn-vgqsknly.googlevideo.com/videoplayback?expire=1681820311&ei=NzY-ZLiXNcrO8wTXlp3YBQ&ip=15.204.174.205&id=o-AIURdLrU3YcNtnUpLoL3D_iec3v8rTkvoNcWMG4R4EAk&itag=22&source=youtube&requiressl=yes&spc=99c5CW9_6piE8zD4uWtb1XmeXIFTIjA&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=170.991&lmt=1628618583216432&fexp=24007246&c=ANDROID&txp=5311224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhALw9zi65tVkUhhQShkW3Yy7zxaDrnkXDYAIvchAcD-2nAiEA0Uylg0GI_-2QwVqbsyoL1N3IYoqCzWc7Kx5pkXVLPbc%3D&host=rr2---sn-p5qddn7r.googlevideo.com&rm=sn-p5qel77l&req_id=c70118d7d937a3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sk7l&cms_redirect=yes&cmsv=e&mh=It&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknly&ms=ltu&mt=1681798608&mv=m&mvi=2&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhALEvvp_J4MX7zxd00taP964ALILSjBRUNCCuhdAxr55lAiAbYpxCaiZKcLW8U67R-O4JazIWK1T2649mtxEindLogA%3D%3D"
|
||||
text="about"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
<Section
|
||||
videoUrl="https://rr4---sn-vgqsrnez.googlevideo.com/videoplayback?expire=1681820523&ei=Czc-ZN36G6WM_9EPpPiD6Aw&ip=15.204.174.210&id=o-ALz25RvjR7vgSgq2t2JZWpBNm_jY8AVQAxFzLAKkLeb8&itag=22&source=youtube&requiressl=yes&spc=99c5CQlBqT7CeM-U95d2vH-bQblF0dE&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=927.637&lmt=1663509028299089&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgdutUOT1SwogYkhXn5jEF3qwWe_5FOZ251cMpak0YsPsCICyGnSnCWg-uanwbSuwlSdXmyKGFjOd_IpmOeKSqejXi&host=rr4---sn-p5qlsn7l.googlevideo.com&rm=sn-p5qee77z&req_id=4ffb512965fba3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5ss76&cms_redirect=yes&cmsv=e&mh=qt&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsrnez&ms=ltu&mt=1681798608&mv=m&mvi=4&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAPLOEYbG9isyKeOHfRm8-YCuVPSbRK67yIQkvSAdvFsCAiAqwfJcI_Wn7BWj0Qfe6VU3x87_TflCLIPOLmJ3PTrM5Q%3D%3D"
|
||||
text="get involved"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
<Section
|
||||
videoUrl="https://rr4---sn-vgqsknsk.googlevideo.com/videoplayback?expire=1681820817&ei=MTg-ZLihFvyM_9EP68mkiAM&ip=15.204.174.210&id=o-AMxXtEx3G5gpmpsPxxSqV6XoJEOyOUxPX62M5sMnqhYe&itag=22&source=youtube&requiressl=yes&spc=99c5Caju8I5PlYtsEu9P1D5AqTEl9kU&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=594.848&lmt=1679115353140234&fexp=24007246&c=ANDROID&txp=5532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIgDzxrPcEs8d6jYGCg2IS25YTMLaFDEMERZiw1aofLhA4CIQD8e3LijQmJpdm_Lm3Y8zX87PbZhnqewnTcnQRcoIeSMQ%3D%3D&host=rr5---sn-p5qlsnrl.googlevideo.com&rm=sn-p5qe7z76&req_id=b34bd6b042ada3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sr7z&cms_redirect=yes&cmsv=e&mh=8x&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknsk&ms=ltu&mt=1681798846&mv=m&mvi=4&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRAIgEEmgeZ8RfEduZs4tVxLhVG1vwpt94czlySoDuhIYhHgCICb_AfmuF_fOg6xYB1L3Kt7YUSAaqvyBKTk-fiIqfOOo"
|
||||
text="projects"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
<Section
|
||||
videoUrl="https://rr1---sn-vgqsknzs.googlevideo.com/videoplayback?expire=1681820645&ei=hTc-ZM3RDcr08gTerb2ABw&ip=15.204.174.205&id=o-AKTcTDBnnRGqDF2L2KbITf-tO1RbRY33FVwc21QrdolI&itag=22&source=youtube&requiressl=yes&spc=99c5CdZ0BI9kVnkUJTdy2mNcVJIbTfo&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=3849.636&lmt=1565218203117972&fexp=24007246&c=ANDROID&txp=2316222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhAK4KayB81a0Y89z6SAu9u22A1gafFYG_JkC2w_jFmft7AiEA4CV7HiXzDt296gZ4xfRwPK7P_EJ5wLdY3uXtRySfd4M%3D&host=rr2---sn-p5qs7n6d.googlevideo.com&redirect_counter=1&cm2rm=sn-p5qell7l&req_id=3c4870c88ad5a3ee&cms_redirect=yes&mh=qj&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknzs&ms=ltu&mt=1681798608&mv=m&mvi=1&pl=40&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAI2V94dFrB2S7Og6uks72qh4NcAHTdUjQX2Eur9iYVlMAiB_eRn0oych-4e4ZkB9A7LIt7SjF5-9IFEj0n1EgrsLCQ%3D%3D"
|
||||
text="hire us"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
<Section
|
||||
videoUrl="https://rr5---sn-vgqsknez.googlevideo.com/videoplayback?expire=1681820719&ei=zzc-ZKnoBcKJ8wTv3Y2oDg&ip=15.204.174.204&id=o-APwcPqxhp8AAMUceSJojVq-cA9u_Mvxsba1xe8o72MWA&itag=22&source=youtube&requiressl=yes&spc=99c5CRpd31pyby30goPOHK_cJgeolS8&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=15.046&lmt=1648464882993617&fexp=24007246,24512781&beids=24512781&c=ANDROID&txp=6218224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIhAKh2CuL9TRLcXH4cgm2_7Ssvl42XoavPrO9tRM4GDc3yAiAnOC68CnJS_jEeBY1zdqHhW4nzTHm0_f9AqpzUkT3P1w%3D%3D&host=rr3---sn-p5qs7nzy.googlevideo.com&rm=sn-p5qee67s&req_id=d0717b923b2da3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sy7e&cms_redirect=yes&cmsv=e&mh=T6&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknez&ms=ltu&mt=1681798846&mv=m&mvi=5&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhANrQ3jkEzdp7kQQ6KPb5EK0whyRuIA8N0yhVRt5UWI3nAiEA-1Dhh09CocWu1BLU1vpiF9SJvip_63wGsYjpjFYrJNA%3D"
|
||||
text="contact us"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Binary file not shown.
@ -1,6 +1,6 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
@ -26,13 +26,11 @@ 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;
|
||||
@ -48,7 +46,13 @@ nav{
|
||||
padding: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f1f1f1;
|
||||
background-color: #f1f1f100;
|
||||
color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
.nav__menu-bar{
|
||||
display: flex;
|
||||
@ -59,7 +63,8 @@ nav{
|
||||
.nav__menu-bar div{
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background-color: black;
|
||||
background-color: white;
|
||||
color:white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.nav__menu-list{
|
||||
@ -73,7 +78,7 @@ nav{
|
||||
padding: 24px 16px;
|
||||
transition: all 0.2s;
|
||||
min-height: calc(100vh - 60px);
|
||||
background-color: #f1f1f1;
|
||||
background-color: none;
|
||||
}
|
||||
.nav__menu-list.active{
|
||||
right: 0;
|
||||
@ -113,11 +118,11 @@ nav{
|
||||
height: 6px;
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
background-color: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav__link:hover:before{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,67 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx}',
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
safelist: [
|
||||
"relative",
|
||||
"z-10",
|
||||
"flex",
|
||||
"justify-center",
|
||||
"items-center",
|
||||
"h-full",
|
||||
"text-6xl",
|
||||
"text-white",
|
||||
"font-bold",
|
||||
"relative",
|
||||
"h-screen",
|
||||
"w-screen",
|
||||
"absolute",
|
||||
"object-cover",
|
||||
"items-end",
|
||||
"bottom-20",
|
||||
"px-4",
|
||||
"py-2",
|
||||
"text-white",
|
||||
"border",
|
||||
"border-white",
|
||||
"rounded",
|
||||
"hover:border-blue-500",
|
||||
"transition",
|
||||
"duration-300",
|
||||
"ease-in-out",
|
||||
"focus:outline-none",
|
||||
"relative",
|
||||
"z-10",
|
||||
"flex",
|
||||
"flex-col",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"h-full",
|
||||
"mx-5",
|
||||
"mt-8",
|
||||
"blur-sm",
|
||||
"backdrop-brightness-30",
|
||||
"bg-blue-600/30",
|
||||
"backdrop-brightness-10",
|
||||
"text-lg",
|
||||
"hover:border-white",
|
||||
"border-blue-500",
|
||||
"underline",
|
||||
"px-20",
|
||||
"px-5",
|
||||
"text-base",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user