diff --git a/client/index.html b/client/index.html index 7cba1b9..5aaeea2 100644 --- a/client/index.html +++ b/client/index.html @@ -3,8 +3,13 @@ - + + + + + + SNIPPETLABS | Offical page diff --git a/client/public/logos/__favicon.png b/client/public/logos/__favicon.png new file mode 100644 index 0000000..ba8c0c8 Binary files /dev/null and b/client/public/logos/__favicon.png differ diff --git a/client/src/App.tsx b/client/src/App.tsx index 0871e65..70987b9 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,12 +1,37 @@ -import React from 'react'; +import React, { lazy, Suspense, useEffect, useState } from 'react'; +import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'; +// COMPONENTS +const Layout = lazy(() => import('./components/Layout/Layout')); +// UTILS +import Loader from './utils/Loader/Loader'; +// ICONS +//STORE + +const Content: React.FC = () => { + // STATES + const location = useLocation(); + const [isLoading, setIsLoading] = useState(() => false); + + useEffect(() => { + setIsLoading(true); + const loadingTime = setTimeout(() => { + setIsLoading(false); + }, 1000); + + return () => clearTimeout(loadingTime); + }, [location.pathname]); + return isLoading ? : ; +}; const App: React.FC = () => { return ( -
-
- SNIPPETLABS -
-
+ }> + + + } /> + + + ); }; diff --git a/client/src/components/General/Footer/Footer.tsx b/client/src/components/General/Footer/Footer.tsx new file mode 100644 index 0000000..df8514b --- /dev/null +++ b/client/src/components/General/Footer/Footer.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Footer: React.FC = () => { + return
; +}; + +export default Footer; diff --git a/client/src/components/General/NavigationBar/Navigation.styles.css b/client/src/components/General/NavigationBar/Navigation.styles.css new file mode 100644 index 0000000..1efc225 --- /dev/null +++ b/client/src/components/General/NavigationBar/Navigation.styles.css @@ -0,0 +1,23 @@ +/* Desktop and Mobile Navigation links */ +.DESKTOP-LINKS { + @apply font-semibold rounded-2xl bg-white/20 shadow-lg ring-2 ring-black/10 px-3 py-4; +} +.DESKTOP-LINKS-ACTIVE { + @apply text-black rounded-xl shadow-lg border-1 p-3; +} +.MOBILE-LINKS { + @apply font-semibold rounded-xl bg-white/20 shadow-lg ring-2 ring-black/10 p-2; +} +.MOBILE-LINKS-HOVER { + @apply font-semibold rounded-xl hover:bg-white/20 hover:shadow-lg hover:ring-2 hover:ring-black/10 p-2; +} + +/* Button */ +.BUTTON { + @apply font-semibold rounded-2xl bg-white shadow-lg ring-2 px-4 py-4; +} + +/* Border */ +.BORDER-LEFT-CORNER-3XL { + @apply border-l-3 border-white rounded-l-2xl; +} diff --git a/client/src/components/General/NavigationBar/NavigationBar.tsx b/client/src/components/General/NavigationBar/NavigationBar.tsx new file mode 100644 index 0000000..6c830c6 --- /dev/null +++ b/client/src/components/General/NavigationBar/NavigationBar.tsx @@ -0,0 +1,130 @@ +import React, { useState } from 'react'; +import { NavLink, Link } from 'react-router-dom'; + +// ICONS +import { HiMenuAlt3, HiX } from 'react-icons/hi'; +// UTILS +import Logo from '../../../utils/Logo/Logo'; +// DATA +import NAVIGATION_LINKS from '../../../data/NavigationLinks/NavigationLinks'; + +const NavigationBar: React.FC = () => { + // STATES + const [toggleSidebar, setToggleSidebar] = useState(() => false); + + // STATE HANDLER FUNCTION + const handleOpenSidebar = () => { + setToggleSidebar(!toggleSidebar); + }; + const handleCloseSidebar = () => { + setToggleSidebar(false); + }; + + // RENDER + return ( + <> +
+ + {/* Desktop Navigation Bar */} +
+
+
    + {NAVIGATION_LINKS.map(({ name, path }, id) => ( +
  • + + isActive ? 'DESKTOP-LINKS-ACTIVE BG-WHITE-PRIMARY' : '' + } + > + {name} + +
    • + ))} +
