diff --git a/package.json b/package.json index e9389f7..2072a63 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.3", + "smooth-scroll": "^16.1.3", "tailwind-merge": "^2.2.2" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4daedc2..b7654bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: react-router-dom: specifier: ^6.21.3 version: 6.21.3(react-dom@18.2.0)(react@18.2.0) + smooth-scroll: + specifier: ^16.1.3 + version: 16.1.3 tailwind-merge: specifier: ^2.2.2 version: 2.2.2 @@ -3321,6 +3324,10 @@ packages: is-fullwidth-code-point: 5.0.0 dev: true + /smooth-scroll@16.1.3: + resolution: {integrity: sha512-ca9U+neJS/cbdScTBuUTCZvUWNF2EuMCk7oAx3ImdeRK5FPm+xRo9XsVHIkeEVkn7MBRx+ufVEhyveM4ZhaTGA==} + dev: false + /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} diff --git a/src/app/index.jsx b/src/app/index.jsx index f437ef9..8e5e486 100644 --- a/src/app/index.jsx +++ b/src/app/index.jsx @@ -12,6 +12,7 @@ export default function App() { }> } /> + } /> } /> diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx index 0eab023..26f2b2d 100644 --- a/src/components/AboutUs.jsx +++ b/src/components/AboutUs.jsx @@ -3,8 +3,8 @@ import aboutUsData from '../data/aboutUsData.js'; export default function AboutUs() { return ( -
-
+ <> +
{aboutUsData.tag1}
@@ -17,7 +17,7 @@ export default function AboutUs() { {aboutUsData.tag3} -
+
{aboutUsData.lists.map((list, index) => ( @@ -43,6 +43,6 @@ export default function AboutUs() { {aboutUsData.content2} star - + ); } diff --git a/src/components/FaqSection/faq.jsx b/src/components/FaqSection/faq.jsx index b974bf5..b783a55 100644 --- a/src/components/FaqSection/faq.jsx +++ b/src/components/FaqSection/faq.jsx @@ -16,7 +16,7 @@ function FAQ() { }; return ( -
+
))}
-
+ ); } diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 5a06a4d..2ac7ab3 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -2,10 +2,12 @@ import { PersonalizedText, Text } from './shared/typography'; import { HeroText1 } from './shared/typography'; import { HeroText2 } from './shared/typography'; import { imgURLs } from '../data/eventsData'; +import Button from './shared/Button'; +import { Link } from 'react-router-dom'; const Hero = () => { return ( -
+
@@ -16,13 +18,11 @@ const Hero = () => { Lorem Ipsum Dolar sit Amet luyto - + + +
{
-
+ ); }; export default Hero; diff --git a/src/components/shared/Button.jsx b/src/components/shared/Button.jsx index 87a10c2..c342fc5 100644 --- a/src/components/shared/Button.jsx +++ b/src/components/shared/Button.jsx @@ -15,6 +15,7 @@ const buttonVariants = cva(['flex', 'items-center', 'justify-center', 'rounded'] 'gap-[10px]', 'text-black', 'font-semibold', + 'shadow-button', ], }, size: { diff --git a/src/components/shared/NavBar.jsx b/src/components/shared/NavBar.jsx deleted file mode 100644 index 0766496..0000000 --- a/src/components/shared/NavBar.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import { useState, useContext } from 'react'; -import { AuthContext } from '../../context/AuthContext'; -import { Link } from 'react-router-dom'; -import Text from './typography/Text'; -import Navigation from '../../data/Navigation'; -import image from '../../assets/images/image.png'; -import Button from './Button'; -import Logo from './Logo'; -import Hamburger from './Hamburger'; -import { signInWithGoogle, signOutUser } from '../../firebase/login'; - -function NavBar() { - const { userInfo, setUserData } = useContext(AuthContext); - - const { navItems, logo } = Navigation; - const [isNavOpen, setIsNavOpen] = useState(false); - - const toggleNav = () => { - setIsNavOpen(!isNavOpen); - }; - - return ( - - ); -} - -export default NavBar; diff --git a/src/components/shared/marginals/NavBar.jsx b/src/components/shared/marginals/NavBar.jsx new file mode 100644 index 0000000..d92ffab --- /dev/null +++ b/src/components/shared/marginals/NavBar.jsx @@ -0,0 +1,110 @@ +import { useState, useContext } from 'react'; +import { AuthContext } from '../../../context/AuthContext'; +import { Link } from 'react-router-dom'; +import Text from '../typography/Text'; +import Navigation from '../../../data/Navigation'; +import image from '../../../assets/images/image.png'; +import Button from '../Button'; +import Logo from '../Logo'; +import Hamburger from '../Hamburger'; +import { signInWithGoogle, signOutUser } from '../../../firebase/login'; +import SmoothScroll from 'smooth-scroll'; + +// Function Returning new scroll object +const newScrollObject = () => { + return new SmoothScroll('', { + offset: () => 100, + }); +}; + +const handleScroll = id => { + if (typeof window !== 'undefined' && id) { + const isHome = window.location.pathname === '/'; + if (isHome) { + const scroll = newScrollObject(); + const anchor = document.getElementById(id); + scroll.animateScroll(anchor); + } + } +}; + +function NavBar() { + const { userInfo, setUserData } = useContext(AuthContext); + + const { navItems, logo } = Navigation; + const [isNavOpen, setIsNavOpen] = useState(false); + + const toggleNav = () => { + setIsNavOpen(!isNavOpen); + }; + + return ( + + ); +} + +const onClick = (id, toggleNav) => { + handleScroll(id); + toggleNav(); +}; + +const NavList = ({ navItems, toggleNav }) => { + return ( + <> + {navItems.map(({ id, name, link }) => ( +
  • onClick(id, toggleNav)} + onKeyPress={link ? null : () => onClick(id, toggleNav)} + role='menuitem' + tabIndex={0}> + + + {name} + + +
    • + ))} + + ); +}; + +export default NavBar; diff --git a/src/components/shared/marginals/footer.jsx b/src/components/shared/marginals/footer.jsx index 11fe293..263a095 100644 --- a/src/components/shared/marginals/footer.jsx +++ b/src/components/shared/marginals/footer.jsx @@ -3,7 +3,7 @@ import { Heading, Paragraph } from '../typography/index.jsx'; export default function Footer() { return ( -
    +
    + ); } diff --git a/src/data/Navigation.js b/src/data/Navigation.js index 808fb73..0e9019e 100644 --- a/src/data/Navigation.js +++ b/src/data/Navigation.js @@ -8,29 +8,29 @@ export default { navItems: [ { - id: 'About us', - name: 'About', - link: '/about', + id: 'about', + name: 'About us', }, + // { + // id: 'events', + // name: 'Events', + // }, + // { + // name: 'Sponsors', + // link: '/sponsors', + // }, { - id: 'Events', - name: 'Events', - link: '/events', + id: 'footer', + name: 'Contact Us', }, { - id: 'Sponsors', - name: 'Sponsors', - link: '/sponsors', - }, - { - id: 'Contact us', - name: 'Contact', - link: '/contact', + id: 'faq', + name: 'FAQs', }, { - id: 'FAQS', - name: 'FAQs', - link: '/faqs', + id: 'register', + name: 'Register', + link: '/register', }, ], }; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index d22453d..c9c2071 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,7 +1,7 @@ import AboutUs from '../components/AboutUs'; import FAQ from '../components/FaqSection/faq'; import Hero from '../components/Hero'; -import Navbar from '../components/shared/NavBar'; +import Navbar from '../components/shared/marginals/NavBar'; import Footer from '../components/shared/marginals/footer'; export default function Home() { diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 45a220b..29c033e 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -3,4 +3,5 @@ import { lazy } from 'react'; export default { Home: lazy(() => import('./home')), Playground: lazy(() => import('./playground')), + Register: lazy(() => import('./register')), }; diff --git a/src/pages/playground.jsx b/src/pages/playground.jsx index c1a31ad..5c9a5e5 100644 --- a/src/pages/playground.jsx +++ b/src/pages/playground.jsx @@ -1,7 +1,7 @@ import { Heading, Paragraph, PersonalizedText, Text } from '../components/shared'; import Footer from '../components/shared/marginals/footer.jsx'; import FormContainer from '../components/form/FormContainer.jsx'; -import NavBar from '../components/shared/NavBar'; +import NavBar from '../components/shared/marginals/NavBar.jsx'; export default function Playground() { return ( diff --git a/src/pages/register.jsx b/src/pages/register.jsx new file mode 100644 index 0000000..cb1c2ad --- /dev/null +++ b/src/pages/register.jsx @@ -0,0 +1,9 @@ +import FormContainer from '../components/form/FormContainer'; + +export default function register() { + return ( +
    + +
    + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index ae84531..32a722b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -67,6 +67,7 @@ export default { boxShadow: { '3xl': '2px 3px 0px 0px #000', subheading: '1px 1px 0px 0px #F9F9F9', + button: '2px 2px 0px 0px #000, 3px 4px 9.2px 0px rgba(222, 222, 222, 0.48) inset', }, colors: { /** Design System Starts */