+
+ + Contract + +
+ {/* Mobile Navigation Bar */} + +
+ + {/* Mobile Sidebar Toggle with Overlay */} +
+ {/* Backdrop */} +
+ + {/* Sidebar */} +
+ {/* Sidebar Header */} +
+ + +
+ + {/* Sidebar Content */} +
+ {/* Navigation Links */} + + + {/* Contact Button */} + + Contract + +
+
+
+ + ); +}; + +export default NavigationBar; diff --git a/client/src/components/Layout/Layout.tsx b/client/src/components/Layout/Layout.tsx index e69de29..1ddf1cc 100644 --- a/client/src/components/Layout/Layout.tsx +++ b/client/src/components/Layout/Layout.tsx @@ -0,0 +1,25 @@ +import React, { Suspense } from 'react'; +import { Routes, Route } from 'react-router-dom'; + +// COMPONENTS +import NavigationBar from '../General/NavigationBar/NavigationBar'; +import Footer from '../General/Footer/Footer'; +// UTILS +import Loader from '../../utils/Loader/Loader'; + +const Layout: React.FC = () => { + return ( +
+ + }> + + } /> + + + +
+
+ ); +}; + +export default Layout; diff --git a/client/src/data/NavigationLinks/NavigationLinks.ts b/client/src/data/NavigationLinks/NavigationLinks.ts new file mode 100644 index 0000000..2cfe130 --- /dev/null +++ b/client/src/data/NavigationLinks/NavigationLinks.ts @@ -0,0 +1,36 @@ +import type { NavigationLinkProps } from "./NavigationLinks.types"; + +const NAVIGATION_LINKS: NavigationLinkProps[] = [ + { + id: 1, + name: "Home", + path: "/" + }, + { + id: 2, + name: "AboutUs", + path: "/about-us" + }, + { + id: 3, + name: "TechStack", + path: "/tech-stack" + }, + { + id: 4, + name: "Client", + path: "/client-projects" + }, + { + id: 5, + name: "Products", + path: "/products" + }, + { + id: 6, + name: "Team", + path: "/team" + } +]; + +export default NAVIGATION_LINKS; \ No newline at end of file diff --git a/client/src/data/NavigationLinks/NavigationLinks.types.ts b/client/src/data/NavigationLinks/NavigationLinks.types.ts new file mode 100644 index 0000000..2e631ee --- /dev/null +++ b/client/src/data/NavigationLinks/NavigationLinks.types.ts @@ -0,0 +1,5 @@ +export type NavigationLinkProps = { + id: number; + name: string; + path: string; +} \ No newline at end of file diff --git a/client/src/global.css b/client/src/global.css index e69de29..c8f7931 100644 --- a/client/src/global.css +++ b/client/src/global.css @@ -0,0 +1,107 @@ +/* BACKGROUND */ +.BG-BLACK-PRIMARY { + @apply bg-[#0F0F0F]; +} +.BG-WHITE-PRIMARY { + @apply bg-white; +} +.BG-WHITE-SECONDARY { + @apply bg-white/80; +} + +/* COLORS */ +.TEXT-WHITE-PRIMARY { + @apply text-white; +} +.TEXT-WHITE-PRIMARY-HOVER { + @apply hover:text-white; +} +.WHITE-20 { + @apply bg-white/20; +} +.WHITE-20-HOVER { + @apply hover:bg-white/20; +} +.TEXT-BLACK-PRIMARY { + @apply text-black; +} +.GRAY-300 { + @apply text-gray-300; +} + +/* FONT */ +.SEMIBOLD { + @apply font-semibold; +} + +/* UNIVERSAL */ +.ABSOLUTE { + @apply absolute; +} +.FIXED { + @apply fixed; +} +.FULL { + @apply w-full; +} +.BLOCK { + @apply block; +} + +/* POSITION */ +.T0 { + @apply top-0; +} +.R0 { + @apply right-0; +} + +/* FLEX */ +.FLEX-CENTER { + @apply flex items-center justify-center; +} +.FLEX-CENTER-LG { + @apply lg:flex items-center justify-center; +} +.FLEX-BETWEEN { + @apply flex items-center justify-between; +} +.FLEX-END { + @apply flex items-center justify-end; +} + +/* ALIGNMENT */ +.CENTER { + @apply text-center; +} + +/* PADDING */ +.PADDING { + @apply px-5; +} + +/* HOVER */ +.POINTER { + @apply hover:cursor-pointer; +} + +/* EASE MOTION */ +.EASE { + @apply ease-in-out; +} + +/* DURATION */ +.D-300 { + @apply duration-300; +} + +/* TRANSITION */ +.TRANSFORM { + @apply transition-transform; +} +.COLORS { + @apply transition-colors; +} +.ALL { + @apply transition-all; +} diff --git a/client/src/index.css b/client/src/index.css index f1d8c73..4ced832 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1 +1,13 @@ -@import "tailwindcss"; +@import 'tailwindcss'; +@import './global.css'; + +/* FONTS */ +@theme { + --font-style-logo: 'Monoton', sans-serif; +} + +/* LOADERS */ +@import './utils/Loader/Loader.styles.css'; + +/* COMPONENTS */ +@import './components/General/NavigationBar/Navigation.styles.css'; diff --git a/client/src/utils/Loader/Loader.styles.css b/client/src/utils/Loader/Loader.styles.css new file mode 100644 index 0000000..7d6a63f --- /dev/null +++ b/client/src/utils/Loader/Loader.styles.css @@ -0,0 +1,3 @@ +.LOADER { + @apply h-screen w-full flex items-center justify-center; +} diff --git a/client/src/utils/Loader/Loader.tsx b/client/src/utils/Loader/Loader.tsx new file mode 100644 index 0000000..bdaa647 --- /dev/null +++ b/client/src/utils/Loader/Loader.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +// LDRS +import { Hatch } from 'ldrs/react'; +import 'ldrs/react/Hatch.css'; + +const Loader: React.FC = () => { + return ( +
+ +
+ ); +}; + +export default Loader; diff --git a/client/src/utils/Logo/Logo.tsx b/client/src/utils/Logo/Logo.tsx new file mode 100644 index 0000000..6822798 --- /dev/null +++ b/client/src/utils/Logo/Logo.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +// TYPES +import type { LogoProps } from './Logo.types'; + +const Logo: React.FC = ({ className }) => { + return
{`{?:}`}
; +}; + +export default Logo; diff --git a/client/src/utils/Logo/Logo.types.tsx b/client/src/utils/Logo/Logo.types.tsx new file mode 100644 index 0000000..b5d2a88 --- /dev/null +++ b/client/src/utils/Logo/Logo.types.tsx @@ -0,0 +1,3 @@ +export interface LogoProps { + className: string; +}