Repository: frontend-joe/react-components Branch: main Commit: 76ee472a27cd Files: 215 Total size: 351.9 KB Directory structure: gitextract_o32ohc4j/ ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src/ │ ├── App.jsx │ ├── Layout.css │ ├── Layout.jsx │ ├── components/ │ │ ├── accordions/ │ │ │ ├── Accordion1/ │ │ │ │ ├── Accordion1.jsx │ │ │ │ ├── Accordion1Example.jsx │ │ │ │ └── styles.css │ │ │ ├── Accordion2/ │ │ │ │ ├── Accordion2.css │ │ │ │ ├── Accordion2.jsx │ │ │ │ ├── Accordion2Example.css │ │ │ │ └── Accordion2Example.jsx │ │ │ ├── Accordion3/ │ │ │ │ ├── Accordion3.css │ │ │ │ ├── Accordion3.jsx │ │ │ │ └── Accordion3Example.jsx │ │ │ └── index.js │ │ ├── buttons/ │ │ │ ├── DeleteButton/ │ │ │ │ ├── DeleteButton.jsx │ │ │ │ └── styles.css │ │ │ ├── FabButton/ │ │ │ │ ├── FabButton.css │ │ │ │ └── FabButton.jsx │ │ │ ├── TrashButton/ │ │ │ │ ├── TrashButton.css │ │ │ │ └── TrashButton.jsx │ │ │ └── index.js │ │ ├── cards/ │ │ │ ├── Card1/ │ │ │ │ ├── Card1.jsx │ │ │ │ └── styles.css │ │ │ ├── Card2/ │ │ │ │ ├── Card2.css │ │ │ │ ├── Card2.jsx │ │ │ │ └── Card2Example.jsx │ │ │ ├── Card3/ │ │ │ │ ├── Card3.css │ │ │ │ ├── Card3.jsx │ │ │ │ ├── Card3Example.css │ │ │ │ └── Card3Example.jsx │ │ │ ├── Card4/ │ │ │ │ ├── Card4.css │ │ │ │ ├── Card4.jsx │ │ │ │ ├── Card4Example.css │ │ │ │ └── Card4Example.jsx │ │ │ ├── Card5/ │ │ │ │ ├── Card5.css │ │ │ │ ├── Card5.jsx │ │ │ │ ├── Card5Example.css │ │ │ │ ├── Card5Example.jsx │ │ │ │ ├── Dropdown.css │ │ │ │ └── Dropdown.jsx │ │ │ ├── Card6/ │ │ │ │ ├── Card6.css │ │ │ │ ├── Card6.jsx │ │ │ │ ├── Card6Example.css │ │ │ │ └── Card6Example.jsx │ │ │ ├── Card7/ │ │ │ │ ├── Card7.css │ │ │ │ ├── Card7.jsx │ │ │ │ ├── Card7Example.css │ │ │ │ └── Card7Example.jsx │ │ │ └── index.js │ │ ├── carousels/ │ │ │ ├── Carousel1/ │ │ │ │ ├── Carousel1.jsx │ │ │ │ └── styles.css │ │ │ ├── Carousel2/ │ │ │ │ ├── Carousel2.jsx │ │ │ │ └── styles.css │ │ │ ├── Carousel3/ │ │ │ │ ├── Carousel3.css │ │ │ │ └── Carousel3.jsx │ │ │ └── index.js │ │ ├── controls/ │ │ │ ├── AutoSuggest/ │ │ │ │ ├── AutoSuggest.jsx │ │ │ │ └── styles.css │ │ │ ├── EditableText/ │ │ │ │ ├── EditableText.css │ │ │ │ ├── EditableText.jsx │ │ │ │ ├── EditableTextExample.css │ │ │ │ └── EditableTextExample.jsx │ │ │ ├── PasswordStrength/ │ │ │ │ ├── PasswordStrength.jsx │ │ │ │ └── styles.css │ │ │ ├── PasswordStrength2/ │ │ │ │ ├── PasswordStrength2.css │ │ │ │ └── PasswordStrength2.jsx │ │ │ ├── PasswordStrength3/ │ │ │ │ ├── PasswordStrength3.css │ │ │ │ └── PasswordStrength3.jsx │ │ │ ├── PasswordStrength4/ │ │ │ │ ├── PasswordStrength4.css │ │ │ │ └── PasswordStrength4.jsx │ │ │ ├── PasswordVisibility/ │ │ │ │ ├── Password.css │ │ │ │ ├── Password.jsx │ │ │ │ ├── PasswordVisibilityExample.css │ │ │ │ └── PasswordVisibilityExample.jsx │ │ │ ├── Slider/ │ │ │ │ ├── Slider.css │ │ │ │ ├── Slider.jsx │ │ │ │ ├── SliderExample.css │ │ │ │ └── SliderExample.jsx │ │ │ └── index.js │ │ ├── dropdowns/ │ │ │ ├── Dropdown1/ │ │ │ │ ├── Dropdown1.css │ │ │ │ ├── Dropdown1.jsx │ │ │ │ └── Dropdown1Example.jsx │ │ │ ├── Dropdown2/ │ │ │ │ ├── Dropdown2.css │ │ │ │ ├── Dropdown2.jsx │ │ │ │ ├── Dropdown2Example.css │ │ │ │ └── Dropdown2Example.jsx │ │ │ ├── Dropdown3/ │ │ │ │ ├── Dropdown3.css │ │ │ │ └── Dropdown3.jsx │ │ │ ├── Dropdown4/ │ │ │ │ ├── Dropdown4.css │ │ │ │ ├── Dropdown4.jsx │ │ │ │ ├── Dropdown4Example.css │ │ │ │ └── Dropdown4Example.jsx │ │ │ ├── Dropdown5/ │ │ │ │ ├── Dropdown5.css │ │ │ │ ├── Dropdown5.jsx │ │ │ │ ├── Dropdown5Example.css │ │ │ │ └── Dropdown5Example.jsx │ │ │ ├── Dropdown6/ │ │ │ │ ├── Dropdown6.css │ │ │ │ ├── Dropdown6.jsx │ │ │ │ ├── Dropdown6Example.css │ │ │ │ └── Dropdown6Example.jsx │ │ │ ├── Dropdown7/ │ │ │ │ ├── Dropdown7.css │ │ │ │ └── Dropdown7.jsx │ │ │ └── index.js │ │ ├── gsap/ │ │ │ ├── ScrollReveal/ │ │ │ │ ├── ScrollReveal.jsx │ │ │ │ └── styles.css │ │ │ ├── TypedMessage/ │ │ │ │ ├── TypedMessage.css │ │ │ │ ├── TypedMessage.jsx │ │ │ │ ├── TypedMessageExample.css │ │ │ │ └── TypedMessageExample.jsx │ │ │ └── index.js │ │ ├── index.js │ │ ├── libraries/ │ │ │ ├── index.js │ │ │ ├── rc-slider/ │ │ │ │ ├── RcSlider.css │ │ │ │ └── RcSlider.jsx │ │ │ ├── react-dropzone/ │ │ │ │ ├── ReactDropzone.css │ │ │ │ └── ReactDropzone.jsx │ │ │ └── react-xarrows/ │ │ │ ├── ReactXarrows.css │ │ │ └── ReactXarrows.jsx │ │ ├── logins/ │ │ │ ├── Login1/ │ │ │ │ ├── Login1.jsx │ │ │ │ └── styles.css │ │ │ ├── Login2/ │ │ │ │ ├── Login2.jsx │ │ │ │ └── styles.css │ │ │ ├── Login3/ │ │ │ │ ├── Login3.css │ │ │ │ └── Login3.jsx │ │ │ ├── Login4/ │ │ │ │ ├── Login4.css │ │ │ │ └── Login4.jsx │ │ │ ├── Login5/ │ │ │ │ ├── Login5.jsx │ │ │ │ └── styles.css │ │ │ ├── Login6/ │ │ │ │ ├── Login6.jsx │ │ │ │ ├── styles.css │ │ │ │ └── useWebGLBackground.js │ │ │ └── index.js │ │ ├── modals/ │ │ │ ├── Modal1/ │ │ │ │ ├── Modal1.jsx │ │ │ │ └── styles.css │ │ │ ├── Modal2/ │ │ │ │ ├── Modal2 copy.css │ │ │ │ ├── Modal2.css │ │ │ │ ├── Modal2.jsx │ │ │ │ ├── Modal2Example.css │ │ │ │ └── Modal2Example.jsx │ │ │ └── index.js │ │ ├── navbars/ │ │ │ ├── Navbar1/ │ │ │ │ ├── Navbar1.css │ │ │ │ └── Navbar1.jsx │ │ │ ├── Navbar2/ │ │ │ │ ├── Navbar2.css │ │ │ │ └── Navbar2.jsx │ │ │ ├── Navbar3/ │ │ │ │ ├── Navbar3.css │ │ │ │ └── Navbar3.jsx │ │ │ ├── Navbar4/ │ │ │ │ ├── Navbar4.css │ │ │ │ └── Navbar4.jsx │ │ │ └── index.js │ │ ├── parallax/ │ │ │ ├── index.js │ │ │ ├── parallax-1/ │ │ │ │ ├── Parallax1.jsx │ │ │ │ └── styles.css │ │ │ └── parallax-2/ │ │ │ ├── Parallax2.css │ │ │ └── Parallax2.jsx │ │ ├── sidebars/ │ │ │ ├── Sidebar1/ │ │ │ │ ├── Sidebar1.jsx │ │ │ │ └── styles.css │ │ │ ├── Sidebar10/ │ │ │ │ ├── Sidebar10.css │ │ │ │ └── Sidebar10.jsx │ │ │ ├── Sidebar11/ │ │ │ │ ├── Sidebar11.css │ │ │ │ └── Sidebar11.jsx │ │ │ ├── Sidebar12/ │ │ │ │ ├── Sidebar12.css │ │ │ │ └── Sidebar12.jsx │ │ │ ├── Sidebar13/ │ │ │ │ ├── Sidebar13.css │ │ │ │ └── Sidebar13.jsx │ │ │ ├── Sidebar14/ │ │ │ │ ├── Sidebar14.jsx │ │ │ │ └── styles.css │ │ │ ├── Sidebar15/ │ │ │ │ ├── Sidebar15.css │ │ │ │ └── Sidebar15.jsx │ │ │ ├── Sidebar2/ │ │ │ │ ├── Sidebar2.jsx │ │ │ │ └── styles.css │ │ │ ├── Sidebar3/ │ │ │ │ ├── Sidebar3.jsx │ │ │ │ └── styles.css │ │ │ ├── Sidebar4/ │ │ │ │ ├── Sidebar4.css │ │ │ │ └── Sidebar4.jsx │ │ │ ├── Sidebar5/ │ │ │ │ ├── Sidebar5.css │ │ │ │ └── Sidebar5.jsx │ │ │ ├── Sidebar6/ │ │ │ │ ├── Sidebar6.css │ │ │ │ └── Sidebar6.jsx │ │ │ ├── Sidebar7/ │ │ │ │ ├── Sidebar7.jsx │ │ │ │ └── styles.css │ │ │ ├── Sidebar8/ │ │ │ │ ├── Sidebar8.css │ │ │ │ └── Sidebar8.jsx │ │ │ ├── Sidebar9/ │ │ │ │ ├── Sidebar9.css │ │ │ │ └── Sidebar9.jsx │ │ │ └── index.js │ │ ├── signups/ │ │ │ ├── Signup1/ │ │ │ │ ├── Signup1.css │ │ │ │ └── Signup1.jsx │ │ │ └── index.js │ │ ├── tables/ │ │ │ ├── Table1/ │ │ │ │ ├── Table1.css │ │ │ │ ├── Table1.jsx │ │ │ │ ├── Table1Example.css │ │ │ │ └── Table1Example.jsx │ │ │ ├── Table2/ │ │ │ │ ├── Table2.css │ │ │ │ ├── Table2.jsx │ │ │ │ ├── Table2Example.css │ │ │ │ └── Table2Example.jsx │ │ │ ├── Table3/ │ │ │ │ ├── Table3.css │ │ │ │ ├── Table3.jsx │ │ │ │ ├── Table3Example.css │ │ │ │ └── Table3Example.jsx │ │ │ └── index.js │ │ └── widgets/ │ │ ├── Widget1/ │ │ │ ├── Widget1.jsx │ │ │ └── styles.css │ │ ├── Widget2/ │ │ │ ├── Widget2.jsx │ │ │ └── styles.css │ │ └── index.js │ ├── index.css │ ├── main.jsx │ └── routes.jsx └── vite.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintrc.cjs ================================================ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', ], ignorePatterns: ['dist', '.eslintrc.cjs'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, settings: { react: { version: '18.2' } }, plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, } ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? ================================================ FILE: README.md ================================================ # React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ================================================ FILE: index.html ================================================ React Components
================================================ FILE: package.json ================================================ { "name": "react-components", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite --open", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@gsap/react": "^2.1.0", "framer-motion": "^11.0.18", "gsap": "^3.13.0", "rc-slider": "^10.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.6", "react-dropzone": "^14.3.5", "react-router-dom": "^6.22.3", "react-toastify": "^11.0.5", "react-xarrows": "^2.0.2", "swiper": "^11.1.4" }, "devDependencies": { "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.55.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "vite": "^5.0.8" } } ================================================ FILE: src/App.jsx ================================================ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { Layout } from "./Layout"; import { routes } from "./routes"; const router = createBrowserRouter([ { path: "/", element: , }, ...routes, ]); function App() { return ; } export default App; ================================================ FILE: src/Layout.css ================================================ .layout { background: #222129; color: #f5f3f9; margin: 0; height: 100vh; font-size: 16px; } .layout-table-wrapper { overflow: auto; position: relative; z-index: 2; max-height: 60vh; } .layout-header { position: relative; overflow: hidden; margin: 0 0 18px; } .layout-header .content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 240px; max-width: 1000px; margin: 0 auto; padding: 0 70px 60px; } .layout-header::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: 0; background: #5926fc; width: 500vw; aspect-ratio: 1/1; border-radius: 50%; } .layout-header button { font-family: inherit; background: rgb(0 0 0 / 16%); color: inherit; border: 0; border-radius: 8px; padding: 12px 18px 12px 20px; font-size: 13.5px; display: flex; align-items: center; gap: 4px; } .layout-header button span { font-size: 16px; translate: 0 -1px; } .layout-header h2 { font-size: 24px; font-weight: 400; display: flex; align-items: center; } .layout-header h2 i { margin-right: 8px; background: rgb(0 0 0 / 16%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; } .layout-card { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; background: #1a191e; border-radius: 8px; box-shadow: 0 30px 40px rgb(0 0 0 / 12%); padding: 10px 18px 18px; font-size: 12px; margin: -100px auto 30px; } @media (width < 706px) { .layout-table { margin: -100px 50px 30px; } } .layout-table { border-collapse: collapse; text-align: left; width: 100%; } .layout-table thead { position: sticky; top: 0; left: 0; z-index: 1; background: #1a191e; } .layout-table thead tr th:not(:last-child) { width: 120px; max-width: 120px; } .layout-table :is(th, td) { position: relative; overflow: hidden; white-space: nowrap; padding: 0 6px; height: 60px; font-size: 16px; } .layout-table th { font-weight: 500; user-select: none; text-transform: capitalize; color: #706d84; height: 56px; cursor: pointer; vertical-align: middle; transition: 0.3s; } .layout-table th i { font-size: 11px; translate: 0 -1px; margin-left: 6px; } .layout-table th:is(.active, :hover) { color: inherit; } .layout-table td { opacity: 0.65; transition: opacity 0.3s; } .layout-table td a { color: inherit; text-decoration: none; } .layout-table tbody tr:hover td { opacity: 1; } .layout-table tr { cursor: pointer; border-bottom: 1px solid #34323c; } .layout-table tbody tr:last-child { border: 0; } .layout-table tbody tr:nth-child(odd) { background: #1e1d25; } ================================================ FILE: src/Layout.jsx ================================================ import { Link, useNavigate } from "react-router-dom"; import { routes } from "./routes"; import "./Layout.css"; export const Layout = () => { const sortedRoutes = routes.sort((a, b) => { const regex = /^([a-zA-Z]+)(\d*)$/; const matchA = a.name.match(regex); const matchB = b.name.match(regex); const textA = matchA ? matchA[1] : a.name; const textB = matchB ? matchB[1] : b.name; const numA = matchA && matchA[2] ? parseInt(matchA[2], 10) : 0; const numB = matchB && matchB[2] ? parseInt(matchB[2], 10) : 0; const textCompare = textA.localeCompare(textB); if (textCompare !== 0) return textCompare; return numA - numB; }); const navigate = useNavigate(); return (

{/* */} React Components

{sortedRoutes.map((route) => ( navigate(route.path)} key={route.path}> ))}
Name
{route.name}
); }; ================================================ FILE: src/components/accordions/Accordion1/Accordion1.jsx ================================================ import { useState } from "react"; import "./styles.css"; export const Accordion1 = ({ items }) => { const [active, setActive] = useState(0); const handleToggle = (index) => setActive(index); return (
{items.map((item, index) => { const isActive = active === index ? "active" : ""; return (
handleToggle(index)} >
photo_camera

{item.header}

{item.text}

); })}
); }; ================================================ FILE: src/components/accordions/Accordion1/Accordion1Example.jsx ================================================ import { Accordion1 } from "./Accordion1"; import image1 from "./6.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; import image4 from "./4.jpg"; import image5 from "./5.jpg"; const coolImages = [ { header: "Canada", image: image1, text: `Image description`, }, { header: "New Zealand", image: image2, text: `Image description`, }, { header: "Indonesia", image: image3, text: `Image description`, }, { header: "South Africa", image: image2, text: `Image description`, }, { header: "Spain", image: image5, text: `Image description`, }, ]; export const Accordion1Example = () => ; ================================================ FILE: src/components/accordions/Accordion1/styles.css ================================================ .page.image-accordion-page { background: #141415; } .page.image-accordion-page .bg { background-size: cover; position: fixed; width: 100vh; min-width: 100vh; max-width: 100vh; height: 100vh; min-height: 100vh; max-height: 100vh; top: 0; left: 0; filter: grayscale(5); transition: background 0.5s; } .page.image-accordion-page .bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 80%); backdrop-filter: blur(16px); } .image-accordion-item { position: relative; overflow: hidden; background: #ffffff; width: 64px; height: 500px; border-radius: 36px; display: flex; align-items: flex-end; opacity: 0.25; cursor: pointer; transition: 0.5s; } .image-accordion-item:hover { opacity: 0.5; } h2, p { margin: 0; } .image-accordion { display: flex; gap: 12px; } .image-accordion-item { cursor: pointer; } .image-accordion-item h2 { font-size: 24px; font-weight: 400; color: rgb(255 255 255 / 96%); } .image-accordion-item p { color: rgb(255 255 255 / 66%); } .image-accordion-item.active { width: 400px; opacity: 1; } .image-accordion-item .material-symbols-outlined { display: grid; place-items: center; width: 50px; height: 50px; background: rgb(255 255 255 / 20%); border-radius: 50%; font-size: 28px; } .image-accordion-item .content { position: absolute; bottom: 0; left: 0; width: 400px; z-index: 1; opacity: 0; visibility: hidden; padding: 100px 0 20px 20px; display: flex; align-items: center; gap: 14px; background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%)); transition: 0.25s; } .image-accordion-item.active .content { opacity: 1; visibility: visible; } .image-accordion-item img { position: absolute; z-index: 0; top: 50%; left: 50%; translate: -50% -50%; height: 150%; filter: grayscale(0.5); } ================================================ FILE: src/components/accordions/Accordion2/Accordion2.css ================================================ .accordion-2 { list-style: none; margin: 0; padding: 0; } .accordion-2-item h2 { display: flex; align-items: center; height: 48px; padding: 0 10px 0 20px; border-radius: 8px; cursor: pointer; background: #2d2f3c; margin: 0 0 10px; color: #f8f8f8; font-size: 16px; font-weight: 400; transition: 0.3s; opacity: 0.7; } .accordion-2-item h2:hover { background: #303341; opacity: 1; } .accordion-2-item h2.active { background: #3472ff; opacity: 1; } .accordion-2-item h2.active > span:last-child { rotate: -180deg; } .accordion-2-item p { padding: 0 20px 10px; line-height: 1.7; font-size: 14px; margin: 0; opacity: 0.65; cursor: pointer; } .accordion-2-item > h2 > span { transition: 0.3s; } .accordion-2-content { position: relative; height: 0; overflow: hidden; transition: height 0.5s ease; } ================================================ FILE: src/components/accordions/Accordion2/Accordion2.jsx ================================================ import { useRef, useState } from "react"; import "./Accordion2.css"; const AccordionItem = (props) => { const contentEl = useRef(null); const { handleToggle, active, item, index } = props; const { header, content } = item; return (
  • handleToggle(index)} > {header} expand_more

    {content}

  • ); }; export const Accordion2 = ({ items }) => { const [active, setActive] = useState(null); const handleToggle = (index) => setActive(active === index ? null : index); return (
      {items.map((item, index) => { return ( ); })}
    ); }; ================================================ FILE: src/components/accordions/Accordion2/Accordion2Example.css ================================================ .page.accordion-2-page { display: grid; place-items: center; height: 100vh; color: #ffffff; background: #141316; font-family: "Euclid Circular B", "Poppins"; } .accordion-2-card { background: #22252f; width: 400px; padding: 24px; border-radius: 12px; cursor: pointer; } .accordion-2-header { display: flex; align-items: center; gap: 8px; margin-right: auto; } .accordion-2-header > span { font-size: 20px; } ================================================ FILE: src/components/accordions/Accordion2/Accordion2Example.jsx ================================================ import { Accordion2 } from "./Accordion2"; import "./Accordion2Example.css"; const faqs = [ { header: (
    mail Delivery
    ), content: `We process and ship all orders within 1–2 business days. Standard delivery takes 3–7 business days. Express shipping is available. Tracking information will be emailed to you once your order has been dispatched.`, }, { header: (
    credit_card Returns & Refunds
    ), content: `Returns are accepted within 30 days for unworn, unwashed items with original tags. Use our Returns Portal to begin. Refunds are issued within 5–10 business days after we receive and inspect the returned item.`, }, { header: (
    warning Order Issues
    ), content: `If your order is incorrect, missing items, or arrived damaged, contact our support team within 7 days. Include your order number and any photos so we can resolve the issue as quickly as possible.`, }, { header: (
    package_2 Products & Stock
    ), content: `We restock popular products regularly. If something is sold out, use the “Notify Me” feature for updates. Each product page includes a size guide to help you choose the best possible fit.`, }, ]; export const Accordion2Example = () => (
    ); ================================================ FILE: src/components/accordions/Accordion3/Accordion3.css ================================================ .page.accordion-3-page { background: #141415; } .page.accordion-3-page .bg { background-size: cover; position: fixed; width: 100vh; min-width: 100vh; max-width: 100vh; height: 100vh; min-height: 100vh; max-height: 100vh; top: 0; left: 0; filter: grayscale(5); transition: background 0.5s; } .page.accordion-3-page .bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 80%); backdrop-filter: blur(16px); } .accordion-3-item:hover { opacity: 0.5; } .accordion-3 :is(h2, p) { margin: 0; } .accordion-3 { display: flex; gap: 12px; } .accordion-3-item { position: relative; overflow: hidden; background: #ffffff; width: 64px; height: 500px; border-radius: 36px; display: flex; align-items: flex-end; opacity: 0.25; cursor: pointer; transition: 0.5s; } .accordion-3-item h2 { font-size: 24px; font-weight: 400; color: rgb(255 255 255 / 96%); } .accordion-3-item p { color: rgb(255 255 255 / 66%); } .accordion-3-item.active { width: 400px; opacity: 1; } .accordion-3-item .material-symbols-outlined.icon { display: grid; place-items: center; width: 50px; height: 50px; background: rgb(255 255 255 / 20%); border-radius: 50%; font-size: 28px; } .accordion-3-item .content { position: absolute; bottom: 0; left: 0; width: 400px; z-index: 1; opacity: 0; visibility: hidden; padding: 100px 0 20px 20px; display: flex; align-items: center; gap: 14px; background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 80%)); transition: 0.25s; } .accordion-3-item.active .content { opacity: 1; visibility: visible; } .accordion-3-item img { position: absolute; z-index: 0; top: 50%; left: 50%; translate: -50% -50%; height: 150%; filter: grayscale(0.5); } ================================================ FILE: src/components/accordions/Accordion3/Accordion3.jsx ================================================ import { useState } from "react"; import "./Accordion3.css"; export const Accordion3 = ({ items }) => { const [active, setActive] = useState(0); const handleToggle = (index) => setActive(index); return (
    {items.map((item, index) => { const isActive = active === index ? "active" : ""; return (
    handleToggle(index)} >
    photo_camera

    {item.header}

    {item.text}

    ); })}
    ); }; ================================================ FILE: src/components/accordions/Accordion3/Accordion3Example.jsx ================================================ import { Accordion3 } from "./Accordion3"; import image1 from "./6.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; import image4 from "./4.jpg"; import image5 from "./5.jpg"; const coolImages = [ { header: "Canada", image: image4, text: `Image description`, }, { header: "New Zealand", image: image1, text: `Image description`, }, { header: "Indonesia", image: image3, text: `Image description`, }, { header: "South Africa", image: image2, text: `Image description`, }, { header: "Spain", image: image5, text: `Image description`, }, ]; export const Accordion3Example = () => ; ================================================ FILE: src/components/accordions/index.js ================================================ export * from "./Accordion1/Accordion1"; export * from "./Accordion1/Accordion1Example"; export * from "./Accordion2/Accordion2Example"; export * from "./Accordion3/Accordion3Example"; ================================================ FILE: src/components/buttons/DeleteButton/DeleteButton.jsx ================================================ import { useState } from "react"; import "./styles.css"; export const DeleteButton = () => { const [isDeleting, setIsDeleting] = useState(false); const [isDeleted, setIsDeleted] = useState(false); const handleClick = () => { setIsDeleting(true); // do something async setTimeout(() => { setIsDeleting(false); setIsDeleted(true); setTimeout(() => { setIsDeleted(false); }, 1250); }, 2500); }; return (
    ); }; ================================================ FILE: src/components/buttons/DeleteButton/styles.css ================================================ .page.delete-button-page { background: #141414; } .delete-button { display: flex; align-items: center; justify-content: center; border-radius: 18px; border: 0; background: #fc3b51; font-size: 24px; font-weight: 400; font-family: "Euclid Circular A"; color: #f9f9f9; padding: 0 10px 0 32px; height: 74px; text-align: left; cursor: pointer; outline: none; transition: 0.3s; } .delete-button .button-text { display: block; text-align: center; min-width: 94px; } .delete-button .animation { position: relative; overflow: hidden; display: grid; place-items: center; width: 64px; height: 74px; flex: 0 0 64px; min-width: 0; } .delete-button .can { overflow: hidden; position: relative; translate: 0 2px; width: 20px; height: 22px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 2px solid #ffffff; border-top: 0; } @keyframes lid-open { 0% { rotate: 0; } 15%, 90% { rotate: -75deg; translate: -70% -20%; width: 20px; } } .delete-button .lid { position: absolute; top: 24px; left: 50%; translate: -50% 0; transform-origin: 0% 0%; width: 24px; height: 2px; background: #ffffff; } @keyframes balls-drop { 0%, 20% { translate: -50% 0; } 40% { scale: 1 1; } 40%, 100% { translate: -50% 72px; } 50%, 100% { scale: 2.1 1; } } .delete-button .balls { position: absolute; top: -32px; left: 50%; translate: -50% 0; width: 9px; height: 9px; border-radius: 50%; background: #ffffff; } @keyframes fill { 0%, 20% { translate: 0 0; } 50%, 70% { translate: 0 -50%; } 90%, 100% { translate: 0 -100%; } } .delete-button .filler { position: absolute; top: 100%; left: 50%; margin-left: -32px; width: 64px; height: 120%; background: #ffffff; } .delete-button:disabled { cursor: not-allowed; } .delete-button.deleting .balls { animation: balls-drop 2 linear 1.25s; } .delete-button.deleting .filler { animation: fill 2.5s both; } .delete-button.deleting .lid { animation: lid-open 2.5s both; } ================================================ FILE: src/components/buttons/FabButton/FabButton.css ================================================ .page.fab-button-page { background: #16151b; } .fab { position: fixed; right: 30px; bottom: 38px; border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .fab button { cursor: pointer; border: 0; background: transparent; } .fab > button { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #e952de; border: 0; color: #f9f9f9; transition: 0.2s; rotate: 0deg; } .fab > button > span { font-size: 36px; } .fab-menu { position: absolute; z-index: 0; top: 50%; left: 50%; width: 360px; height: 360px; translate: -50% -50%; border: 80px solid #282633; border-radius: 50%; rotate: -220deg; scale: 0.7; opacity: 0; transition: 0.4s ease-out; } .fab.open > button { rotate: 45deg; } .fab.open .fab-menu { rotate: 0deg; scale: 1; opacity: 1; } .fab-menu > button { position: absolute; color: #e0e0e0; transition: 0.4s; } .fab-menu > button:hover { scale: 1.2; color: #f9f9f9; } .fab .material-symbols-outlined { font-size: 36px; } .fab-menu > button:nth-child(1) { left: 78px; top: -58px; } .fab-menu > button:nth-child(2) { left: -16px; top: -16px; } .fab-menu > button:nth-child(3) { left: -58px; top: 78px; } ================================================ FILE: src/components/buttons/FabButton/FabButton.jsx ================================================ import { useState } from "react"; import "./FabButton.css"; const Icon = ({ children }) => ( {children} ); export const FabButton = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/buttons/TrashButton/TrashButton.css ================================================ .page.trash-button-page { background: #141414; } .trash-button { --color-icon: #f9f9f9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 0; background: #fc3b51; font-size: 22px; font-weight: 400; font-family: "Euclid Circular B"; color: var(--color-icon); padding: 0 0 0 20px; opacity: 0.85; width: 160px; height: 64px; text-align: left; cursor: pointer; transition: 0.3s; } @keyframes loader-move { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .trash-button .loader { position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background: rgb(0 0 0 / 24%); opacity: 0; transition: 0.3s; } .trash-button.deleting .loader { opacity: 1; } .trash-button .loader::after { content: ""; position: inherit; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0% 50%; background: #f9f9f9; } .trash-button.deleting .loader::after { animation: loader-move 1.5s linear both; } .trash-button:hover { opacity: 1; } .trash-button .button-text { flex: 0 0 66px; width: 66px; } .trash-button .animation { position: relative; overflow: hidden; display: grid; place-items: center; width: 64px; height: 64px; scale: 1; } .trash-button .can { overflow: hidden; position: relative; translate: 0 3px; width: 20px; height: 22px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 2px solid var(--color-icon); } .trash-button .lid { position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 22px; height: 2px; background: var(--color-icon); } @keyframes move { 75%, 100% { translate: 0 88px; } } .trash-button :is(.paper-wrapper, .shredded-wrapper) { overflow: hidden; position: absolute; display: flex; top: -20px; } .trash-button .paper-wrapper { height: 40px; } .trash-button .shredded-wrapper { top: 24px; height: 20px; } .trash-button :is(.paper, .shredded) { height: 18px; } .trash-button .shredded { margin-top: -40px; } @keyframes fill { 0%, 20% { translate: 0 0; } 40%, 70% { translate: 0 -50%; } 90%, 100% { translate: 0 -100%; } } .trash-button .filler { position: absolute; top: 100%; left: 50%; margin-left: -32px; width: 64px; height: 120%; background: var(--color-icon); } .trash-button:disabled { cursor: not-allowed; } .trash-button.deleting :is(.paper, .shredded) { animation: move 1s linear 2 both; } .trash-button.deleting .filler { animation: fill 2s both; } ================================================ FILE: src/components/buttons/TrashButton/TrashButton.jsx ================================================ import { useState } from "react"; import "./TrashButton.css"; import paper from "./paper.svg"; import shredded from "./shredded.svg"; export const TrashButton = () => { const [isDeleting, setIsDeleting] = useState(false); const handleClick = () => { setIsDeleting(true); // do something async setTimeout(() => { setIsDeleting(false); }, 2500); }; return (
    ); }; ================================================ FILE: src/components/buttons/index.js ================================================ export * from "./DeleteButton/DeleteButton"; export * from "./TrashButton/TrashButton"; export * from "./FabButton/FabButton"; ================================================ FILE: src/components/cards/Card1/Card1.jsx ================================================ import "./styles.css"; const cards = [ { name: "summary", total: 21, description: "Due Tasks", footer: "Completed: 13", more: "More Information", }, { name: "overdue", total: 17, description: "Projects", footer: "Yesterday: 9", more: "More Information", }, { name: "features", total: 38, description: "Proposals", footer: "Implemented: 6", more: "More Information", }, ]; export const Card1 = () => { return (
    {cards.map((card) => ( ))}
    ); }; ================================================ FILE: src/components/cards/Card1/styles.css ================================================ .page.card-1-page { margin: 0; height: 100vh; display: grid; place-items: center; color: #f7f7f7; background: #121212; font-family: "Euclid Circular A", "Poppins"; } .card-1-page h2, .card-1-page h3, .card-1-page h4 { margin: 0; font-weight: 500; } .card-1-page .cards { display: flex; gap: 30px; } .card-1-page .card { position: relative; perspective: 1000px; width: 300px; height: 300px; } .card-1-page .card header { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 26px; } .card-1-page .card header h2 { font-size: 20px; text-transform: capitalize; } .card-1-page .card .front, .card-1-page .card .back { position: absolute; top: 0; left: 0; right: 0; bottom: 0; backface-visibility: hidden; background: #1e1e1e; border-radius: 10px; padding: 36px 36px 44px 44px; transition: 0.6s; cursor: pointer; } .card-1-page .back { transform: rotateY(180deg); } .card-1-page input { position: absolute; scale: 0; } .card-1-page input:checked ~ .card .back { transform: rotateY(0); } .card-1-page input:checked ~ .card .front { transform: rotateY(-180deg); } .card-1-page .card var { font-style: normal; font-size: 80px; line-height: 1; } .card-1-page .card h3 { margin: 0 0 30px; font-weight: 500; } .card-1-page #summary :is(var, h3) { color: #3b82f6; } .card-1-page #overdue :is(var, h3) { color: #e56363; } .card-1-page #features :is(var, h3) { color: #25b697; } .card-1-page .card :is(h4, p) { opacity: 0.6; font-size: 20px; } .card-1-page .card p { margin-top: 76px; } ================================================ FILE: src/components/cards/Card2/Card2.css ================================================ .page.card-2-example-page { display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; background: linear-gradient(45deg, #0cd2d1, #0857c0); color: #fdfcfd; font-family: "Euclid Circular A", "Poppins"; } .card-2 { display: flex; align-items: center; width: 75vw; max-width: 650px; padding: 50px 30px 50px 20px; background: #121017; border-radius: 24px; box-shadow: 0 80px 60px rgb(0 0 0 / 12%); } .card-2 img { max-width: 280px; width: 32vw; height: 300px; object-fit: cover; margin-left: -60px; margin-right: 30px; border-radius: inherit; box-shadow: 0 60px 40px rgb(0 0 0 / 12%); transition: border-radius 0.3s; } .card-2 h2 { font-size: 26px; font-weight: 400; margin-top: 0; margin-right: 30px; margin-bottom: 6px; } .card-2 h3 { font-size: 16px; font-weight: 400; margin: 0 0 12px; opacity: 0.66; } .card-2 p { font-size: 14px; font-weight: 400; margin-bottom: 30px; opacity: 0.42; } .card-2 .buttons { display: flex; gap: 12px; } .card-2 button { border: 1px solid #f8f8f8; background: transparent; color: #f8f8f8; width: 40%; min-width: 100px; text-align: center; font-family: inherit; padding: 12px 26px; font-size: 16px; border-radius: 40px; } .card-2 button.primary { background: #ffffff; color: #121017; } @media (width <= 600px) { .card-2 { margin: 0 40px; padding-left: 50px; padding-right: 50px; padding-bottom: 60px; width: 100%; text-align: center; flex-direction: column; } .card-2 .buttons { justify-content: center; } .card-2 .buttons button { width: 50%; } .card-2 h2 { margin-right: 0; font-size: 26px; } .card-2 img { margin: -100px 0 30px 0; width: 100%; max-width: 1000px; height: 250px; } .card-2 p { max-width: 400px; } } @media (width <= 420px) { .card-2 img { height: 50vw; width: 50vw; border-radius: 50%; margin: -140px 0 30px 0; } } ================================================ FILE: src/components/cards/Card2/Card2.jsx ================================================ import "./Card2.css"; export const Card2 = ({ image, title, subtitle, description, onProfile, onFollow, }) => (

    {title}

    {subtitle}

    {description}

    ); ================================================ FILE: src/components/cards/Card2/Card2Example.jsx ================================================ import { Card2 } from "./Card2"; import image from "./image.jpg"; export const Card2Example = () => { const handleProfile = () => { // goto profile }; const handleFollow = () => { // follow account }; return (
    ); }; ================================================ FILE: src/components/cards/Card3/Card3.css ================================================ .card-3 { --color-primary: #356aff; --color-muted: #9895a2; --color-highlight: #242328; --border: 1px solid #2f2e32; position: relative; border-radius: 24px; width: clamp(200px, 80vw, 500px); padding-top: 30px; background: #1c1b20; } .card-3 > img { position: absolute; top: 0; left: 50%; translate: -50% -50%; width: 92px; aspect-ratio: 1/1; border-radius: 50%; background: var(--color-highlight); padding: 20px; box-shadow: 0 20px 150px rgb(0 0 0 / 8%); } .card-3 .main { padding: 24px 24px 0; display: flex; flex-direction: column; justify-content: center; text-align: center; } .card-3 :is(h2, h3, h4, h5) { font-weight: 400; margin: 0; } .card-3 em { font-style: normal; color: var(--color-primary); } .card-3 h2 { font-weight: 600; font-size: 20px; margin-top: 18px; margin-bottom: 18px; } .card-3 h3 { font-weight: 300; font-size: clamp(16px, 4vw, 20px); color: var(--color-muted); } .card-3 h4 { font-weight: 500; font-size: clamp(22px, 5.5vw, 26px); margin-bottom: 6px; } .card-3 h5 { color: var(--color-muted); font-size: clamp(14px, 4vw, 16px); margin-bottom: 40px; } .card-3 .details { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; margin-bottom: 20px; font-size: clamp(14px, 4vw, 16px); } .card-3 .salary em { color: var(--color-muted); } .card-3 .date { color: var(--color-muted); } .card-3 .footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 24px; border-top: var(--border); } .card-3 .footer button { background: transparent; border: var(--border); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: inherit; } .card-3 .footer button span { font-size: 22px; } .card-3 .badge { display: inline-flex; margin-right: auto; align-items: center; gap: 12px; padding-right: 20px; font-size: 14px; border-radius: 50px; background: var(--color-highlight); } .card-3 .badge .text { display: none; } .card-3 .badge img { width: 40px; } .card-3 .badge p { color: var(--color-muted); } @media (width >= 430px) { .card-3 { padding-top: 0; } .card-3 > img { position: absolute; top: 20px; right: 20px; left: auto; translate: 0; width: clamp(68px, 12vw, 80px); padding: 16px; border-color: transparent; box-shadow: none; } .card-3 .main { text-align: left; } .card-3 .badge .text { display: inline; } .card-3 h5 { margin-bottom: 28px; } } ================================================ FILE: src/components/cards/Card3/Card3.jsx ================================================ import logo from "./logo.svg"; import avatar from "./avatar.png"; import "./Card3.css"; export const Card3 = ({ company, level, role, location, isRemote, salary, when, profileMatch, onShare, onSave, }) => (

    {company}

    {level}

    {role}

    {location} {isRemote && (Remote)}
    {" "} {salary} /month{" "} {when}
    ); ================================================ FILE: src/components/cards/Card3/Card3Example.css ================================================ .page.card-3-page { background: #111116; color: #ffffff; height: 100vh; margin: 0; display: grid; place-items: center; font-family: "Euclid Circular B", "Poppins"; } ================================================ FILE: src/components/cards/Card3/Card3Example.jsx ================================================ import { Card3 } from "./Card3"; import "./Card3Example.css"; export const Card3Example = () => { const onShare = () => console.log("share"); const onSave = () => console.log("share"); return (
    ); }; ================================================ FILE: src/components/cards/Card4/Card4.css ================================================ .card-4 { display: flex; align-items: center; width: 75vw; max-width: 650px; padding: 24px 30px 24px 20px; background: rgba(0, 0, 0, 20%); backdrop-filter: blur(30px); border-radius: 24px; } .card-4 img { max-width: 280px; width: 36vw; height: 340px; object-fit: cover; margin-left: -60px; margin-right: 30px; border-radius: inherit; box-shadow: 0 20px 40px rgb(0 0 0 / 16%); transition: border-radius 0.3s; } .card-4 h2 { font-size: 24px; font-weight: 400; margin-top: 0; margin-right: 30px; margin-bottom: 10px; } .card-4 h3 { font-size: 16px; font-weight: 400; margin: 0 0 10px; opacity: 0.75; } .card-4 p { font-size: 14px; font-weight: 400; margin-bottom: 30px; opacity: 0.5; } .card-4-socials { display: flex; align-items: center; gap: 18px; } .card-4-socials > button { position: relative; border: 0; background: transparent; color: #f8f8f8; padding: 0; } .card-4-socials > button > i { position: relative; z-index: 1; display: grid; place-items: center; font-size: 24px; height: 50px; } @media (width <= 600px) { .card-4 { margin: 0 40px; padding-left: 50px; padding-right: 50px; padding-bottom: 60px; width: 100%; text-align: center; flex-direction: column; } .card-4 h2 { margin-right: 0; font-size: 26px; } .card-4 img { margin: -100px 0 30px 0; width: 100%; max-width: 1000px; height: 250px; } .card-4 p { max-width: 360px; } .card-4-socials { justify-content: center; } } @media (width <= 440px) { .card-4 img { height: 50vw; width: 50vw; border-radius: 50%; border: 12px solid var(--card); box-shadow: none; margin: -140px 0 30px 0; } } ================================================ FILE: src/components/cards/Card4/Card4.jsx ================================================ import image from "./image.jpg"; import "./Card4.css"; export const Card4 = ({ name, role, bio, socials, onSocialClick }) => (

    {name}

    {role}

    {bio}

    {socials.map((social) => ( ))}
    ); ================================================ FILE: src/components/cards/Card4/Card4Example.css ================================================ .page.card-4-page { display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; background: linear-gradient(45deg, #3727a9, #4a1c40); color: #fdfcfd; font-family: "Euclid Circular A", "Poppins"; } ================================================ FILE: src/components/cards/Card4/Card4Example.jsx ================================================ import { Card4 } from "./Card4"; import "./Card4Example.css"; export const Card4Example = () => { const handleSocialClick = (type) => { console.log("handleSocialClick", type); }; const socials = ["facebook", "discord", "pinterest", "dribbble"]; return (
    ); }; ================================================ FILE: src/components/cards/Card5/Card5.css ================================================ .card-5 { background: #ffffff; border-radius: 28px; padding: 24px; width: 400px; box-shadow: 0 40px 80px rgba(128, 87, 216, 0.1); } .card-5 label { color: #a39fb2; font-size: 15px; } .card-5-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-5-header h2 { font-weight: 500; color: #4f4664; } .card-5-chart { display: flex; height: 220px; } .card-5-chart-y-axis { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding-bottom: 32px; } .card-5-chart-y-axis label { height: 25%; display: flex; align-items: flex-end; translate: 0 6px; } .card-5-chart-bars { display: flex; flex: 1 1 auto; margin: 0 0 0 12px; opacity: 0.8; background-size: 1px 52px; background-position: -32px; background-image: repeating-linear-gradient( 0deg, #ebecfa, #ebecfa 1px, #fff 1px, #fff ); } .card-5-chart-bar-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 33.33%; } .card-5-chart-bar-wrapper label { height: 32px; display: flex; align-items: flex-end; } .card-5-chart-bar { position: relative; background: linear-gradient(rgb(199 194 253 / 100%), rgb(199 194 253 / 4%)); height: 60px; width: 40px; border-radius: 20px; cursor: pointer; transition: 0.5s ease-in-out; } .card-5-chart-bar::after { content: ""; position: absolute; inset: 0; background: #c7c2fd; border-radius: inherit; transition: 0.3s; opacity: 0; } .card-5-chart-bar:hover::after { opacity: 1; } .card-5-chart-tooltip { opacity: 0; position: absolute; left: calc(50% + 24px); bottom: 89px; transition: 0.3s; } .card-5-chart-tooltip::after, .card-5-chart-tooltip::before { content: ""; position: absolute; background: #8a54ff; } .card-5-chart-tooltip::before { right: 0; bottom: -6px; width: 63px; height: 2px; } .card-5-chart-tooltip::after { right: 63px; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; } .card-5-chart-tooltip h3 { font-size: 12px; font-weight: 500; } .card-5-chart-tooltip var { font-style: normal; font-size: 11px; white-space: nowrap; color: #8f8b9c; } .card-5-chart-bar:hover ~ .card-5-chart-tooltip { opacity: 1; } ================================================ FILE: src/components/cards/Card5/Card5.jsx ================================================ import { useState } from "react"; import "./Card5.css"; import { Dropdown } from "./Dropdown"; const days = ["today", "yesterday"]; const yValues = [300, 200, 100, 0]; const data = [ { name: "today", values: [ { name: "Protein", value: 180, energy: 420, }, { name: "Fat", value: 260, energy: 560, }, { name: "Carbs", value: 200, energy: 490, }, ], }, { name: "yesterday", values: [ { name: "Protein", value: 250, energy: 503, }, { name: "Fat", value: 150, energy: 450, }, { name: "Carbs", value: 240, energy: 652, }, ], }, ]; export const Card5 = ({ title }) => { const [day, setDay] = useState("today"); const activeData = data.find((d) => d.name === day); const handleDayChanged = (nextDay) => setDay(nextDay); return (

    {title}

    {yValues.map((v) => ( ))}
    {activeData.values.map((v) => (

    Energy

    {v.energy} kcal
    ))}
    ); }; ================================================ FILE: src/components/cards/Card5/Card5Example.css ================================================ .page.card-5-page { background: linear-gradient(135deg, #dfd0ff, #ffffff); color: #1f1b29; } ================================================ FILE: src/components/cards/Card5/Card5Example.jsx ================================================ import { Card5 } from "./Card5"; import "./Card5Example.css"; export const Card5Example = () => (
    ); ================================================ FILE: src/components/cards/Card5/Dropdown.css ================================================ .card-5-dropdown { position: relative; } .card-5-dropdown button { cursor: pointer; font-family: inherit; padding: 8px 12px; text-transform: capitalize; background: transparent; border: 0; } .card-5-dropdown > button { display: flex; gap: 8px; background: #eeeef5; color: #736a88; border-radius: 9px; opacity: 0.8; padding-left: 12px; padding-right: 8px; transition: 0.3s; } .card-5-dropdown > button:hover { opacity: 1; } .card-5-menu { position: absolute; overflow: hidden; z-index: 10; top: 40px; right: 0; width: max-content; background: #fff; box-shadow: 0 0 40px rgba(128, 87, 216, 0.2); border-radius: 7px; opacity: 0; visibility: hidden; display: grid; transition: 0.3s; } .card-5-menu > button { text-align: left; opacity: 0.7; transition: 0.3s; color: #645a79; } .card-5-menu > button.active { color: #8a54ff; opacity: 1; cursor: default; } .card-5-menu > button:hover { background: #fbf9ff; opacity: 1; } .card-5-menu.open { opacity: 1; visibility: visible; } ================================================ FILE: src/components/cards/Card5/Dropdown.jsx ================================================ import { useState } from "react"; import "./Dropdown.css"; export const Dropdown = ({ items, selectedItem, onSelect }) => { const [isOpen, setIsOpen] = useState(false); const handleSelect = (item) => { setIsOpen(false); onSelect(item); }; return (
    {items.map((item) => ( ))}
    ); }; ================================================ FILE: src/components/cards/Card6/Card6.css ================================================ .card-6 { --color-muted: rgb(255 255 255 / 50%); position: relative; background: rgb(0 0 0 / 25%); border-radius: 24px; width: 85%; max-width: 580px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 40px 60px rgba(58, 71, 72, 0.16); } .card-6-hero { position: relative; display: grid; place-items: center; border-radius: 22px; padding: 48px 24px; background: linear-gradient(#712ff6, #8d10f9); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .card-6-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 24px 28px; text-align: center; } .card-6 img { height: 13.5vw; min-height: 72px; max-height: 84px; border-radius: 50%; box-shadow: 0 20px 80px rgb(0 0 0 / 56%); border: 2px solid rgb(255 255 255 / 16%); padding: 2px; } .card-6 var { font-style: normal; } .card-6 ul { list-style: none; display: flex; gap: 8px; } .card-6 .tags { margin-bottom: 16px; } .card-6 .tags li { background: rgb(255 255 255 / 12%); font-size: 12px; height: 28px; color: var(--color-muted); padding: 6px 8px; border-radius: 32px; } .card-6 .stats { gap: 0; margin-bottom: 16px; width: 90%; } .card-6 .stats li { width: 33.33%; display: flex; flex-direction: column; font-size: clamp(18px, 4vw, 24px); min-width: 0; } .card-6 .stats label { color: var(--color-muted); font-size: 13px; } .card-6 :is(h2, h3, h4) { font-weight: 400; } .card-6 h2 { margin-bottom: 3px; } .card-6 h3 { margin: 0 0 12px; color: var(--color-muted); font-size: 16px; } .card-6 button { color: inherit; font-family: inherit; border-radius: 28px; } .card-6 .actions { display: flex; gap: 8px; width: 100%; } .card-6 .contact-btn, .card-6 .save-btn { height: 48px; box-shadow: 0 10px 80px rgb(0 0 0 / 12%); background: rgb(255 255 255 / 5%); border: 0; backdrop-filter: blur(20px); } .card-6 .contact-btn { flex: 1 1 auto; font-size: 16px; background: #f9f9f9; color: #1f1e21; } .card-6 .save-btn { width: 48px; height: 48px; } .card-6 .share-btn { background: transparent; border: 0; position: absolute; top: 24px; right: 24px; z-index: 1; display: grid; place-items: center; } .card-6 .share-btn i { font-size: 18px; } .card-6 i { font-size: 18px; } @media (width >= 400px) { .card-6 { padding: 5px; } .card-6-content { align-items: flex-start; text-align: left; padding: 24px; } .card-6-hero { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; } .card-6 .stats { width: auto; gap: 6vw; } } @media (width >= 520px) { .card-6 { min-height: 300px; flex-direction: row; } .card-6-hero { flex: 1 1 45%; min-width: 45%; } .card-6 .tags { margin-bottom: 0; } .card-6-content { flex: 1 1 55%; max-width: 55%; display: flex; flex-direction: column; justify-content: center; gap: 32px; } .card-6 .stats { gap: 3vw; height: 60px; align-items: center; } .card-6 .actions { margin-top: auto; } } ================================================ FILE: src/components/cards/Card6/Card6.jsx ================================================ import "./Card6.css"; export const Card6 = ({ name, role, tags, img, stats }) => { return (

    {name}

    {role}

      {tags.map((tag) => (
    • {tag}
    • ))}
      {stats.map((stat, index) => (
    • {stat}
    • ))}
    ); }; ================================================ FILE: src/components/cards/Card6/Card6Example.css ================================================ .page.card-6-page { background: #2b2a2f; color: #f9f9f9; } .card-6-rating { } ================================================ FILE: src/components/cards/Card6/Card6Example.jsx ================================================ import { Card6 } from "./Card6"; import "./Card6Example.css"; import avatar from "./avatar.png"; const tags = ["Figma", "UX Design"]; const Rating = () => 4.58; const stats = [ <> , <> $15k , <> 32h , ]; export const Card6Example = () => (
    ); ================================================ FILE: src/components/cards/Card7/Card7.css ================================================ .card-7 { --card: #272524; display: flex; align-items: center; width: 75vw; max-width: 650px; padding: 44px 30px 44px 20px; background: var(--card); border-radius: 24px; } .card-7 img { max-width: 280px; width: 36vw; height: 300px; object-fit: cover; margin-left: -60px; margin-right: 30px; border-radius: inherit; box-shadow: 0 60px 40px rgb(0 0 0 / 8%); transition: border-radius 0.3s; } .card-7 h2 { font-size: 22px; font-weight: 400; margin-top: 0; margin-right: 30px; margin-bottom: 10px; } .card-7 h3 { font-size: 14px; font-weight: 400; margin: 0 0 12px; opacity: 0.75; } .card-7 p { font-size: 13px; font-weight: 400; margin-bottom: 30px; opacity: 0.5; } .card-7 .socials { display: flex; align-items: center; gap: 8px; } .card-7 .socials > button { position: relative; border: 0; background: transparent; color: #f8f8f8; padding: 0; } .card-7 .socials > button:first-child::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(45deg, #ff7c7d, #ffda67); transition: 0.3s; transform: translateY(0); } .card-7 .socials > button > i { position: relative; z-index: 1; border: 4px solid var(--card); background: #3f3b39; display: grid; place-items: center; font-size: 24px; width: 50px; height: 50px; border-radius: 40px; } @media (width <= 600px) { .card-7 { margin: 0 40px; padding-left: 50px; padding-right: 50px; padding-bottom: 60px; width: 100%; text-align: center; flex-direction: column; } .card-7 h2 { margin-right: 0; font-size: 26px; } .card-7 img { margin: -100px 0 30px 0; width: 100%; max-width: 1000px; height: 250px; } .card-7 p { max-width: 360px; } .card-7 .socials { justify-content: center; } } @media (width <= 440px) { .card-7 img { height: 50vw; width: 50vw; border-radius: 50%; border: 12px solid var(--card); box-shadow: none; margin: -140px 0 30px 0; } } ================================================ FILE: src/components/cards/Card7/Card7.jsx ================================================ import "./Card7.css"; export const Card7 = ({ name, image, role, bio, socials }) => { return (

    {name}

    {role}

    {bio}

    {socials.map((social) => ( ))}
    ); }; ================================================ FILE: src/components/cards/Card7/Card7Example.css ================================================ .page.card-7-page { display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; background: linear-gradient(45deg, #ff7c7d, #ffda67); color: #fdfcfd; font-family: "Euclid Circular A", "Poppins"; } ================================================ FILE: src/components/cards/Card7/Card7Example.jsx ================================================ import { Card7 } from "./Card7"; import image from "./image.jpg"; import "./Card7Example.css"; const socials = ["dribbble", "pinterest", "codepen"]; export const Card7Example = () => (
    ); ================================================ FILE: src/components/cards/index.js ================================================ export * from "./Card1/Card1"; export * from "./Card2/Card2Example"; export * from "./Card3/Card3Example"; export * from "./Card4/Card4Example"; export * from "./Card5/Card5Example"; export * from "./Card6/Card6Example"; export * from "./Card7/Card7Example"; ================================================ FILE: src/components/carousels/Carousel1/Carousel1.jsx ================================================ import { Swiper, SwiperSlide } from "swiper/react"; import { EffectCoverflow, Pagination } from "swiper/modules"; import "./styles.css"; import "swiper/css"; import "swiper/css/navigation"; import "swiper/css/pagination"; import image1 from "./1.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; import image4 from "./4.jpg"; import image5 from "./5.jpg"; const slides = [ { title: "1 Series", image: image1, }, { title: "2 Series", image: image2, }, { title: "3 Series", image: image3, }, { title: "4 Series", image: image4, }, { title: "5 Series", image: image5, }, ]; export const Carousel1 = () => { return (
    {slides.map((slide) => (

    {slide.title}

    explore
    ))}
    ); }; ================================================ FILE: src/components/carousels/Carousel1/styles.css ================================================ * { margin: 0; padding: 0; box-sizing: border-box; } .page.carousel-1-page { position: relative; display: flex; align-items: center; gap: 50px; padding: 0 8vw; background: linear-gradient(45deg, #2c3d46, #0c0f13); color: #f9f9f9; } .carousel-1-page .swiper a { display: inline-block; text-decoration: none; text-transform: uppercase; color: #717171; font-weight: 500; background: #fff; border-radius: 3.125rem; margin: 0 auto; padding: 10px 26px; font-size: 0.9rem; transition: 0.3s ease-in-out; } .carousel-1-page .swiper { width: 100%; max-width: 800px; height: 440px; } .carousel-1-page .swiper-slide { overflow: hidden; display: flex; flex-direction: column; justify-content: end; align-items: center; filter: grayscale(0.6); background-size: cover; background-position: center; } .carousel-1-page .swiper-slide h2 { color: #fff; font-weight: 100; font-size: 20px; line-height: 1.4; margin-bottom: 0.625rem; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .carousel-1-page .swiper-slide a:hover { color: #005baa; } .carousel-1-page .swiper-slide div { position: absolute; z-index: 1; inset: 0; background: linear-gradient(rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 80%)); transition: 0.25s; opacity: 0; align-self: stretch; padding-bottom: 70px; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; } .carousel-1-page .swiper-slide-active div { opacity: 1; } .carousel-1-page .swiper-slide > div > div { translate: 0 100px; transition: 0.3s; } .carousel-1-page .swiper-slide-active > div > div { translate: 0; } .carousel-1-page .swiper-pagination-bullet, .carousel-1-page .swiper-pagination-bullet-active { background: #fff !important; } .carousel-1-page .swiper-pagination { bottom: 10px !important; transform: scale(1.3); } ================================================ FILE: src/components/carousels/Carousel2/Carousel2.jsx ================================================ import { Swiper, SwiperSlide } from "swiper/react"; import { EffectCoverflow } from "swiper/modules"; import "swiper/css"; import "swiper/css/effect-coverflow"; import "./styles.css"; import image1 from "./1.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; import image4 from "./4.jpg"; import image5 from "./5.jpg"; import image6 from "./6.jpg"; import image7 from "./7.jpg"; import image8 from "./8.jpg"; import image9 from "./9.jpg"; const slides = [image2, image3, image4, image5, image6, image7, image8, image9]; export const Carousel2 = () => { return (
    {slides.map((slide) => ( ))}
    ); }; ================================================ FILE: src/components/carousels/Carousel2/styles.css ================================================ .page.carousel-2-page { background: #010101; font-size: 14px; color: #010101; margin: 0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .carousel-2-page .swiper { padding-top: 50px; padding-bottom: 140px; } .carousel-2-page .swiper .swiper-slide { background-position: center; background-size: cover; border-radius: 10px; width: 300px; height: 250px; filter: saturate(1.2); -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0006); } ================================================ FILE: src/components/carousels/Carousel3/Carousel3.css ================================================ .page.carousel-3-page { background: linear-gradient(45deg, #8647b3, #40429c); font-size: 14px; color: #f9f9f9; margin: 0; padding: 0; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .carousel-3-page h2 { font-weight: 500; margin: 0 0 16px; } .carousel-3-page p { opacity: 0.7; font-size: 18px; margin: 0 0 20px; } .carousel-3-page a { display: inline-block; text-decoration: none; text-transform: uppercase; color: #ffffff; font-weight: 500; background: transparent; border-radius: 3.125rem; border: 2px solid #ffffff; margin: 0 auto; padding: 6px 26px; font-size: 0.9rem; transition: 0.3s ease-in-out; } .carousel-3-page .swiper { height: 440px; margin-top: 40px; } .carousel-3-page .swiper-pagination-bullet, .carousel-3-page .swiper-pagination-bullet-active { background: #fff; } .carousel-3-page .swiper-pagination { bottom: 34px !important; transform: scale(1.3); } .carousel-3-page .swiper-slide { height: 300px; display: flex; flex-direction: column; justify-content: end; align-items: center; border-radius: 20px; background-size: cover; background-position: center; filter: grayscale(0.4) saturate(2) sepia(0.2); -webkit-box-reflect: below 24px linear-gradient(transparent, transparent, #0006); } .carousel-3-page .swiper-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 100%)); border-radius: inherit; z-index: -1; } .carousel-3-page .swiper-slide h2 { color: #fff; font-weight: 400; font-size: 1.4rem; line-height: 1.4; margin-bottom: 0.625rem; text-transform: uppercase; text-align: center; } .carousel-3-page .swiper-slide a:hover { color: #005baa; } .carousel-3-page .swiper-slide div { transition: 0.5s; opacity: 0; padding-bottom: 140px; } .carousel-3-page .swiper-slide-active div { opacity: 1; } .swiper-slide-shadow-coverflow { border-radius: 20px; } ================================================ FILE: src/components/carousels/Carousel3/Carousel3.jsx ================================================ import { Swiper, SwiperSlide } from "swiper/react"; import { EffectCoverflow, Pagination } from "swiper/modules"; import "swiper/css"; import "swiper/css/effect-coverflow"; import "./Carousel3.css"; import image1 from "./1.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; import image4 from "./4.jpg"; import image5 from "./5.jpg"; const slides = [ { name: "India", src: image1, }, { name: "Japan", src: image2, }, { name: "Scotland", src: image3, }, { name: "Norway", src: image4, }, { name: "France", src: image5, }, ]; export const Carousel3 = () => { return (
    {slides.map((slide) => (

    {slide.name}

    explore
    ))}
    ); }; ================================================ FILE: src/components/carousels/index.js ================================================ export * from "./Carousel1/Carousel1"; export * from "./Carousel2/Carousel2"; export * from "./Carousel3/Carousel3"; ================================================ FILE: src/components/controls/AutoSuggest/AutoSuggest.jsx ================================================ import { useEffect, useState } from "react"; import logo from "./Joegle.svg"; import "./styles.css"; const names = [ "Aarav", "Aaron", "Abdiel", "Abdullah", "Abel", "Abraham", "Abram", "Ace", "Adam", "Adan", "Aden", "Adler", "Adonis", "Adrian", "Adriel", "Adrien", "Agustin", "Ahmad", "Ahmed", "Ahmir", "Aidan", "Aiden", "Alan", "Alaric", "Albert", "Alberto", "Alden", "Aldo", "Alec", "Alejandro", "Alessandro", "Alex", "Alexander", "Alexis", "Alfonso", "Alfred", "Alfredo", "Ali", "Alijah", "Alistair", "Allan", "Allen", "Alonso", "Alonzo", "Alvaro", "Alvin", "Amari", "Ambrose", "Ameer", "Amias", "Amir", "Amiri", "Amos", "Anakin", "Ander", "Anders", "Anderson", "Andre", "Andres", "Andrew", "Andy", "Angel", "Angelo", "Anthony", "Antonio", "Apollo", "Archer", "Archie", "Ares", "Ari", "Arian", "Ariel", "Aries", "Arjun", "Arlo", "Armando", "Armani", "Aron", "Arthur", "Arturo", "Aryan", "Asa", "Asher", "Ashton", "Atharv", "Atlas", "Atreus", "Atticus", "August", "Augustine", "Augustus", "Austin", "Avery", "Avi", "Avyaan", "Axel", "Axl", "Axton", "Ayaan", "Ayan", "Ayden", "Aydin", "Azael", "Azariah", "Aziel", "Azrael", "Azriel", "Baker", "Banks", "Barrett", "Baylor", "Bear", "Beau", "Beckett", "Beckham", "Bellamy", "Ben", "Benedict", "Benicio", "Benjamin", "Bennett", "Benson", "Bentley", "Bishop", "Bjorn", "Blaine", "Blaise", "Blake", "Blaze", "Bo", "Bode", "Boden", "Bodhi", "Bodie", "Boone", "Boston", "Bowen", "Bowie", "Braden", "Bradley", "Brady", "Brandon", "Branson", "Brantley", "Braxton", "Brayan", "Brayden", "Braylen", "Braylon", "Brecken", "Brendan", "Brennan", "Brian", "Briar", "Bridger", "Briggs", "Brixton", "Brock", "Brodie", "Brody", "Bronson", "Brooks", "Bruce", "Bruno", "Bryan", "Bryant", "Bryce", "Brycen", "Bryson", "Byron", "Cade", "Caden", "Caiden", "Cain", "Cairo", "Cal", "Caleb", "Callahan", "Callan", "Callen", "Callum", "Calum", "Calvin", "Camden", "Cameron", "Camilo", "Canaan", "Cannon", "Carl", "Carlos", "Carmelo", "Carson", "Carter", "Case", "Casen", "Casey", "Cash", "Cason", "Caspian", "Cassian", "Cassius", "Castiel", "Cayden", "Cayson", "Cesar", "Chaim", "Chance", "Chandler", "Charles", "Charlie", "Chase", "Chris", "Christian", "Christopher", "Cillian", "Clark", "Clay", "Clayton", "Clyde", "Cody", "Cohen", "Colby", "Cole", "Coleson", "Colin", "Collin", "Colson", "Colt", "Colten", "Colter", "Colton", "Conner", "Connor", "Conor", "Conrad", "Cooper", "Corbin", "Corey", "Cory", "Creed", "Crew", "Cristian", "Crosby", "Cruz", "Cullen", "Curtis", "Cyrus", "Dakari", "Dakota", "Dallas", "Dalton", "Damari", "Damian", "Damien", "Damir", "Damon", "Dane", "Dangelo", "Daniel", "Danny", "Dante", "Darian", "Dariel", "Dario", "Darius", "Darren", "Dash", "Davian", "David", "Davion", "Davis", "Dawson", "Dax", "Daxton", "Deacon", "Dean", "Deandre", "Declan", "Demetrius", "Dennis", "Denver", "Derek", "Derrick", "Desmond", "Devin", "Devon", "Dexter", "Diego", "Dilan", "Dillon", "Dimitri", "Dior", "Dominic", "Dominick", "Dominik", "Donald", "Donovan", "Dorian", "Douglas", "Drake", "Drew", "Duke", "Dustin", "Dylan", "Easton", "Eddie", "Eden", "Edgar", "Edison", "Eduardo", "Edward", "Edwin", "Eithan", "Eli", "Eliam", "Elian", "Elias", "Eliel", "Elijah", "Elio", "Eliseo", "Elisha", "Elliot", "Elliott", "Ellis", "Elon", "Emanuel", "Emerson", "Emery", "Emiliano", "Emilio", "Emir", "Emmanuel", "Emmett", "Emmitt", "Emory", "Enoch", "Enrique", "Enzo", "Ephraim", "Eric", "Erick", "Erik", "Ermias", "Ernesto", "Esteban", "Ethan", "Eugene", "Evan", "Evander", "Everest", "Everett", "Ezekiel", "Ezequiel", "Ezra", "Fabian", "Felipe", "Felix", "Fernando", "Finley", "Finn", "Finnegan", "Finnley", "Fisher", "Fletcher", "Flynn", "Ford", "Forest", "Forrest", "Fox", "Francis", "Francisco", "Franco", "Frank", "Franklin", "Frederick", "Gabriel", "Gael", "Gage", "Garrett", "Gary", "Gatlin", "Gavin", "Genesis", "George", "Gerardo", "Gian", "Gianni", "Gideon", "Giovanni", "Gordon", "Grady", "Graham", "Granger", "Grant", "Graysen", "Grayson", "Gregory", "Grey", "Greyson", "Griffin", "Guillermo", "Gunnar", "Gunner", "Gustavo", "Hamza", "Hank", "Harlan", "Harlem", "Harley", "Harold", "Harrison", "Harry", "Harvey", "Hassan", "Hayden", "Hayes", "Heath", "Hector", "Hendrix", "Henrik", "Henry", "Hezekiah", "Holden", "Houston", "Howard", "Hudson", "Hugh", "Hugo", "Hunter", "Huxley", "Ian", "Ibrahim", "Idris", "Ignacio", "Iker", "Ira", "Isaac", "Isaiah", "Isaias", "Ishaan", "Ismael", "Israel", "Issac", "Ivan", "Izaiah", "Jabari", "Jace", "Jack", "Jackson", "Jacob", "Jacoby", "Jaden", "Jadiel", "Jagger", "Jaiden", "Jaime", "Jair", "Jakai", "Jakari", "Jake", "Jakob", "Jakobe", "Jalen", "Jamal", "Jamari", "James", "Jameson", "Jamie", "Jamir", "Jamison", "Jared", "Jase", "Jasiah", "Jason", "Jasper", "Javier", "Jax", "Jaxon", "Jaxson", "Jaxton", "Jaxtyn", "Jaxx", "Jaxxon", "Jay", "Jayce", "Jayceon", "Jayden", "Jaylen", "Jayson", "Jaziel", "Jedidiah", "Jefferson", "Jeffrey", "Jensen", "Jeremiah", "Jeremias", "Jeremy", "Jericho", "Jerry", "Jesiah", "Jesse", "Jesus", "Jett", "Jimmy", "Jiraiya", "Joaquin", "Joe", "Joel", "Joey", "Johan", "John", "Johnathan", "Johnny", "Jon", "Jonah", "Jonas", "Jonathan", "Jones", "Jordan", "Jorge", "Jose", "Joseph", "Joshua", "Josiah", "Josue", "Jovanni", "Joziah", "Juan", "Judah", "Jude", "Judson", "Julian", "Julien", "Julio", "Julius", "Junior", "Justice", "Justin", "Kabir", "Kace", "Kade", "Kaden", "Kai", "Kaiden", "Kairo", "Kaiser", "Kaison", "Kaleb", "Kalel", "Kamari", "Kamden", "Kamdyn", "Kameron", "Kane", "Kannon", "Kareem", "Karson", "Karsyn", "Karter", "Kartier", "Kase", "Kasen", "Kash", "Kashton", "Kason", "Kayden", "Kaysen", "Kayson", "Keanu", "Keaton", "Keegan", "Keith", "Kellan", "Kellen", "Kelvin", "Kendrick", "Kenji", "Kenneth", "Kenzo", "Kevin", "Khai", "Khalid", "Khalil", "Khari", "Kiaan", "Kian", "Kieran", "Killian", "King", "Kingsley", "Kingston", "Knox", "Koa", "Kobe", "Koda", "Kody", "Koen", "Kohen", "Kole", "Kolton", "Korbin", "Krew", "Kristian", "Kristopher", "Kye", "Kylan", "Kyle", "Kylen", "Kyler", "Kylian", "Kylo", "Kyng", "Kyree", "Kyrie", "Kyro", "Kyson", "Lachlan", "Lance", "Landen", "Landon", "Landry", "Landyn", "Lane", "Langston", "Larry", "Lawrence", "Lawson", "Layne", "Layton", "Leandro", "Ledger", "Lee", "Legacy", "Legend", "Leif", "Leighton", "Leland", "Lennon", "Lennox", "Leo", "Leon", "Leonard", "Leonardo", "Leonel", "Leonidas", "Leroy", "Levi", "Lewis", "Lian", "Lincoln", "Lionel", "Lochlan", "Logan", "Lorenzo", "Louie", "Louis", "Loyal", "Luca", "Lucas", "Lucca", "Lucian", "Luciano", "Luis", "Luka", "Lukas", "Luke", "Mac", "Mack", "Madden", "Maddox", "Magnus", "Major", "Makai", "Malachi", "Malakai", "Malcolm", "Malik", "Manuel", "Marcel", "Marcellus", "Marcelo", "Marco", "Marcos", "Marcus", "Mario", "Mark", "Marshall", "Martin", "Marvin", "Mason", "Mateo", "Mathew", "Mathias", "Matias", "Matteo", "Matthew", "Matthias", "Maurice", "Mauricio", "Maverick", "Max", "Maximilian", "Maximiliano", "Maximo", "Maximus", "Maxton", "Maxwell", "Mccoy", "Mekhi", "Melvin", "Memphis", "Messiah", "Micah", "Michael", "Miguel", "Milan", "Miles", "Miller", "Milo", "Misael", "Mitchell", "Mohamed", "Mohammad", "Mohammed", "Moises", "Mordechai", "Morgan", "Moses", "Moshe", "Muhammad", "Musa", "Mustafa", "Myles", "Mylo", "Nash", "Nasir", "Nathan", "Nathanael", "Nathaniel", "Nehemiah", "Neil", "Nelson", "Neo", "Nicholas", "Nico", "Nicolas", "Niklaus", "Niko", "Nikolai", "Nikolas", "Nixon", "Noah", "Noe", "Noel", "Nolan", "Nova", "Oakley", "Ocean", "Odin", "Oliver", "Omar", "Omari", "Onyx", "Orion", "Orlando", "Oscar", "Osiris", "Osman", "Otis", "Otto", "Owen", "Ozzy", "Pablo", "Palmer", "Parker", "Patrick", "Paul", "Paxton", "Pedro", "Peter", "Peyton", "Philip", "Phillip", "Phoenix", "Pierce", "Porter", "Preston", "Prince", "Princeton", "Quentin", "Quincy", "Quinn", "Quinton", "Rafael", "Raiden", "Ramon", "Randy", "Raphael", "Raul", "Ray", "Rayan", "Rayden", "Raylan", "Raymond", "Reece", "Reed", "Reese", "Reid", "Reign", "Remi", "Remington", "Remy", "Rene", "Reuben", "Rex", "Rey", "Rhett", "Rhys", "Ricardo", "Richard", "Ricky", "Ridge", "Riggs", "Riley", "Rio", "River", "Robert", "Roberto", "Robin", "Rocco", "Rocky", "Rodney", "Rodrigo", "Roger", "Rohan", "Roland", "Roman", "Rome", "Romeo", "Ronald", "Ronan", "Ronin", "Rory", "Rowan", "Rowen", "Roy", "Royal", "Royce", "Ruben", "Rudy", "Russell", "Ryan", "Ryder", "Ryker", "Rylan", "Ryland", "Sage", "Saint", "Salem", "Salvador", "Salvatore", "Sam", "Samir", "Samson", "Samuel", "Santana", "Santiago", "Santino", "Santos", "Saul", "Sawyer", "Scott", "Sean", "Sebastian", "Sergio", "Seth", "Seven", "Shane", "Shawn", "Shepard", "Shepherd", "Shiloh", "Silas", "Simon", "Sincere", "Skyler", "Solomon", "Sonny", "Soren", "Spencer", "Stanley", "Stefan", "Stephen", "Sterling", "Stetson", "Steven", "Sullivan", "Sutton", "Sylas", "Tadeo", "Talon", "Tanner", "Tate", "Tatum", "Taylor", "Thaddeus", "Thatcher", "Theo", "Theodore", "Thiago", "Thomas", "Timothy", "Titan", "Titus", "Tobias", "Tomas", "Tommy", "Tony", "Trace", "Travis", "Trenton", "Trevor", "Trey", "Tripp", "Tristan", "Troy", "Tru", "Truett", "Tucker", "Turner", "Ty", "Tyler", "Tyson", "Ulises", "Uriah", "Uriel", "Valentin", "Valentino", "Van", "Vance", "Vicente", "Victor", "Vihaan", "Vincent", "Vincenzo", "Wade", "Walker", "Wallace", "Walter", "Warren", "Watson", "Waylon", "Wayne", "Wells", "Wes", "Wesley", "Wesson", "Westin", "Westley", "Weston", "Wilder", "William", "Wilson", "Winston", "Wyatt", "Wylder", "Xander", "Xavier", "Yaakov", "Yadiel", "Yahir", "Yehuda", "Yisroel", "Yosef", "Yousef", "Yusuf", "Zachariah", "Zachary", "Zahir", "Zaid", "Zaiden", "Zain", "Zaire", "Zakai", "Zander", "Zane", "Zavier", "Zayd", "Zayden", "Zayn", "Zayne", "Zechariah", "Zeke", "Zev", "Zion", "Zyair", "Zyaire", "Zyon", ]; const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debouncedValue; }; const Header = () => ; const Footer = () => ( <>

    Shop final Black Friday device deals on the Joegle Store today.

    ); const AutoSuggest = ({ onSearch, results, search }) => (
    search
    {results.map((name) => ( ))}
    ); export const AutoSuggestExample = () => { const [search, setSearch] = useState(""); const [results, setResults] = useState([]); const debounced = useDebounce(search, 500); const handleSearch = (e) => setSearch(e.target.value); useEffect(() => { const namesCopy = [...names]; setResults( namesCopy.filter( (n, i) => search === "" || n.toLowerCase().includes(search.toLowerCase()) ) ); }, [debounced]); return (
    ); }; ================================================ FILE: src/components/controls/AutoSuggest/styles.css ================================================ .page.auto-suggest-page { background: #18181b; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px; padding-top: 0; } .auto-suggest-page img { width: 240px; margin: 0 auto; } .auto-suggest-page button { padding: 10px 16px; border-radius: 4px; border: 0; background: #303134; color: inherit; font-family: inherit; } .auto-suggest-page p { margin: 0; font-size: 13px; } .auto-suggest-page p a { color: #8ab4f7; } .auto-suggest { position: relative; } .auto-suggest input { width: 440px; height: 44px; padding: 0 20px 0 44px; border-radius: 22px; border: 1px solid #5f6367; background: transparent; color: #e8eaed; font-size: 16px; font-family: inherit; outline: none; } .auto-suggest input:focus { background: #2c2e34; border-color: #2c2e34; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .auto-suggest span:nth-child(1) { position: absolute; top: 50%; left: 14px; translate: 0 -50%; } .auto-suggest-buttons { display: flex; gap: 16px; } .auto-suggest .menu { display: none; position: absolute; z-index: 1; overflow: hidden; top: 44px; left: 0; width: 100%; max-height: 228px; padding: 0 16px 6px; background: #2c2e34; border-bottom-right-radius: 22px; border-bottom-left-radius: 22px; } .auto-suggest input:focus ~ .menu, .auto-suggest .menu:hover { display: block; } .auto-suggest .menu > div { padding: 8px 0; border-top: 1px solid #5f6367; line-height: 1.8; } .auto-suggest .menu > div button { display: block; background: transparent; padding: 0; height: 30px; font-size: 16px; cursor: pointer; width: 100%; text-align: left; } ================================================ FILE: src/components/controls/EditableText/EditableText.css ================================================ .editable-text { display: flex; align-items: center; gap: 8px; } .editable-text-value.is-editing ~ .editable-text-buttons { opacity: 1; visibility: visible; } .editable-text-buttons { display: flex; gap: 2px; opacity: 0; visibility: hidden; transition: 0.3s; } .editable-text:hover .editable-text-buttons { opacity: 1; visibility: visible; } .editable-text-buttons button { cursor: pointer; background: transparent; border: 0; display: grid; place-items: center; color: inherit; opacity: 0.5; transition: 0.3s; } .editable-text-buttons button:hover { opacity: 0.8; } .editable-text-value { outline: none; } ================================================ FILE: src/components/controls/EditableText/EditableText.jsx ================================================ import { useLayoutEffect, useRef, useState } from "react"; import "./EditableText.css"; const setCaret = (el) => { if (!el) return; try { const range = document.createRange(); const sel = window.getSelection(); range.setStart(el.childNodes[0], el.innerText.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } catch (err) { console.log("Error Setting Caret: ", err); } }; const IconButton = ({ children, onClick }) => ( ); export const EditableText = ({ name, defaultValue, onSave, className }) => { const [isEditing, setIsEditing] = useState(false); const nextValue = useRef(""); const spanRef = useRef(null); const handleChange = (e) => (nextValue.current = e.target.innerText); const handleSave = () => { toggleIsEditing(); onSave(name, nextValue.current); }; const toggleIsEditing = () => setIsEditing(!isEditing); useLayoutEffect(() => { if (isEditing) { spanRef.current.focus(); setCaret(spanRef.current); } else { spanRef.current.innerText = defaultValue; nextValue.current = defaultValue; } }, [isEditing]); return ( {defaultValue} {isEditing ? ( <> check_circle cancel ) : ( edit )} ); }; ================================================ FILE: src/components/controls/EditableText/EditableTextExample.css ================================================ .page.editable-text-page { --gradient: linear-gradient(45deg, #ff7c7d, #ffda67); --card: #272524; display: flex; align-items: center; justify-content: center; margin: 0; height: 100vh; background: var(--gradient); color: #fdfcfd; font-family: "Euclid Circular B", "Poppins"; } .editable-text-card { display: flex; align-items: center; width: 75vw; max-width: 650px; padding: 44px 30px 44px 20px; background: var(--card); border-radius: 24px; } .editable-text-card img { max-width: 280px; width: 36vw; height: 300px; object-fit: cover; margin-left: -60px; margin-right: 30px; border-radius: inherit; box-shadow: 0 60px 40px rgb(0 0 0 / 8%); transition: border-radius 0.3s; } .editable-text-card-title { display: block; font-size: 24px; font-weight: 400; margin-top: 0; margin-bottom: 10px; } .editable-text-card-role { display: block; font-size: 16px; font-weight: 400; margin: 0 0 5px; opacity: 0.75; } .editable-text-card p { font-size: 14px; font-weight: 400; margin-bottom: 30px; opacity: 0.5; } .editable-text-socials { display: flex; align-items: center; gap: 8px; } .editable-text-socials > button { position: relative; border: 0; background: transparent; color: #f8f8f8; padding: 0; } .editable-text-socials > button:first-child::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; border: 2px solid #ff7c7d; transition: 0.3s; transform: translateY(0); } .editable-text-socials > button > i { position: relative; z-index: 1; border: 4px solid var(--card); background: rgb(255 255 255 / 12%); display: grid; place-items: center; font-size: 24px; width: 50px; height: 50px; border-radius: 40px; } @media (width <= 600px) { .editable-text-card { margin: 0 40px; padding-left: 50px; padding-right: 50px; padding-bottom: 60px; width: 100%; text-align: center; flex-direction: column; } .editable-text-card h2 { margin-right: 0; font-size: 26px; } .editable-text-card img { margin: -100px 0 30px 0; width: 100%; max-width: 1000px; height: 250px; } .editable-text-card p { max-width: 360px; } .editable-text-socials { justify-content: center; } } @media (width <= 440px) { .editable-text-card img { height: 50vw; width: 50vw; border-radius: 50%; border: 12px solid var(--card); box-shadow: none; margin: -140px 0 30px 0; } } ================================================ FILE: src/components/controls/EditableText/EditableTextExample.jsx ================================================ import image from "./image.jpg"; import "./EditableTextExample.css"; import { EditableText } from "./EditableText"; import { useState } from "react"; export const EditableTitleExample = () => { const [state, setState] = useState({ title: "Jill Scott", role: "Frontend Engineer", }); const { title, role } = state; const handleSave = (name, value) => setState({ ...state, [name]: value, }); return (

    Transforming ideas into realities, creating interfaces that inspire and engage users dreams.

    ); }; ================================================ FILE: src/components/controls/PasswordStrength/PasswordStrength.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./styles.css"; const strengthLabels = ["weak", "medium", "medium", "strong"]; export const PasswordStrength = ({ placeholder, onChange }) => { const [strength, setStrength] = useState(""); const getStrength = (password) => { let strengthIndicator = -1; if (/[a-z]/.test(password)) strengthIndicator++; if (/[A-Z]/.test(password)) strengthIndicator++; if (/\d/.test(password)) strengthIndicator++; if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++; if (password.length >= 16) strengthIndicator++; return strengthLabels[strengthIndicator]; }; const handleChange = (event) => { setStrength(getStrength(event.target.value)); onChange(event.target.value); }; return ( <>
    {strength && `${strength} password`}
    ); }; export const PasswordStrengthExample = () => { const handleChange = (value) => console.log(value); return (

    Sign Up

    ); }; ================================================ FILE: src/components/controls/PasswordStrength/styles.css ================================================ * { box-sizing: border-box; } .page.password-strength-page { display: grid; place-items: center; margin: 0; background: #000000; font-family: "Euclid Circular A", "Poppins"; color: #fdfdfd; } .password-strength-page .login-card { width: 400px; padding: 60px 30px 30px; border-radius: 16px; background: #0e0d0d; text-align: center; } .password-strength-page .login-card > h2 { font-size: 36px; font-weight: 600; margin: 0 0 30px; } .password-strength-page .login-card img { width: 260px; margin-bottom: 20px; } .password-strength-page .login-form { width: 100%; margin: 0; display: grid; } .password-strength-page .login-form input.control::placeholder { color: #9f9d9e; } .password-strength-page .control { outline: none; width: 100%; height: 56px; padding: 0 16px; color: inherit; background: #181919; border: 0; border-radius: 6px; margin: 8px 0; font-family: inherit; font-size: 18px; transition: 0.4s; } .password-strength-page button.control { cursor: pointer; width: 100%; height: 56px; padding: 0 16px; background: #0079ea; text-align: center; } .password-strength-page .bars { margin: 8px 0; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 6px; border-radius: 3px; background: #181919; } .password-strength-page .bars div { height: 6px; border-radius: 3px; transition: 0.4s; width: 0%; } .password-strength-page .bars.weak div { background: #e24c71; width: 33.33%; } .password-strength-page .bars.medium div { background: #f39845; width: 66.66%; } .password-strength-page .bars.strong div { background: #57c558; width: 100%; } .password-strength-page .strength { text-align: left; height: 30px; text-transform: capitalize; color: #868b94; } ================================================ FILE: src/components/controls/PasswordStrength2/PasswordStrength2.css ================================================ * { box-sizing: border-box; } .page.password-strength-2-page { display: grid; place-items: center; margin: 0; background: #f9f6fc; color: #2e2c2f; font-family: "Euclid Circular A", "Poppins"; --color-primary: #7b00f1; --color-muted: #ada5b4; } .password-strength-2-page .card .bars { margin: 8px 0; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 6px; border-radius: 3px; background: #f4f1f7; } .password-strength-2-page .card .bars div { height: 6px; border-radius: 3px; transition: 0.4s; width: 0%; } .password-strength-2-page .card .bars.weak div { background: #e24c71; width: 33.33%; } .password-strength-2-page .card .bars.medium div { background: #f39845; width: 66.66%; } .password-strength-2-page .card .bars.strong div { background: #57c558; width: 100%; } .password-strength-2-page .card .strength { text-align: left; height: 20px; font-size: 13px; text-transform: capitalize; color: #868b94; } .password-strength-2-page .blob, .password-strength-2-page .orbit { position: fixed; z-index: 1; top: 50%; left: 50%; translate: -50% -50%; } .password-strength-2-page .blob { width: 85vw; max-width: 550px; aspect-ratio: 1 / 1; } @keyframes spin { 100% { rotate: 1turn; } } .password-strength-2-page .orbit { width: 95vw; max-width: 720px; aspect-ratio: 1 / 1; border: 2px solid #ffffff; border-radius: 50%; animation: spin 50s infinite linear; } .password-strength-2-page .orbit::before, .password-strength-2-page .orbit::after { content: ""; position: absolute; width: 24px; aspect-ratio: 1 / 1; border-radius: inherit; background: #f39f1a; } .password-strength-2-page .orbit::before { top: 50%; width: 18px; left: -9px; } .password-strength-2-page .orbit::after { top: 50%; right: -12px; } .password-strength-2-page .card { position: relative; z-index: 2; background: #ffffff; border-radius: 24px; padding: 72px 32px 48px; width: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 50px rgb(96 68 121 / 10%); } .password-strength-2-page .card img { width: 96px; margin: 0 0 32px; } .password-strength-2-page .card :is(h2, h3) { font-weight: 500; } .password-strength-2-page .card h2 { font-size: 18px; margin: 0 0 6px; } .password-strength-2-page .card h3 { color: var(--color-muted); font-size: 13px; margin: 0 0 32px; } .password-strength-2-page .card form { display: grid; gap: 12px; width: 100%; margin: 0 0 20px; } .password-strength-2-page .card :is(input, button) { height: 52px; font-family: inherit; font-size: 15px; padding: 0 12px; border: 0; border-radius: 8px; } .password-strength-2-page .card .textbox { position: relative; } .password-strength-2-page label, .password-strength-2-page input { transition: 0.3s; } .password-strength-2-page .textbox label { position: absolute; top: 50%; left: 12px; translate: 0 -50%; transform-origin: 0 50%; pointer-events: none; color: var(--color-muted); } .password-strength-2-page .textbox input { width: 100%; padding-top: 10px; background: #f4f1f7; outline: none; color: inherit; box-shadow: 0 0 0 2px transparent; } .password-strength-2-page .textbox input:focus { box-shadow: 0 0 0 2px var(--color-primary); } .password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label { scale: 0.725; translate: 0 -112%; } .password-strength-2-page .card button { color: #f9f9f9; background: var(--color-primary); } .password-strength-2-page .card a { font-size: 14px; color: var(--color-primary); } .password-strength-2-page .card p { margin: 48px 0 0; font-size: 14px; color: var(--color-muted); } ================================================ FILE: src/components/controls/PasswordStrength2/PasswordStrength2.jsx ================================================ import { useState } from "react"; import logo from "./logo.png"; import blob from "./blob.svg"; import "./PasswordStrength2.css"; const strengthLabels = ["weak", "medium", "medium", "strong"]; export const PasswordStrength = ({ placeholder, onChange }) => { const [strength, setStrength] = useState(""); const getStrength = (password) => { let strengthIndicator = -1; if (/[a-z]/.test(password)) strengthIndicator++; if (/[A-Z]/.test(password)) strengthIndicator++; if (/\d/.test(password)) strengthIndicator++; if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++; if (password.length >= 16) strengthIndicator++; return strengthLabels[strengthIndicator]; }; const handleChange = (event) => { setStrength(getStrength(event.target.value)); onChange(event.target.value); }; return ( <>
    {strength && `${strength} password`}
    ); }; export const PasswordStrength2Example = () => { const handleChange = (value) => console.log(value); return (

    Welcome to Lockr!

    We keep your data locked!

    Privacy Policy

    Already have an account? Login!

    ); }; ================================================ FILE: src/components/controls/PasswordStrength3/PasswordStrength3.css ================================================ * { box-sizing: border-box; } .page.password-strength-2-page { display: grid; place-items: center; margin: 0; background: #f9f6fc; color: #2e2c2f; font-family: "Euclid Circular A", "Poppins"; --color-primary: #7b00f1; --color-muted: #ada5b4; } .password-strength-2-page .card .bars { margin: 8px 0; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 6px; border-radius: 3px; background: #f4f1f7; } .password-strength-2-page .card .bars div { height: 6px; border-radius: 3px; transition: 0.4s; width: 0%; } .password-strength-2-page .card .bars.weak div { background: #e24c71; width: 33.33%; } .password-strength-2-page .card .bars.medium div { background: #f39845; width: 66.66%; } .password-strength-2-page .card .bars.strong div { background: #57c558; width: 100%; } .password-strength-2-page .card .strength { text-align: left; height: 20px; font-size: 13px; text-transform: capitalize; color: #868b94; } .password-strength-2-page .blob, .password-strength-2-page .orbit { position: fixed; z-index: 1; top: 50%; left: 50%; translate: -50% -50%; } .password-strength-2-page .blob { width: 85vw; max-width: 550px; aspect-ratio: 1 / 1; } @keyframes spin { 100% { rotate: 1turn; } } .password-strength-2-page .orbit { width: 95vw; max-width: 720px; aspect-ratio: 1 / 1; border: 2px solid #ffffff; border-radius: 50%; animation: spin 50s infinite linear; } .password-strength-2-page .orbit::before, .password-strength-2-page .orbit::after { content: ""; position: absolute; width: 24px; aspect-ratio: 1 / 1; border-radius: inherit; background: #f39f1a; } .password-strength-2-page .orbit::before { top: 50%; width: 18px; left: -9px; } .password-strength-2-page .orbit::after { top: 50%; right: -12px; } .password-strength-2-page .card { position: relative; z-index: 2; background: #ffffff; border-radius: 24px; padding: 72px 32px 48px; width: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10px 50px rgb(96 68 121 / 10%); } .password-strength-2-page .card img { width: 96px; margin: 0 0 32px; } .password-strength-2-page .card :is(h2, h3) { font-weight: 500; } .password-strength-2-page .card h2 { font-size: 18px; margin: 0 0 6px; } .password-strength-2-page .card h3 { color: var(--color-muted); font-size: 13px; margin: 0 0 32px; } .password-strength-2-page .card form { display: grid; gap: 12px; width: 100%; margin: 0 0 20px; } .password-strength-2-page .card :is(input, button) { height: 52px; font-family: inherit; font-size: 15px; padding: 0 12px; border: 0; border-radius: 8px; } .password-strength-2-page .card .textbox { position: relative; } .password-strength-2-page label, .password-strength-2-page input { transition: 0.3s; } .password-strength-2-page .textbox label { position: absolute; top: 50%; left: 12px; translate: 0 -50%; transform-origin: 0 50%; pointer-events: none; color: var(--color-muted); } .password-strength-2-page .textbox input { width: 100%; padding-top: 10px; background: #f4f1f7; outline: none; color: inherit; box-shadow: 0 0 0 2px transparent; } .password-strength-2-page .textbox input:focus { box-shadow: 0 0 0 2px var(--color-primary); } .password-strength-2-page .textbox input:is(:focus, :not(:invalid)) ~ label { scale: 0.725; translate: 0 -112%; } .password-strength-2-page .card button { color: #f9f9f9; background: var(--color-primary); } .password-strength-2-page .card a { font-size: 14px; color: var(--color-primary); } .password-strength-2-page .card p { margin: 48px 0 0; font-size: 14px; color: var(--color-muted); } ================================================ FILE: src/components/controls/PasswordStrength3/PasswordStrength3.jsx ================================================ import { useState } from "react"; import logo from "./logo.png"; import blob from "./blob.svg"; import "./PasswordStrength3.css"; const strengthLabels = ["weak", "medium", "medium", "strong"]; export const PasswordStrength = ({ placeholder, onChange }) => { const [strength, setStrength] = useState(""); const getStrength = (password) => { let strengthIndicator = -1; if (/[a-z]/.test(password)) strengthIndicator++; if (/[A-Z]/.test(password)) strengthIndicator++; if (/\d/.test(password)) strengthIndicator++; if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++; if (password.length >= 16) strengthIndicator++; return strengthLabels[strengthIndicator]; }; const handleChange = (event) => { setStrength(getStrength(event.target.value)); onChange(event.target.value); }; return ( <>
    {strength && `${strength} password`}
    ); }; export const PasswordStrength3Example = () => { const handleChange = (value) => console.log(value); return (

    Welcome to Lockr!

    We keep your data locked!

    Privacy Policy

    Already have an account? Login!

    ); }; ================================================ FILE: src/components/controls/PasswordStrength4/PasswordStrength4.css ================================================ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); * { box-sizing: border-box; } .page.password-strength-4-page { display: grid; place-items: center; margin: 0; background: #0f172a; color: #ffffff; font-family: "Euclid Circular B", "Poppins", sans-serif; --color-primary: #6d48f6; --color-muted: #94a3b8; --color-card: #192134; --color-input: rgb(255 255 255 / 4%); --color-border: rgba(255, 255, 255, 0.08); } /* ── Strength bar ── */ .password-strength-4-page .bars { margin-bottom: 6px; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; height: 4px; border-radius: 3px; background: var(--color-input); } .password-strength-4-page .bars div { height: 100%; border-radius: 3px; transition: width 0.3s ease-out, background 0.3s ease-out; width: 0%; } @media (prefers-reduced-motion: reduce) { .password-strength-4-page .bars div { transition: none; } } .password-strength-4-page .bars.weak div { background: #ef4444; width: 33.33%; } .password-strength-4-page .bars.medium div { background: #f59e0b; width: 66.66%; } .password-strength-4-page .bars.strong div { background: #34d399; width: 100%; } .password-strength-4-page .strength { text-align: left; height: 20px; font-size: 13px; text-transform: capitalize; color: var(--color-muted); } /* ── Background decorations ── */ .password-strength-4-page .blob, .password-strength-4-page .orbit { position: fixed; z-index: 1; top: 50%; left: 50%; translate: -50% -50%; } .password-strength-4-page .blob { width: 85vw; max-width: 550px; aspect-ratio: 1 / 1; opacity: 0.02; } @keyframes spin { 100% { rotate: 1turn; } } @media (prefers-reduced-motion: reduce) { .password-strength-4-page .orbit { animation: none; } } .password-strength-4-page .orbit { width: 95vw; max-width: 720px; aspect-ratio: 1 / 1; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; animation: spin 50s infinite linear; } .password-strength-4-page .orbit::before, .password-strength-4-page .orbit::after { content: ""; position: absolute; width: 24px; aspect-ratio: 1 / 1; border-radius: inherit; background: linear-gradient(90deg, #6d48f6, #4896f6); } .password-strength-4-page .orbit::before { top: 50%; width: 18px; left: -9px; } .password-strength-4-page .orbit::after { top: 50%; right: -12px; } /* ── Card ── */ .password-strength-4-page .card { position: relative; z-index: 2; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 30px; padding: 72px 32px 48px; width: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .password-strength-4-page .card img { width: 56px; margin: 0 0 12px; } .password-strength-4-page h2 { font-size: 24px; font-weight: 400; margin: 0 0 38px; } .password-strength-4-page form { display: grid; gap: 12px; width: 100%; margin: 0 0 20px; } .password-strength-4-page :is(input, button) { height: 52px; font-family: inherit; font-size: 15px; padding: 0 12px; border: 0; border-radius: 8px; } /* ── Textbox / floating label ── */ .password-strength-4-page .textbox { position: relative; } .password-strength-4-page label, .password-strength-4-page input { transition: 0.3s ease; } .password-strength-4-page .textbox label { position: absolute; top: 50%; left: 12px; translate: 0 -50%; transform-origin: 0 50%; pointer-events: none; color: var(--color-muted); } .password-strength-4-page .textbox input { width: 100%; padding-top: 10px; background: var(--color-input); outline: none; color: #ffffff; box-shadow: 0 0 0 1px transparent; } .password-strength-4-page .textbox input:focus { box-shadow: 0 0 0 2px rgb(255 255 255 / 16%); } .password-strength-4-page .textbox input:is(:focus, :not(:invalid)) ~ label { scale: 0.725; translate: 0 -112%; } /* ── Password visibility toggle ── */ .password-strength-4-page .toggle-visibility { position: absolute; right: 12px; top: 50%; translate: 0 -50%; height: auto; padding: 6px; background: transparent; border: none; border-radius: 4px; color: var(--color-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .password-strength-4-page .toggle-visibility:hover { color: #ffffff; } .password-strength-4-page .toggle-visibility:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .password-strength-4-page .textbox input.password-strength { padding-right: 44px; } /* ── Submit button ── */ .password-strength-4-page button[type="submit"] { color: #ffffff; background: linear-gradient(90deg, #6d48f6, #4896f6); cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .password-strength-4-page button[type="submit"]:active { transform: scale(0.98); } .password-strength-4-page button[type="submit"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ── Links ── */ .password-strength-4-page a { font-size: 14px; color: #f9f9f9; cursor: pointer; text-decoration: none; transition: color 0.15s ease; } .password-strength-4-page a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } .password-strength-4-page p { margin: 28px 0 6px; font-size: 14px; color: var(--color-muted); } ================================================ FILE: src/components/controls/PasswordStrength4/PasswordStrength4.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import blob from "./blob.svg"; import "./PasswordStrength4.css"; const strengthLabels = ["weak", "medium", "medium", "strong"]; const EyeIcon = () => ( ); const EyeOffIcon = () => ( ); const PasswordStrength = ({ placeholder, id, onChange }) => { const [strength, setStrength] = useState(""); const [visible, setVisible] = useState(false); const getStrength = (password) => { let strengthIndicator = -1; if (/[a-z]/.test(password)) strengthIndicator++; if (/[A-Z]/.test(password)) strengthIndicator++; if (/\d/.test(password)) strengthIndicator++; if (/[^a-zA-Z0-9]/.test(password)) strengthIndicator++; if (password.length >= 16) strengthIndicator++; return strengthLabels[strengthIndicator]; }; const handleChange = (event) => { setStrength(getStrength(event.target.value)); onChange(event.target.value); }; return ( <>
    {strength && `${strength} password`}
    ); }; export const PasswordStrength4Example = () => { const handleChange = (value) => console.log(value); return (
    Lockr logo

    Cube.ai

    Already have an account? Login!

    ); }; ================================================ FILE: src/components/controls/PasswordVisibility/Password.css ================================================ .password-control input { --color-primary: #0088ff; --color-muted: #5a616c; border: 0; width: 100%; height: 60px; background: transparent; font-family: inherit; font-size: 16px; outline: none; } .password-visibility .password-control { position: relative; margin-bottom: 16px; } .password-control > span { position: absolute; top: 50%; translate: 0 -50%; left: 0; font-size: 22px; pointer-events: none; color: var(--color-muted); transition: 0.3s; } .password-control input { padding: 0 24px 0 36px; color: rgb(255 255 255 / 96%); height: 72px; transition: 0.3s; } .password-control :is(input:focus, input:valid) ~ label { translate: -36px -44px; scale: 0.875; } .password-control input:focus ~ label { color: var(--color-primary); } .password-control .border { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 6%); } .password-control .border::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary); transform: scaleX(0); opacity: 0; transition: 0.3s; } .password-control input:focus ~ .border::after { transform: scaleX(1); opacity: 1; } .password-control :is(input:focus, input:valid) ~ span { color: rgb(255 255 255 / 96%); } .password-control label { position: absolute; top: 50%; left: 30px; translate: 0 -50%; color: var(--color-muted); pointer-events: none; text-transform: capitalize; transition: 0.4s; } .password-control { margin-bottom: 20px; } .password-control input { padding-right: 50px; } .password-control button { position: absolute; top: 50%; right: 0; display: grid; place-items: center; padding: 0; height: 36px; width: 36px; translate: 0 -50%; cursor: pointer; } .password-control button span { color: var(--color-muted); transition: 0.3s; } .password-control button:hover span { color: rgb(255 255 255 / 96%); } ================================================ FILE: src/components/controls/PasswordVisibility/Password.jsx ================================================ import { useState } from "react"; import "./Password.css"; export const Icon = ({ children }) => ( {children} ); export const Password = ({ name, onInput }) => { const [showPassword, setShowPassword] = useState(false); const handleMouseDown = (e) => { e.preventDefault(); setShowPassword(!showPassword); }; const handleInput = (e) => onInput(name, e.target.value); return (
    lock
    ); }; ================================================ FILE: src/components/controls/PasswordVisibility/PasswordVisibilityExample.css ================================================ .page.password-visibility-page { display: grid; place-items: center; margin: 0; padding: 0 20px; background: #3284ce; font-family: "Euclid Circular A", "Poppins"; box-sizing: border-box; } .password-visibility :is(button, input) { border: 0; width: 100%; height: 60px; background: transparent; font-family: inherit; font-size: 16px; outline: none; } @keyframes clouds { 0% { scale: 1; translate: 0; } 50% { scale: 1.25; } 100% { scale: 1; translate: -100px 0; } } .password-visibility-clouds { position: fixed; top: -50vh; left: 0; height: 150vh; animation: clouds 15s both infinite alternate linear; } .password-visibility { --color-primary: #0088ff; --color-muted: #5a616c; position: fixed; display: flex; flex-direction: column; justify-content: center; z-index: 2; top: 0; left: 0; height: 100%; width: 70%; max-width: 400px; padding: 200px 60px; background: #121216; } .password-visibility > h2 { font-size: 32px; font-weight: 300; margin: 0 0 10px; color: rgb(255 255 255 / 96%); } .password-visibility > h3 { font-size: 16px; font-weight: 400; margin: 0 0 30px; color: var(--color-muted); } .password-visibility > form { margin: 0; display: grid; gap: 16px; } .password-visibility > form > button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0 12px 0 24px; border-radius: 6px; background: var(--color-primary); color: #f9f9f9; border: 0; font-family: inherit; letter-spacing: 1px; font-size: 16px; font-weight: 500; transition: 0.3s; } .password-visibility form > button:disabled { opacity: 0.5; cursor: not-allowed; } .password-visibility p > a { color: var(--color-primary); text-decoration: none; } ================================================ FILE: src/components/controls/PasswordVisibility/PasswordVisibilityExample.jsx ================================================ import { useState } from "react"; import bg from "./bg.svg"; import "./PasswordVisibilityExample.css"; import { Icon, Password } from "./Password"; export const PasswordVisibilityExample = () => { const [state, setState] = useState({ password: "", }); const handleInput = (name, value) => { setState({ ...state, [name]: value, }); }; return (

    Login

    Welcome back Jack!

    ); }; ================================================ FILE: src/components/controls/Slider/Slider.css ================================================ .slider-wrapper { --color-border: red; --color-border-hover: blue; --color-card: black; --color-hover: white; --color-primary: green; position: relative; display: flex; align-items: center; gap: 8px; border-radius: 6px; height: 40px; padding: 0 4px 0 8px; border: 1px solid var(--color-border); transition: 0.3s; } .slider-wrapper:hover { border-color: var(--color-border-hover); } .slider { flex: 1 1 auto; position: relative; height: 16px; } .slider-label { position: absolute; top: -8px; padding: 0 4px; left: 5px; font-size: 11px; color: var(--color-muted); background: var(--color-card); } .track { position: absolute; top: 5px; width: 100%; height: 6px; border-radius: 3px; z-index: 1; background: var(--color-hover); } .markers { position: absolute; z-index: 2; top: 5px; left: 2px; right: 3px; translate: 0 -50%; display: flex; } .marker { position: absolute; top: 0; left: var(--left); width: 6px; height: 6px; border-radius: 50%; translate: -50% 0; background: rgb(255 255 255 / 16%); opacity: 0.6; transition: 0.3s; } .marker-active { background: var(--color-primary); } .numeric-input-wrapper { position: relative; } .numeric-input-suffix { position: absolute; top: 50%; right: 8px; translate: 0 -50%; font-size: 14px; } .numeric-input { position: relative; z-index: 3; width: 58px; height: 28px; min-height: 28px; border-radius: 4px; border: 1px solid var(--color-border); font-size: 14px; padding: 0 24px 0 10px; } .numeric-input:hover { border-color: var(--color-border-hover); } .numeric-input:focus { box-shadow: 0 0 0 2px var(--color-primary); } input[type="range"], input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; } input[type="range"] { position: relative; z-index: 3; width: 100%; height: 6px; min-height: 6px; translate: 0 -5px; padding: 0; border: 0; border-radius: 3px; margin: auto; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { position: relative; z-index: 3; background: var(--color-text); width: 18px; height: 18px; border-radius: 50px; background: #111111; border: 2px solid var(--color-primary); cursor: pointer; box-shadow: 0 0 0 3px transparent; transition: 0.3s; } input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 3px rgb(48 168 121 / 16%); } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 5px rgb(48 168 121 / 16%); } .bar { position: absolute; z-index: 1; left: 0; top: 5px; bottom: 0; height: 6px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: var(--color-primary); opacity: 0.25; pointer-events: none; } ================================================ FILE: src/components/controls/Slider/Slider.jsx ================================================ import { useState } from "react"; import "./Slider.css"; const getBarWidth = (numValue) => { const THUMB_SIZE = 19; const percentageOfThumb = (THUMB_SIZE * numValue) / 100; return `${numValue - percentageOfThumb / 2}%`; }; export const Slider = ({ id, label, min, max, initialValue }) => { const [barWidth, setBarWidth] = useState(getBarWidth(+initialValue)); const [value, setValue] = useState(initialValue); const MARKERS = [1, 25, 50, 75, 100]; const onInput = (e) => { const inputValue = e.target.value; // Allow empty string if (inputValue === "") { setValue(""); setBarWidth("0%"); return; } const numValue = Number(inputValue); if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) { setValue(inputValue); setBarWidth(getBarWidth(numValue)); } }; return (
    {MARKERS.map((marker) => (
    ))}
    %
    ); }; ================================================ FILE: src/components/controls/Slider/SliderExample.css ================================================ .page.slider-page { background: #222222; } ================================================ FILE: src/components/controls/Slider/SliderExample.jsx ================================================ import { Slider } from "./Slider"; import "./SliderExample.css"; export const SliderExample = () => (
    ); ================================================ FILE: src/components/controls/index.js ================================================ export * from "./PasswordStrength/PasswordStrength"; export * from "./AutoSuggest/AutoSuggest"; export * from "./PasswordVisibility/PasswordVisibilityExample"; export * from "./EditableText/EditableTextExample"; export * from "./Slider/SliderExample"; export * from "./PasswordStrength2/PasswordStrength2"; export * from "./PasswordStrength3/PasswordStrength3"; export * from "./PasswordStrength4/PasswordStrength4"; ================================================ FILE: src/components/dropdowns/Dropdown1/Dropdown1.css ================================================ .dropdown-1 { position: relative; perspective: 1000px; width: 144px; } .dropdown-1 button { display: flex; align-items: center; gap: 4px; padding: 0; width: 100%; height: 64px; color: rgb(255 255 255 / 55%); background: #2d2f31; border: 0; cursor: pointer; font-size: 16px; font-family: "Euclid Circular A"; } .dropdown-1 > button { background: transparent; gap: 10px; margin: 0 -4px; white-space: nowrap; } .dropdown-1 > button > .chevron { } .dropdown-1:hover > button, .dropdown-1.open > button { color: rgb(255 255 255 / 95%); } .dropdown-1.open > button .chevron { rotate: -180deg; } .dropdown-1 > button > .span { font-size: 30px; } .dropdown-1 button .chevron { margin-left: auto; transition: rotate 0.3s; } .dropdown-1-menu { position: absolute; overflow: hidden; z-index: 1; top: 64px; left: 0; margin: 0 -20px; width: calc(100% + 40px); height: 168px; opacity: 0; transform: rotateX(-90deg); transform-origin: 0% 0%; visibility: hidden; background: #2d2f31; transition: 0.3s; } .dropdown-1.open .dropdown-1-menu { opacity: 1; transform: rotateX(0); visibility: visible; } .dropdown-1-menu .main-menu { width: 50%; } .dropdown-1-menu .menu-inner { position: absolute; width: 200%; display: flex; transition: 0.4s; } .dropdown-1-menu .menu-inner.open { translate: -50%; } .dropdown-1-menu button { border: 0; height: 56px; border-radius: 0; gap: 10px; padding: 0 8px 0 16px; text-transform: capitalize; } .dropdown-1-menu button:hover { color: rgb(255 255 255 / 95%); } .dropdown-1-menu .sub-menu { position: absolute; width: 100%; left: 50%; top: 0; } .dropdown-1 button .material-symbols-outlined:first-child { font-size: 22px; } .page.dropdown-1-page { margin: 0; display: grid; place-items: center; background: #212324; height: 100vh; } .dropdown-1-nav { position: fixed; top: 0; left: 0; z-index: 2; background: #771dff; width: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } .dropdown-1-nav > h1 { font-weight: 400; margin-right: auto; margin-left: 14px; font-size: 16px; } ================================================ FILE: src/components/dropdowns/Dropdown1/Dropdown1.jsx ================================================ import { useRef, useState } from "react"; import "./Dropdown1.css"; const MenuButton = ({ name, icon, index, hasSubItems, subMenuHeight, onClick, }) => { return ( ); }; const MenuItem = ({ name, icon, index, activeSubMenu, subItems, onClick }) => { const subMenuRef = useRef(); const isActive = activeSubMenu === index; return ( <> null} name={name} icon={icon || name} index={index} hasSubItems={Boolean(subItems)} subMenuHeight={subMenuRef.current?.clientHeight} /> {subItems?.length && (
    <> {subItems.map((subItem) => ( ))}
    )} ); }; export const Dropdown1 = ({ items }) => { const [isOpen, setIsOpen] = useState(false); const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); const [subMenuHeight, setSubMenuHeight] = useState(); const [activeSubMenu, setActiveSubMenu] = useState(); const handleClick = (index, subMenuHeight) => { if (index > -1) setActiveSubMenu(index); setSubMenuHeight(subMenuHeight); setIsSubMenuOpen(index > -1); }; return (
    {items.map((item, index) => ( ))}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown1/Dropdown1Example.jsx ================================================ import { Dropdown1 } from "./Dropdown1"; import "./Dropdown1.css"; const items = [ { name: "settings", subItems: ["analytics", "database", "terminal"], }, { name: "devices", subItems: ["smartphone", "mouse", "keyboard", "headphones"], }, { name: "lock", displayName: "Account", }, ]; export const Dropdown1Example = () => { return (
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown2/Dropdown2.css ================================================ .dropdown-2 { position: relative; display: grid; place-items: center; height: 72px; } .dropdown-2-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 40%); opacity: 0; visibility: hidden; transition: 0.3s; } .dropdown-2-overlay.open { opacity: 1; visibility: visible; } .dropdown-2 > button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; background: transparent; } .dropdown-2-menu { overflow-x: hidden; overflow-y: auto; position: fixed; translate: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; width: 270px; max-height: 286px; padding: 10px; background: #ffffff; border-radius: 8px; border: 1px solid #ebebeb; box-shadow: 0 0 10px rgb(0 0 0 / 8%); opacity: 0; visibility: hidden; transition: 0.3s; appearance: none; } .dropdown-2-menu::-webkit-scrollbar { width: 15px; } .dropdown-2-menu::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 10px; border: 4px solid transparent; background-clip: padding-box; } .dropdown-2-menu.open { opacity: 1; visibility: visible; translate: 0; } .dropdown-2-menu > button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; font-family: inherit; color: #6d696b; border: 0; background: transparent; } .dropdown-2-menu > button > img { width: 64px; height: 64px; padding: 16px; } .dropdown-2-menu > button > span:first-child { display: block; width: 64px; height: 64px; scale: 0.7; background-image: url("./icons.png"); background-position: 0 -3105px; background-size: 64px 3307px; background-repeat: no-repeat; } .dropdown-2-menu > button > span:last-child { font-size: 12px; translate: 0 -12px; } ================================================ FILE: src/components/dropdowns/Dropdown2/Dropdown2.jsx ================================================ import { useRef, useState } from "react"; import "./Dropdown2.css"; import joe from "./joe.png"; import { createPortal } from "react-dom"; const Overlay = ({ isOpen, onClick }) => (
    ); const Menu = ({ isOpen, dropdownRef }) => { const menuRef = useRef(null); const rect = dropdownRef?.current?.getBoundingClientRect(); const top = `${rect?.y + 60}px`; const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`; return (
    ); }; export const Dropdown2 = () => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); return (
    {createPortal( setIsOpen(false)} />, document.body )} {createPortal( , document.body )}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown2/Dropdown2Example.css ================================================ .page.dropdown-2-page { color: #6d696b; background: #f7f7f7; font-family: "Euclid Circular A", "Poppins"; } .dropdown-2-nav { margin-top: -40px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; width: 80%; height: 72px; padding: 0 20px; background: #ffffff; box-shadow: 0 0 20px rgb(0 0 0 / 6%); } .dropdown-2-nav .logo { display: flex; align-items: center; } .dropdown-2-nav .logo img { width: 36px; padding: 0; margin-left: 4px; margin-right: 6px; } .dropdown-2-nav span.material-symbols-outlined { display: grid; place-items: center; width: 40px; height: 72px; font-size: 24px; } .dropdown-2-nav h2 { font-size: 19px; font-weight: 400; } .dropdown-2-nav .nav-right > img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; margin-left: 8px; } .dropdown-2-nav button { background: transparent; border: 0; color: inherit; cursor: pointer; } .dropdown-2-nav .nav-right { display: flex; align-items: center; } ================================================ FILE: src/components/dropdowns/Dropdown2/Dropdown2Example.jsx ================================================ import { Dropdown2 } from "./Dropdown2"; import joe from "./joe.png"; import logo from "./logo.svg"; import "./Dropdown2Example.css"; export const Dropdown2Example = () => { return (
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown3/Dropdown3.css ================================================ .page.dropdown-3-page { margin: 0; display: grid; place-items: center; background: #1b1921; height: 100vh; --color-menu: #2b2935; } .dropdown-3 { position: relative; } .dropdown-3 button { display: flex; align-items: center; gap: 10px; padding: 0 16px; width: 204px; height: 64px; color: #afb3b5; background: var(--color-menu); border: 0; cursor: pointer; font-size: 18px; font-family: "Euclid Circular A"; transition: 0.3s ease; } .dropdown-3 > button { background: #6f3dcd; border-radius: 10px; color: #f9f9f9; } .dropdown-3.open > button .chevron { rotate: -180deg; } .dropdown-3 button .chevron { margin-left: auto; transition: 0.3s ease; } .dropdown-3 .menu { position: absolute; overflow: hidden; z-index: 1; top: 74px; left: 0; width: 100%; opacity: 0; translate: 0 -20px; visibility: hidden; border-radius: 10px; background: var(--color-menu); transition: 0.4s ease; } .dropdown-3.open .menu { opacity: 1; translate: 0; visibility: visible; } .dropdown-3 .menu-inner { position: absolute; width: 460px; display: flex; transition: 0.4s ease; } .dropdown-3 .menu-inner.open { translate: -50%; } .dropdown-3 .menu button { border: 0; height: 56px; border-radius: 0; text-transform: capitalize; } .dropdown-3 .menu button:hover { background: #393646; color: #f9f9f9; } .dropdown-3 .sub-menu { position: absolute; width: 230px; left: 230px; top: 0; opacity: 0; visibility: hidden; } .dropdown-3 .sub-menu.open { opacity: 1; visibility: visible; } ================================================ FILE: src/components/dropdowns/Dropdown3/Dropdown3.jsx ================================================ import { useRef, useState } from "react"; import "./Dropdown3.css"; const items = [ { name: "build", subItems: ["description", "folder", "article"], }, { name: "devices", subItems: ["storage", "mouse", "keyboard", "headphones"], }, { name: "logout", }, ]; const Icon = ({ icon, className }) => ( {icon} ); const MenuButton = ({ name, icon, index, hasSubItems, subMenuHeight, onClick, }) => { return ( ); }; const MenuItem = ({ name, index, activeSubMenu, subItems, onClick }) => { const subMenuRef = useRef(null); const isActive = activeSubMenu === index; return ( <> null} name={name} index={index} hasSubItems={Boolean(subItems)} subMenuHeight={subMenuRef.current?.clientHeight} /> {subItems?.length && (
    <> {subItems.map((subItem) => ( ))}
    )} ); }; export const Dropdown3 = () => { const [isOpen, setIsOpen] = useState(false); const [isSubMenuOpen, setIsSubMenuOpen] = useState(false); const [subMenuHeight, setSubMenuHeight] = useState(); const [activeSubMenu, setActiveSubMenu] = useState(); const handleClick = (index, subMenuHeight) => { if (index > -1) setActiveSubMenu(index); setSubMenuHeight(subMenuHeight); setIsSubMenuOpen(index > -1); }; return (
    {items.map((item, index) => ( ))}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown4/Dropdown4.css ================================================ .dropdown-4 { position: relative; perspective: 400px; color: #f9f9f9; font-family: "Euclid Circular A", "Poppins"; } .dropdown-4 :is(button, ul, .button-inner) { transform-origin: 50% 0; backface-visibility: hidden; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, scale 0.3s; } .dropdown-4 button { position: relative; z-index: 1; background: transparent; border: 0; color: inherit; display: flex; align-items: center; justify-content: space-between; font-family: inherit; height: 60px; width: 160px; gap: 12px; padding: 0 20px 0 32px; cursor: pointer; } .dropdown-4 > button span { font-size: 28px; } .dropdown-4 > button .button-inner { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; font-size: 16px; } .dropdown-4 ul { position: absolute; top: 0; left: 0; list-style: none; padding: 0; margin: 0; background: #3b1977; transform: rotateX(-90deg) translateZ(60px); } .dropdown-4.open ul { transform: rotate(0) translateZ(60px); } .dropdown-4 ul button { justify-content: flex-start; gap: 12px; text-transform: capitalize; padding: 0 16px; } .dropdown-4 ul button i { font-size: 20px; } .dropdown-4 ul button:hover { background: rgb(255 255 255 / 12%); } .dropdown-4 > button { background: #5d13f1; transform: rotate(0); } .dropdown-4:not(.open) > button:hover { scale: 1.05; } .dropdown-4.open > button { transform: rotateX(90deg); } .dropdown-4.open > button .button-inner { opacity: 0; } ================================================ FILE: src/components/dropdowns/Dropdown4/Dropdown4.jsx ================================================ import { useRef, useEffect, useState } from "react"; import "./Dropdown4.css"; // Example items // const items = [ // "Trainers", // "Joggers", // "Tracksuits" // ] const useClickOutside = (ref, callback) => { const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) { callback(); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); }; export const Dropdown4 = ({ buttonText, items, onItemClick }) => { const dropdownRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const toggleIsOpen = () => setIsOpen(!isOpen); const handleItemClick = (item) => { onItemClick(item); toggleIsOpen(); }; useClickOutside(dropdownRef, () => setIsOpen(false)); return (
      {items.map((item) => (
    • ))}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown4/Dropdown4Example.css ================================================ .page.dropdown-4-page { background: #fdfcf1; color: #5f5a67; } .page.dropdown-4-page > div { translate: 0 -60px; } .Toastify__toast { font-family: inherit; text-transform: capitalize; } /* .Toastify__toast .Toastify__progress-bar--wrp { display: none; } */ ================================================ FILE: src/components/dropdowns/Dropdown4/Dropdown4Example.jsx ================================================ import { useState } from "react"; import { ToastContainer, toast, cssTransition } from "react-toastify"; import { Dropdown4 } from "./Dropdown4"; import "./Dropdown4Example.css"; const items = ["instagram", "twitter", "github"]; export const Dropdown4Example = () => { const handleItemClick = (item) => toast.success(`Followed on ${item}`, { position: "bottom-center", autoClose: true, closeButton: false, }); return ( <>
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown5/Dropdown5.css ================================================ .dropdown-5 { position: relative; display: grid; place-items: center; height: 72px; } .dropdown-5-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 40%); opacity: 0; visibility: hidden; transition: 0.3s; } .dropdown-5-overlay.open { opacity: 1; visibility: visible; } .dropdown-5 button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; background: transparent; } .dropdown-5-menu { position: fixed; width: 270px; height: 352px; max-height: 352px; border-radius: 14px; opacity: 0; visibility: hidden; appearance: none; border: 7px solid #282a2c; background: #1b1b1b; box-shadow: 0 -20px 18px rgb(0 0 0 / 12%), 0 16px 40px rgb(0 0 0 / 12%); } .dropdown-5-menu-inner { position: absolute; top: 4px; left: 0; right: -7px; bottom: 4px; overflow-x: hidden; overflow-y: scroll; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; border-radius: inherit; padding: 7px; } .dropdown-5-menu-inner::-webkit-scrollbar { width: 7px; padding-top: 40px; background: #282a2c; } .dropdown-5-menu-inner::-webkit-scrollbar-thumb { background: #464749; border-radius: 6px; background-clip: content-box; } .dropdown-5-menu.open { opacity: 1; visibility: visible; translate: 0; } .dropdown-5-menu button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; font-family: inherit; color: #6d696b; height: 80px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; } .dropdown-5-menu button:hover { background: #282a2c; color: #c5c7c5; } .dropdown-5-menu button > img { width: 64px; height: 64px; padding: 16px; } .dropdown-5-menu button > span:first-child { display: block; width: 64px; height: 64px; scale: 0.7; background-image: url("./icons.png"); background-position: 0 -3105px; background-size: 64px 3307px; background-repeat: no-repeat; } .dropdown-5-menu button > span:last-child { font-size: 12px; translate: 0 -12px; } ================================================ FILE: src/components/dropdowns/Dropdown5/Dropdown5.jsx ================================================ import { useRef, useState, useEffect } from "react"; import "./Dropdown5.css"; import joe from "./joe.png"; import gemini from "./gemini.png"; import { createPortal } from "react-dom"; const Menu = ({ isOpen, dropdownRef, menuRef }) => { const rect = dropdownRef?.current?.getBoundingClientRect(); const top = `${rect?.y + 64}px`; const left = `${rect?.x - menuRef?.current?.clientWidth + 40}px`; return (
    ); }; export const Dropdown5 = () => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const menuRef = useRef(null); // Handle click outside to close dropdown useEffect(() => { const handleClickOutside = (event) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target) ) { setIsOpen(false); } }; if (isOpen) { document.addEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isOpen]); return (
    {createPortal( , document.body )}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown5/Dropdown5Example.css ================================================ .page.dropdown-5-page { color: #c5c7c5; background: #1b1b1b; font-family: "Euclid Circular A", "Poppins"; } .dropdown-5-nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 20px; background: #1b1b1b; border-bottom: 1px solid #282a2c; box-shadow: 0 0 40px rgb(0 0 0 / 12%); } .dropdown-5-nav .logo { display: flex; align-items: center; } .dropdown-5-nav .logo img { width: 36px; padding: 0; margin-left: 4px; margin-right: 6px; } .dropdown-5-nav span.material-symbols-outlined { display: grid; place-items: center; width: 40px; height: 72px; font-size: 24px; } .dropdown-5-nav h2 { font-size: 19px; font-weight: 400; } .dropdown-5-nav .nav-right > img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; margin-left: 8px; } .dropdown-5-nav button { background: transparent; border: 0; color: #a5a7a5; cursor: pointer; border-radius: 50%; } .dropdown-5-nav button:is(:hover, :focus) { background: #282a2c; color: #c5c7c5; } .dropdown-5-nav .nav-right { display: flex; align-items: center; } ================================================ FILE: src/components/dropdowns/Dropdown5/Dropdown5Example.jsx ================================================ import { Dropdown5 } from "./Dropdown5"; import joe from "./joe.png"; import logo from "./logo.svg"; import "./Dropdown5Example.css"; export const Dropdown5Example = () => { return (
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown6/Dropdown6.css ================================================ .dropdown-6 { flex: 1 1 auto; position: relative; } .dropdown-6 input { border: 0; border-radius: 52px; height: 52px; width: 100%; background: #f3f3f6; padding-left: 18px; padding-right: 36px; font-size: 14.75px; color: inherit; font-family: inherit; outline: none; border: 2px solid transparent; transition: 0.3s; } .dropdown-6.open input, .dropdown-6 input:hover { border: 2px solid #eedfed; background: #ffffff; } .dropdown-6 > button { border: 0; display: grid; place-items: center; height: 34px; width: 34px; border-radius: 50%; background: var(--color-primary); color: #f9f9f9; position: absolute; top: 50%; right: 8px; translate: 0 -50%; font-size: 18px; } .dropdown-6 button span { font-size: 20px; } .dropdown-6 input::placeholder { color: #9b98b1; } .dropdown-6 .dropdown-menu { position: absolute; z-index: 1; top: 60px; left: 0; right: 0; background: #ffffff; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; padding-bottom: 12px; box-shadow: 0px 40px 50px 0px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; transition: 0.3s; } .dropdown-6.open .dropdown-menu { opacity: 1; visibility: visible; } .dropdown-6 .dropdown-menu .item-btn { font-family: inherit; background: 0; padding: 12px 8px; border: 0; display: flex; gap: 8px; width: 100%; border-radius: 6px; color: inherit; cursor: pointer; } .dropdown-6 .dropdown-menu .item-btn:hover { background: rgb(0 0 0 / 3%); } .dropdown-6 .dropdown-item { position: relative; padding: 0 10px; } .dropdown-item span:first-child { opacity: 0.35; } ================================================ FILE: src/components/dropdowns/Dropdown6/Dropdown6.jsx ================================================ import { useState, useRef, useEffect } from "react"; import "./Dropdown6.css"; const defaultItems = [ "login", "card", "landing page", "dashboard", "hero section", "footer", ]; export const Dropdown6 = () => { const [items, setItems] = useState(defaultItems); const [search, setSearch] = useState(""); const [open, setOpen] = useState(false); const wrapperRef = useRef(null); const inputRef = useRef(null); const insertSearch = (query) => { if (!query.trim()) return; setItems((prev) => { const newItems = [...prev]; for (let i = newItems.length - 1; i > 0; i--) { newItems[i] = newItems[i - 1]; } newItems[0] = query.trim(); return newItems; }); }; const handleSearch = () => { insertSearch(search); setSearch(""); }; const handleFocus = () => setOpen(true); useEffect(() => { const handleClickOutside = (e) => { if (wrapperRef.current && !wrapperRef.current.contains(e.target)) { setOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); return (
    setSearch(e.target.value)} onFocus={handleFocus} onKeyDown={(e) => e.key === "Enter" && handleSearch()} />
    {items.map((item, index) => { const isDefault = defaultItems.includes(item); return (
    ); })}
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown6/Dropdown6Example.css ================================================ .page.dropdown-6-page { background: #fbfbfb; font-family: "Euclid Circular B", "Poppins"; } .dropdown-6-page nav { --color-primary: #fe5495; position: fixed; top: 0; left: 0; z-index: 1; display: flex; align-items: center; gap: 24px; padding: 0 36px; height: 78px; width: 100%; background: #ffffff; color: #403f49; box-shadow: 0 10px 50px rgb(0 0 0 / 2%); } .dropdown-6-page nav a { padding: 0 8px; display: flex; align-items: center; cursor: pointer; width: 100%; height: 72px; font-size: 15px; } .dropdown-6-page nav .avatar { height: 46px; padding: 1px; border-radius: 50%; border: 1px solid #8f44fd; } .dropdown-6-page nav > img { height: 32px; } .dropdown-6-page nav .menu { display: flex; align-items: center; justify-content: center; font-weight: 500; } .dropdown-6-page nav .dropdown { position: fixed; z-index: 1; top: 86px; left: 0; width: 120px; padding: 6px 0; display: grid; opacity: 0; visibility: hidden; /* transition: 0.3s; */ border-radius: 12px; background: #ffffff; box-shadow: 0 0 30px rgb(0 0 0 / 4%); transition: 0.3s; } .dropdown-6-page nav a:is(:hover, .active) { color: var(--color-primary); } .dropdown-6-page nav .dropdown.visible { opacity: 1; visibility: visible; } .dropdown-6-page nav .dropdown::after { content: ""; position: absolute; top: -12px; width: 100%; height: 50px; } .dropdown-6-page nav .dropdown > a { position: relative; z-index: 1; height: 40px; font-size: 14px; white-space: nowrap; } ================================================ FILE: src/components/dropdowns/Dropdown6/Dropdown6Example.jsx ================================================ import { useRef, useState } from "react"; import logo from "./logo.svg"; import avatar from "./avatar.png"; import { Dropdown6 } from "./Dropdown6"; import "./Dropdown6Example.css"; const items = [ { name: "Explore", items: ["Following", "Popular", "Noteworthy"], }, { name: "Talent", items: ["Browse", "Profiles", "Services", "Jobs"], }, { name: "Blog", items: ["News", "Articles", "Community"], }, ]; const Link = ({ item, isActive, onHover }) => { const linkRef = useRef(); const handleHover = () => { const rect = linkRef.current.getBoundingClientRect(); onHover(item, `${rect.x}px`); }; return ( {item.name} ); }; const CoolNav = ({ items }) => { const [translateX, setTranslateX] = useState("0"); const [activeItem, setActiveItem] = useState(null); const [isHidden, setIsHidden] = useState(true); const handleLinkHover = (item, x) => { setActiveItem(item); setTranslateX(x); }; const handleMouseEnter = () => { setIsHidden(false); }; const handleMouseLeave = () => { setIsHidden(true); }; return (
    {items.map((item, index) => ( ))}
    {activeItem?.items?.map((link) => ( {link} ))}
    ); }; export const Dropdown6Example = () => { return (
    ); }; ================================================ FILE: src/components/dropdowns/Dropdown7/Dropdown7.css ================================================ .page.dropdown-7-page { margin: 0; display: grid; place-items: center; background: url("bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; --color-menu: rgb(0 0 0 / 10%); } .page.dropdown-7-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)); } .dropdown-7 { --width: 240px; margin-top: -50px; position: relative; z-index: 1; } .dropdown-7 button { display: flex; align-items: center; gap: 10px; padding: 0 16px; width: var(--width); height: 64px; color: rgb(255 255 255 / 80%); background: var(--color-menu); border: 0; cursor: pointer; font-size: 18px; font-family: "Euclid Circular B"; transition: 0.3s ease; } .dropdown-7 .menu, .dropdown-7 > button { border-radius: 10px; background: var(--color-menu); color: #f9f9f9; border: 2px solid rgb(255 255 255 / 10%); } .dropdown-7.open > button .chevron { rotate: -180deg; } .dropdown-7 button .chevron { margin-left: auto; transition: 0.3s ease; } .dropdown-7 .menu { position: absolute; overflow: hidden; backdrop-filter: blur(10px); z-index: 1; top: 74px; left: 0; width: 100%; opacity: 0; translate: 0 -20px; visibility: hidden; transition: 0.4s ease; } .dropdown-7.open .menu { opacity: 1; translate: 0; visibility: visible; } .dropdown-7 .menu-inner { position: absolute; width: calc(var(--width) * 2); display: flex; transition: 0.4s ease; } .dropdown-7 .menu-inner.open { translate: -50%; } .dropdown-7 .menu button { border: 0; height: 56px; border-radius: 0; text-transform: capitalize; } .dropdown-7 button:hover { background: rgb(255 255 255 / 4%); color: rgb(255 255 255 / 80%); } .dropdown-7 .sub-menu { position: absolute; width: var(--width); left: var(--width); top: 0; opacity: 0; visibility: hidden; } .dropdown-7 .sub-menu.open { opacity: 1; visibility: visible; } ================================================ FILE: src/components/dropdowns/Dropdown7/Dropdown7.jsx ================================================ import { useRef, useState } from "react"; import "./Dropdown7.css"; const items = [ { name: "Settings", icon: "ai-gear", subItems: [ { name: "Inventory", icon: "ai-file" }, { name: "Management", icon: "ai-folder" }, { name: "Location", icon: "ai-check-in" }, ], }, { name: "Account", icon: "ai-lock-on", subItems: [ { name: "Storage", icon: "ai-data" }, { name: "Rewards", icon: "ai-gift" }, { name: "Support", icon: "ai-chat-approve" }, { name: "Shipping", icon: "ai-shipping-box-v1" }, ], }, { name: "Logout", icon: "ai-sign-out" }, ]; const Icon = ({ icon, className = "" }) => ( ); export const Dropdown7 = () => { const [open, setOpen] = useState(false); const [active, setActive] = useState(null); const subRef = useRef(null); const activeItem = items[active]; const height = subRef.current?.clientHeight || 168; return (
    {items.map((item, i) => ( ))}
    {activeItem?.subItems && (
    {activeItem.subItems.map((sub) => ( ))}
    )}
    ); }; ================================================ FILE: src/components/dropdowns/index.js ================================================ export * from "./Dropdown1/Dropdown1Example"; export * from "./Dropdown2/Dropdown2Example"; export * from "./Dropdown3/Dropdown3"; export * from "./Dropdown4/Dropdown4Example"; export * from "./Dropdown5/Dropdown5Example"; export * from "./Dropdown6/Dropdown6Example"; export * from "./Dropdown7/Dropdown7"; ================================================ FILE: src/components/gsap/ScrollReveal/ScrollReveal.jsx ================================================ import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { ScrollTrigger } from "gsap/all"; import "./styles.css"; gsap.registerPlugin(ScrollTrigger); export const ScrollReveal = () => { useGSAP(() => { ScrollTrigger.batch("section > div", { interval: 0.1, batchMax: 3, onEnter: (batch) => gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }), onLeave: (batch) => gsap.set(batch, { autoAlpha: 0, overwrite: true }), onEnterBack: (batch) => gsap.to(batch, { autoAlpha: 1, stagger: 0.15, overwrite: true }), onLeaveBack: (batch) => gsap.set(batch, { autoAlpha: 0, overwrite: true }), }); }, []); return (
    ); }; ================================================ FILE: src/components/gsap/ScrollReveal/styles.css ================================================ .scroll-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px 0; margin: 0 auto; } .scroll-reveal > div { background: #121419; height: 190px; width: 30%; opacity: 0; transition: background 0.3s; } .scroll-reveal > div:hover { background: #3e70ff; } ================================================ FILE: src/components/gsap/TypedMessage/TypedMessage.css ================================================ .message { font-weight: inherit; line-height: inherit; font-size: 80px; text-shadow: 0 0 10px rgb(0 0 0 / 10%); } ================================================ FILE: src/components/gsap/TypedMessage/TypedMessage.jsx ================================================ import React, { useRef } from "react"; import { gsap } from "gsap"; import { SplitText } from "gsap/all"; import { useGSAP } from "@gsap/react"; import "./TypedMessage.css"; gsap.registerPlugin(SplitText); export const TypedMessage = ({ message }) => { const blockRef = useRef(null); const tlRef = useRef(); useGSAP(() => { const s = new SplitText(blockRef.current, { type: "lines,words", }); const tl = gsap.timeline({ delay: 0.5, repeatDelay: 0.5, repeat: -1, }); tl.addLabel("enter"); tl.fromTo( s.words, { yPercent: 100 }, { yPercent: 0, ease: "circ.out", stagger: 0.2, }, "enter" ); tl.fromTo( s.words, { opacity: 0 }, { opacity: 1, ease: "power1.out", stagger: 0.2, }, "enter" ); tl.addPause(); tl.to( s.words, { yPercent: -200, opacity: 0, ease: "circ.in", stagger: 0.1, duration: 0.4, }, "exit" ); tl.to( s.words, { opacity: 0, ease: "power1.in", stagger: 0.1, duration: 0.4, }, "exit" ); tlRef.current = tl; }, []); const handleClick = () => { if (tlRef.current) { tlRef.current.play(); } }; return (

    {message}

    ); }; ================================================ FILE: src/components/gsap/TypedMessage/TypedMessageExample.css ================================================ .typed-message-page { color: #222222; min-height: 100vh; background: url("./image.jpg"); background-size: cover; background-position: -360px; font-family: "Euclid Circular B", "Poppins"; } .typed-message-page::before { content: ""; z-index: 0; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 86%), rgb(0 0 0 / 0%) 120%); } .typed-message-page nav { position: fixed; width: 100%; z-index: 2; display: flex; padding: 0 40px; align-items: center; height: 96px; color: #f7f7f7; } .typed-message-search { position: relative; flex: 1 1 auto; } .typed-message-search span { position: absolute; z-index: 3; top: 50%; left: 16px; translate: 0 -50%; } .typed-message-search input { border: 0; border-radius: 40px; height: 50px; background: rgb(255 255 255 / 10%); backdrop-filter: blur(10px); width: 100%; font-family: inherit; font-size: 16px; padding-left: 46px; } .typed-message-search input::placeholder { color: rgb(255 255 255 / 60%); } .typed-message-banner { position: relative; height: 100vh; border-radius: 50px; color: #ffffff; } .background-video { position: absolute; z-index: 0; inset: 0; overflow: hidden; top: 0; height: 100%; object-fit: cover; } .banner-overlay { position: absolute; z-index: 1; inset: 0; background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)); } .typed-message-banner-content { position: relative; z-index: 3; padding-top: 320px; padding-inline: 82px; display: flex; flex-direction: column; gap: 30px; } .typed-message-wrapper { font-size: 48px; font-weight: 400; max-width: 450px; line-height: 1.2; } .typed-message-banner-content > button { background: rgb(247 247 247 / 12%); color: #f7f7f7; backdrop-filter: blur(10px); font-family: inherit; padding: 0 32px; height: 64px; border-radius: 32px; border: 0; font-size: 22px; align-self: baseline; } .typed-message-logo { width: 140px; padding-right: 40px; } .typed-message-links { display: flex; width: 140px; justify-content: flex-end; align-items: center; gap: 16px; } .typed-message-links span { font-size: 24px; } ================================================ FILE: src/components/gsap/TypedMessage/TypedMessageExample.jsx ================================================ import { TypedMessage } from "./TypedMessage"; import "./TypedMessageExample.css"; import image from "./image.jpg"; import logo from "./logo.svg"; import video from "./video.mp4"; export const TypedMessageExample = () => { return (
    ); }; ================================================ FILE: src/components/gsap/index.js ================================================ export * from "./ScrollReveal/ScrollReveal"; export * from "./TypedMessage/TypedMessageExample"; ================================================ FILE: src/components/index.js ================================================ export * from "./buttons"; export * from "./carousels"; export * from "./controls"; export * from "./sidebars"; export * from "./gsap"; export * from "./libraries"; export * from "./accordions"; export * from "./logins"; export * from "./cards"; export * from "./modals"; export * from "./parallax"; export * from "./dropdowns"; export * from "./widgets"; export * from "./navbars"; export * from "./tables"; export * from "./signups"; ================================================ FILE: src/components/libraries/index.js ================================================ export * from "./rc-slider/RcSlider"; export * from "./react-dropzone/ReactDropzone"; export * from "./react-xarrows/ReactXarrows"; ================================================ FILE: src/components/libraries/rc-slider/RcSlider.css ================================================ .page.rc-slider-page { background: #393965; font-family: "Euclid Circular A", "Poppins"; } .slider-card { --color-primary: #756bea; --color-card: #26263c; display: grid; gap: 14px; padding: 20px 20px 24px; width: 260px; background: var(--color-card); border-radius: 10px; box-shadow: 0 20px 30px rgb(0 0 0 / 10%); } .slider-card h2 { margin: 0 0 8px; font-size: 14px; font-weight: 400; color: rgb(255 255 255 / 50%); } .slider-card var { margin: 0; font-size: 38px; font-weight: 400; font-style: normal; color: rgb(255 255 255 / 100%); } .slider-card var abbr { color: rgb(255 255 255 / 25%); margin-right: 4px; } body .rc-slider-rail { background: rgb(255 255 255 / 12%); } body .rc-slider-handle { border-color: var(--color-card); background: var(--color-primary); opacity: 1; scale: 1.5; } body .rc-slider-handle:hover, body .rc-slider-handle-dragging { box-shadow: none !important; border-color: var(--color-card) !important; cursor: pointer; } body .rc-slider-track { background: var(--color-primary); } ================================================ FILE: src/components/libraries/rc-slider/RcSlider.jsx ================================================ import Slider from "rc-slider"; import "rc-slider/assets/index.css"; import { useState } from "react"; import "./RcSlider.css"; export const RcSlider = () => { const [value, setValue] = useState(20000); const handleChange = (val) => setValue(Number(val)); return (

    Mortgage Value

    $ {value.toLocaleString("en-US")}
    ); }; ================================================ FILE: src/components/libraries/react-dropzone/ReactDropzone.css ================================================ .page.dropzone-page { background: #212224; --color-card: #161718; } .dropzone-card { border-radius: 6px; background: var(--color-card); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; text-align: center; } .dropzone-card h2 { font-weight: 400; margin: 0 0 6px; } .dropzone-card h3 { font-weight: 400; opacity: 0.5; margin: 0 0 50px; } .dropzone-card img { position: absolute; top: -50px; width: 100px; border-radius: 50%; border: 8px solid var(--color-card); } .dropzone { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; width: 280px; min-height: 200px; border-width: 2px; border-radius: 6px; border-color: #464646; border-style: dashed; background-color: transparent; color: #bdbdbd; outline: none; } ================================================ FILE: src/components/libraries/react-dropzone/ReactDropzone.jsx ================================================ import "./ReactDropzone.css"; import { useDropzone } from "react-dropzone"; import icon from "./icon.svg"; export const ReactDropzone = () => { const onDrop = (acceptedFiles) => { // Do something with the files }; const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop }); const files = acceptedFiles.map((file) => (
  • {file.path}
  • )); return (

    Upload Files

    Fast and easy

    {isDragActive ? (

    Drop the files here ...

    ) : (

    Drag 'n' drop some files here, or click to select files

    )}
    {files.length > 0 && ( <>

    Files

      {files}
    )}
    ); }; ================================================ FILE: src/components/libraries/react-xarrows/ReactXarrows.css ================================================ ================================================ FILE: src/components/libraries/react-xarrows/ReactXarrows.jsx ================================================ import React from "react"; import Xarrow, { useXarrow, Xwrapper } from "react-xarrows"; import Draggable from "react-draggable"; const boxStyle = { border: "grey solid 2px", borderRadius: "10px", padding: "5px", }; const DraggableBox = ({ id }) => { const updateXarrow = useXarrow(); return (
    {id}
    ); }; export const ReactXarrows = () => { return (
    ); }; ================================================ FILE: src/components/logins/Login1/Login1.jsx ================================================ import "./styles.css"; import logo from "./logo.svg"; export const Login1 = () => { return (

    Welcome back

    Need an account? Sign up here
    ); }; ================================================ FILE: src/components/logins/Login1/styles.css ================================================ .page.login-1 { display: grid; place-items: center; gap: 50px; margin: 0; height: 100vh; padding: 0 32px; color: #aaaaaa; background: #eff9ff; font-family: "Euclid Circular A", "Poppins"; } @media (width >= 500px) { .page.login-1 { padding: 0; } } .login-1-background { position: fixed; top: -50vmin; left: -50vmin; width: 100vmin; height: 100vmin; border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%; background: #65c8ff; } .login-1-background::after { content: ""; position: inherit; right: -50vmin; bottom: -55vmin; width: inherit; height: inherit; border-radius: inherit; background: #143d81; } .login-1-card { overflow: hidden; position: relative; z-index: 3; width: 94%; margin: 0 20px; padding: 170px 30px 54px; border-radius: 24px; background: #ffffff; text-align: center; box-shadow: 0 100px 100px rgb(0 0 0 / 10%); } .login-1-card::before { content: ""; position: absolute; top: -880px; left: 50%; translate: -50% 0; width: 1000px; height: 1000px; border-radius: 50%; background: #216ce7; } @media (width >= 500px) { .login-1-card { margin: 0; width: 360px; } } .login-1-card > img { position: absolute; top: 30px; left: 50%; translate: -50% 0; width: 64px; height: 64px; } .login-1-card > h2 { font-size: 22px; font-weight: 400; margin: 0 0 38px; color: rgb(0 0 0 / 38%); } .login-1-card form { margin: 0 0 44px; display: grid; gap: 12px; } .login-1-card form :is(input, button) { width: 100%; height: 56px; border-radius: 28px; font-size: 16px; font-family: inherit; } .login-1-card form > input { border: 0; padding: 0 24px; color: #222222; background: #ededed; } .login-1-card form > input::placeholder { color: rgb(0 0 0 / 28%); } .login-1-card form > button { border: 0; color: #f9f9f9; background: #226ce7; display: grid; place-items: center; font-weight: 500; cursor: pointer; } .login-1-card form > footer { color: #a1a1a1; } .login-1-card form > footer > a { color: #216ce7; } ================================================ FILE: src/components/logins/Login2/Login2.jsx ================================================ import "./styles.css"; import logo from "./logo.svg"; import signin from "./signin.svg"; import signup from "./signup.svg"; import { useState } from "react"; const SigninForm = () => (

    Don't have an account? Sign Up.

    By clicking Sign In you agree to our terms and conditions, privacy policy and reusability rules.

    ); const SignupForm = () => (

    Already have an account? Sign In.

    ); const navButtons = [ { name: "signin", label: "Sign In", icon: "check" }, { name: "signup", label: "Sign Up", icon: "add" }, ]; const NavButton = ({ onClick, isActive, label, icon }) => ( ); const CardForms = ({ view }) => (
    ); const CardHero = ({ view }) => (

    Welcome Back.

    Please enter your credentials.

    Join The Crowd.

    Sign up now and get started today.

    ); const CardNav = ({ view, toggleView }) => (
    • {navButtons.map((btn) => (
    • ))}
    ); export const Login2 = () => { const [view, setView] = useState("signin"); const toggleView = () => setView(view === "signin" ? "signup" : "signin"); return (
    ); }; ================================================ FILE: src/components/logins/Login2/styles.css ================================================ .page.login-2-page { --color-primary: #6387ff; --color-dark: #496cf5; --color-muted: hsl(226, 12%, 51%); margin: 0; background: #22262b; background: url("bg.svg") no-repeat; background-size: cover; background-position: center; color: #f9f9f9; height: 100vh; display: grid; place-items: center; overflow: hidden; font-family: "Euclid Circular B"; } .login-2 ul { list-style: none; margin: 0; padding: 0; } .login-2 input, .login-2 button { font-family: inherit; color: inherit; } .login-2 button { padding: 0; cursor: pointer; } .login-2 p { font-size: 12px; margin: 12px 0; } .login-2 p a { color: var(--color-primary); } .login-2 { display: flex; align-content: stretch; width: 660px; height: 360px; background: #242b43; backdrop-filter: blur(20px); box-shadow: 0 20px 80px rgba(0 0 0 / 20%); border-radius: 6px; } .login-2 .card-nav { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; width: 178px; } .login-2 .card-nav .active-bar { position: absolute; top: 33.33%; left: 0; width: 5px; height: 33.33%; border-radius: 6px; background: var(--color-dark); transition: 0.4s ease-out; } .login-2 .card-nav li { flex: 1 1 auto; display: grid; place-items: center; } .login-2 .card-nav li button.active { color: var(--color-primary); } .login-2 .card-nav button { background: transparent; border: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; transition: 0.3s; } .login-2 .card-nav button:not(.active):hover i { scale: 1.1; } .login-2 .card-nav button i { font-size: 24px; transition: 0.3s; } .login-2 .card-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin: -48px 0; flex: 0 0 300px; overflow: hidden; border-radius: 12px; background: var(--color-dark); } .login-2 .card-hero-inner { position: absolute; top: 0; left: 0; right: 0; transition: 0.5s ease-in-out; } .login-2 .card-hero-content { height: 456px; width: 100%; display: flex; flex-direction: column; justify-content: center; } .login-2 h2, .login-2 h3 { text-align: left; font-weight: 400; margin: 0; padding-left: 24px; } .login-2 .card-hero h2 { color: #f9f9f9; margin: 0 0 2px; } .login-2 .card-hero h3 { color: #f9f9f9; opacity: 0.75; font-size: 13px; margin: 0 0 32px; } .login-2 .card-hero img { width: 100%; } .login-2 .card-form { position: relative; overflow: hidden; padding: 24px; width: 400px; } .login-2 .forms { position: absolute; height: 200%; left: 0; top: 0; transition: 0.5s ease-in-out; } .login-2 .card-form form { height: 360px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .login-2 .card-form label { font-size: 13px; color: var(--color-muted); } .login-2 .control { position: relative; } .login-2 .control input { background: rgb(255 255 255 / 4%); border: 0; border-radius: 6px; width: 100%; height: 40px; padding: 0 12px; outline: none; transition: 0.3s; } .login-2 .control input:focus { box-shadow: 0 0 0 2px var(--color-primary); } .login-2 .control input::placeholder { color: #bdbcd2; } .login-2 .control input:focus ~ i { color: var(--color-primary); } .login-2 .control i { color: var(--color-muted); position: absolute; top: 50%; right: 12px; translate: 0 -50%; transition: 0.3s; } .login-2 .card-form form > button { height: 40px; padding: 12px 20px; border-radius: 6px; color: #f9f9f9; letter-spacing: 1px; border: 0; margin-top: 12px; background: var(--color-dark); } .login-2 p.footer { opacity: 0.75; } ================================================ FILE: src/components/logins/Login3/Login3.css ================================================ .page.login-3-page { --gradient: linear-gradient(-35deg, #8d00ff, #365fe7); --muted: #8d889d; background: #1e1b2b; color: #f9f9f9; height: 100vh; display: grid; place-items: center; overflow: hidden; font-family: "Euclid Circular B"; } .login-3 .card { position: relative; overflow: hidden; width: 660px; height: 440px; border-radius: 16px; background: #141317; box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12); } .login-3 .card-bg { position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; width: 50%; background: var(--gradient); translate: 0 0; transition: 0.65s; } .login-3 .card-bg.signin { translate: 100% 0; } .login-3 .hero, .login-3 .form { position: absolute; width: 50%; height: 100%; opacity: 0; visibility: hidden; transition: 0.65s; } .login-3 .form.signup { left: 50%; } .login-3 .hero.signin { left: 50%; translate: 100% 0; } .login-3 .hero.signin.active { translate: 0; } .login-3 .hero.signup { translate: -100% 0; } .login-3 .hero.signup.active { translate: 0; } .login-3 .hero { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 50%; color: #f9f9f9; text-align: center; padding: 0 24px; } .login-3 .form.active, .login-3 .hero.active { opacity: 1; visibility: visible; } .login-3 h2 { margin: 0; font-weight: 500; } .login-3 .form.signin { translate: -100% 0; } .login-3 .form.signin.active { translate: 0; } .login-3 .form.signup { translate: 100% 0; } .login-3 .form.signup.active { translate: 0; } .login-3 .hero p { margin: 0 0 6px; opacity: 0.75; line-height: 1.45; } .login-3 .hero button { padding: 12px 40px; border-radius: 32px; letter-spacing: 1px; font-family: inherit; color: inherit; border: 1px solid #f9f9f9; background: transparent; transition: 0.3s; cursor: pointer; } .login-3 .hero button:hover { color: #2a449a; background: #f9f9f9; } .login-3 .form { background: inherit; z-index: 1; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 32px; } .login-3 .form h2 { font-size: 22px; text-align: center; } .login-3 .sso { width: 100%; display: flex; justify-content: center; gap: 12px; } .login-3 .form form > a { font-size: 14px; margin-top: 10px; color: var(--muted); } .login-3 .sso a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 24%); font-size: 16px; } .login-3 .form form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .login-3 .form p { margin: 0 0 -8px; text-align: center; color: var(--muted); font-size: 12px; } .login-3 .form input { font-family: inherit; border-radius: 10px; border: 0; background: #1f1b2b; padding: 14px 12px; color: inherit; width: 100%; } .login-3 .form input::placeholder { color: #8d889d; } .login-3 .form button { border: 0; padding: 14px 0; border-radius: 32px; font-family: inherit; color: #f9f9f9; width: 160px; margin-top: 10px; background: var(--gradient); } ================================================ FILE: src/components/logins/Login3/Login3.jsx ================================================ import { useState } from "react"; import "./Login3.css"; const SSOButtons = () => ( ); const Hero = ({ type, active, title, text, buttonText, onClick }) => (

    {title}

    {text}

    ); const AuthForm = ({ type, active, title, children }) => (

    {title}

    Or use your email address

    {children}
    ); export const Login3 = () => { const [view, setView] = useState("signup"); const isSignup = view === "signup"; const toggleView = () => setView(isSignup ? "signin" : "signup"); return (
    ); }; ================================================ FILE: src/components/logins/Login4/Login4.css ================================================ .login-4-card * { box-sizing: border-box; } .login-4-page.page { margin: 0; background: #f2f3fe; color: #4b5679; height: 100vh; display: grid; place-items: center; overflow: hidden; font-family: "Euclid Circular B"; } .login-4-card { --gradient: linear-gradient(45deg, #5823c9, #6b50ff); position: relative; overflow: hidden; width: 660px; height: 440px; border-radius: 24px; background: #ffffff; border: 8px solid #ffffff; box-shadow: 0 12px 80px rgba(41, 30, 113, 0.12); } .login-4-card .card-bg { position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; width: 50%; background: var(--gradient); border-radius: 18px; translate: 0 0; transition: 0.65s ease-in-out; } .login-4-card .card-bg.login { translate: 100% 0; } .login-4-card .hero, .login-4-card .form { position: absolute; width: 50%; height: 100%; opacity: 0; visibility: hidden; transition: 0.65s ease-in-out; } .login-4-card .hero.active, .login-4-card .form.active { opacity: 1; visibility: visible; } .login-4-card .form.register { left: 50%; } .login-4-card .hero.login { left: 50%; translate: 100% 0; } .login-4-card .hero.login.active { translate: 0; } .login-4-card .hero.register { translate: -100% 0; } .login-4-card .hero.register.active { translate: 0; } .login-4-card .hero { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 50%; color: #f9f9f9; text-align: center; padding: 0 24px; } .login-4-card h2 { margin: 0; font-weight: 500; } .login-4-card .form.login { translate: 100% 0; } .login-4-card .form.login.active { translate: 0; } .login-4-card .form.register { translate: -100% 0; } .login-4-card .form.register.active { translate: 0; } .login-4-card .hero p { margin: 0 0 6px; opacity: 0.85; line-height: 1.45; } .login-4-card .hero button { padding: 12px 40px; border-radius: 32px; letter-spacing: 1px; font-family: inherit; color: inherit; border: 1px solid #f9f9f9; background: transparent; transition: 0.3s; cursor: pointer; } .login-4-card .hero button:hover { color: #3c23c9; background: #f9f9f9; } .login-4-card .form { background: #ffffff; z-index: 1; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 32px; } .login-4-card .form h2 { font-size: 22px; text-align: center; } .login-4-card .sso { width: 100%; display: flex; justify-content: center; gap: 12px; } .login-4-card .form form > a { font-size: 14px; margin-top: 10px; opacity: 0.5; } .login-4-card .sso a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f3fe; font-size: 16px; } .login-4-card .form form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .login-4-card .form p { margin: 0 0 -8px; text-align: center; opacity: 0.5; font-size: 12px; } .login-4-card .form input { font-family: inherit; border-radius: 10px; border: 0; background: #f2f3fe; padding: 14px 12px; color: inherit; width: 100%; } .login-4-card .form input::placeholder { color: #96959e; } .login-4-card .form button { border: 0; padding: 14px 0; border-radius: 32px; font-family: inherit; letter-spacing: 1px; color: #f9f9f9; width: 160px; margin-top: 10px; background: var(--gradient); box-shadow: 0 10px 40px rgb(30 61 161 / 32%); } ================================================ FILE: src/components/logins/Login4/Login4.jsx ================================================ import { useState } from "react"; import "./Login4.css"; const CardBackground = ({ activeView }) => { return
    ; }; const SocialButtons = () => { return (
    ); }; const HeroPanel = ({ type, activeView, title, text, buttonText, onToggle }) => { return (

    {title}

    {text}

    ); }; const RegisterForm = ({ activeView }) => { return (

    Sign Up

    Or use your email address

    ); }; const LoginForm = ({ activeView }) => { return (

    Login

    Or use your email address

    Forgot password?
    ); }; export const Login4 = () => { const [activeView, setActiveView] = useState("login"); const toggleView = () => { setActiveView(activeView === "login" ? "register" : "login"); }; return (
    ); }; ================================================ FILE: src/components/logins/Login5/Login5.jsx ================================================ import "./styles.css"; import logo from "./logo.svg"; const Textbox = ({ placeholder, type, icon }) => (
    ); export const Login5 = () => { return (

    Welcome back!

    Forgot password?
    ); }; ================================================ FILE: src/components/logins/Login5/styles.css ================================================ .page.login-5 { display: grid; place-items: center; gap: 50px; margin: 0; height: 100vh; padding: 0 32px; color: #f9f9f9; background: #17171f; font-family: "Euclid Circular A", "Poppins"; } @media (width >= 500px) { .page.login-5 { padding: 0; } } .login-5-background { position: fixed; top: -55vmin; left: -55vmin; width: 110vmin; height: 110vmin; border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%; background: #6a65ff; } .login-5-background::after { content: ""; position: inherit; right: -55vmin; bottom: -55vmin; width: inherit; height: inherit; border-radius: inherit; background: #3c85fe; } .login-5-card { overflow: hidden; position: relative; z-index: 3; width: 94%; margin: 0 20px; padding: 84px 30px 54px; border-radius: 48px; border: 6px solid rgb(255 255 255 / 4%); background: rgb(255 255 255 / 4%); backdrop-filter: blur(44px); text-align: center; box-shadow: 0 100px 100px rgb(0 0 0 / 10%); } @media (width >= 450px) { .login-5-card { margin: 0; width: 360px; } } .login-5-card > img { width: 100px; height: 100px; margin-bottom: 30px; border: 6px solid rgb(255 255 255 / 14%); border-radius: 50%; padding: 12px; } .login-5-card > h2 { font-size: 20px; font-weight: 400; margin: 0 0 32px; } .login-5-card form { margin: 0; display: grid; gap: 12px; } .login-5-textbox { position: relative; } .login-5-textbox i { position: absolute; top: 50%; left: 20px; translate: 0 -50%; } .login-5-card form :is(input, button) { width: 100%; height: 56px; border-radius: 28px; font-size: 16px; font-family: inherit; outline: none; transition: 0.3s; } .login-5-card form :is(input, button):focus { box-shadow: 0 0 0 3px #6a65ff; } .login-5-textbox input { border: 0; padding: 0 24px 0 44px; color: #f9f9f9; background: rgb(255 255 255 / 4%); } .login-5-card form > input::placeholder { color: rgb(255 255 255 / 32%); } .login-5-card form > button { border: 0; color: #f9f9f9; background: rgb(255 255 255 / 8%); display: grid; place-items: center; font-weight: 500; cursor: pointer; } .login-5-card form > button:hover { background: #6a65ff; } .login-5-card > footer { color: rgb(255 255 255 / 38%); } .login-5-card > form > a { opacity: 0.75; display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 12px; } .login-5-card > footer > a { color: #f9f9f9; text-decoration: none; } ================================================ FILE: src/components/logins/Login6/Login6.jsx ================================================ import { useRef } from "react"; import "./styles.css"; import logo from "./logo.svg"; import googleIcon from "./google.svg"; import appleIcon from "./apple.svg"; import { useWebGLBackground } from "./useWebGLBackground"; const Textbox = ({ id, type, label }) => (
    ); export const Login6 = () => { const canvasRef = useRef(null); useWebGLBackground(canvasRef); return (
    logo

    Welcome back!

    or
    Forgot password?

    Don't have an account? Register here

    ); }; ================================================ FILE: src/components/logins/Login6/styles.css ================================================ .page.login-6 { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at center, #030b20 0%, #07070f 70%); color: #ffffff; font-family: "Euclid Circular B", "Poppins", sans-serif; padding: 24px 16px; } .login-6-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .login-6-card { position: relative; z-index: 2; background: radial-gradient( ellipse at 50% 0%, rgba(37, 45, 76, 0.52), rgba(2, 4, 18, 0.44) ); border: 1px solid rgba(40, 140, 255, 0.16); box-shadow: inset 0 1px 0 rgba(80, 170, 255, 0.09), 0 48px 96px -24px rgba(0, 0, 0, 0.8); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-radius: 48px; padding: 64px 40px 52px; width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; } .login-6-card > img { width: 120px; margin: 0 0 40px; } .login-6-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; background: linear-gradient(160deg, #ffffff 20%, #85c8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .login-6-card h3 { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(80, 160, 255, 0.45); margin: 0 0 40px; } .login-6-form { display: grid; gap: 14px; width: 100%; margin: 0 0 18px; } .login-6-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .login-6-sso-btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(20, 100, 255, 0.05); border: 1px solid rgba(30, 130, 255, 0.12); color: rgba(255, 255, 255, 0.6); font-size: 14px; cursor: pointer; } .login-6-sso-btn:hover { background: rgba(20, 100, 255, 0.09); border-color: rgba(30, 130, 255, 0.22); color: rgba(255, 255, 255, 0.85); } .login-6-sso-btn:active { transform: scale(0.98); } .login-6-sso-btn img { display: block; width: 18px; height: 18px; flex-shrink: 0; } .login-6-or { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(80, 160, 255, 0.4); } .login-6-or::before, .login-6-or::after { content: ""; flex: 1; height: 1px; background: rgba(40, 140, 255, 0.18); } .login-6-card :is(input, button) { height: 56px; font-family: inherit; font-size: 15px; padding: 0 16px; border-radius: 12px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .login-6-textbox { position: relative; } .login-6-textbox label { transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: absolute; top: 50%; left: 16px; translate: 0 -50%; transform-origin: 0 50%; pointer-events: none; color: rgba(80, 160, 255, 0.42); font-size: 15px; } .login-6-textbox input { width: 100%; padding-top: 12px; background: rgba(20, 100, 255, 0.05); border: 1px solid rgba(30, 130, 255, 0.12); outline: none; color: #ffffff; box-shadow: 0 0 0 2px transparent; } .login-6-textbox input:hover { background: rgba(20, 100, 255, 0.09); border-color: rgba(30, 130, 255, 0.22); } .login-6-textbox input:focus { background: rgba(20, 100, 255, 0.11); border-color: transparent; box-shadow: 0 0 0 2px #1e85ff, 0 0 24px rgba(30, 133, 255, 0.22); } .login-6-textbox input:is(:focus, :not(:invalid)) ~ label { scale: 0.72; translate: 0 -118%; } .login-6-form button[type="submit"] { background: linear-gradient(135deg, #2d9bff 0%, #0d4fe8 100%); color: #e8f4ff; border: none; font-weight: 400; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; margin-top: 4px; } .login-6-form button[type="submit"]:hover { background: linear-gradient(135deg, #46aaff 0%, #1a5ef5 100%); } .login-6-form button:active { transform: scale(0.98); background: linear-gradient(135deg, #1a8aee 0%, #0840cc 100%); } .login-6-card > a { font-size: 13px; color: rgba(80, 160, 255, 0.42); text-decoration: none; transition: color 0.2s; cursor: pointer; } .login-6-card > a:hover { color: rgba(130, 190, 255, 0.8); } .login-6-footer { margin: 40px 0 0; font-size: 13px; color: rgba(80, 160, 255, 0.38); } .login-6-footer a { color: #1e85ff; text-decoration: none; transition: color 0.2s; } .login-6-footer a:hover { color: #55aaff; } ================================================ FILE: src/components/logins/Login6/useWebGLBackground.js ================================================ import { useEffect } from "react"; const VERT = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; const FRAG = ` precision highp float; uniform float time; uniform vec2 resolution; void main() { vec4 abyssColor = vec4(0.0, 0.0, 0.0, 1.0); vec4 tunnelColor = vec4(0.04, 0.52, 1.0, 1.0); vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y * 0.6; float r = length(uv); float y = fract(r / 0.005 / (r - 0.01) + time); y = smoothstep(0.01, 4.0, y); float x = length(uv); x = smoothstep(0.5, 0.01, x); gl_FragColor = mix(tunnelColor, abyssColor, x) * y; } `; export const useWebGLBackground = (canvasRef) => { useEffect(() => { const canvas = canvasRef.current; const gl = canvas.getContext("webgl"); if (!gl) return; const compile = (type, src) => { const shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); return shader; }; const program = gl.createProgram(); const vs = compile(gl.VERTEX_SHADER, VERT); const fs = compile(gl.FRAGMENT_SHADER, FRAG); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); gl.useProgram(program); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW, ); const posAttr = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(posAttr); gl.vertexAttribPointer(posAttr, 2, gl.FLOAT, false, 0, 0); const timeLoc = gl.getUniformLocation(program, "time"); const resLoc = gl.getUniformLocation(program, "resolution"); const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); }; resize(); window.addEventListener("resize", resize); const startTime = Date.now(); let rafId; const render = () => { gl.uniform1f(timeLoc, (Date.now() - startTime) / 1000); gl.uniform2f(resLoc, canvas.width, canvas.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); rafId = requestAnimationFrame(render); }; render(); return () => { cancelAnimationFrame(rafId); window.removeEventListener("resize", resize); gl.deleteProgram(program); gl.deleteShader(vs); gl.deleteShader(fs); gl.deleteBuffer(buf); }; }, []); }; ================================================ FILE: src/components/logins/index.js ================================================ export * from "./Login1/Login1"; export * from "./Login2/Login2"; export * from "./Login3/Login3"; export * from "./Login4/Login4"; export * from "./Login5/Login5"; export * from "./Login6/Login6"; ================================================ FILE: src/components/modals/Modal1/Modal1.jsx ================================================ import { useState } from "react"; import "./styles.css"; import logo from "./logo.svg"; export const Modal1 = () => { const [isOpen, setIsOpen] = useState(false); const toggleModal = () => setIsOpen(!isOpen); return (

    Sign Up

    Try Hologram today

    account_circle
    lock

    No credit card information required

    ); }; ================================================ FILE: src/components/modals/Modal1/styles.css ================================================ .page.modal-1-page { background: #ffffff; } .container { max-width: 700px; margin: 0 auto; } .modal-1-footer { position: fixed; left: 0; bottom: 0; right: 0; height: 50vh; padding-bottom: 20px; background: #0a1535; color: #f9f9f9; } .modal-1-footer article { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 50px 40px; margin: -99px 20px 20px; border-radius: 10px; background: linear-gradient(90deg, #773ecb, #9f63ff); } .modal-1-footer article h2 { font-weight: 400; color: rgb(255 255 255 / 70%); } .signup-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 0 20px; width: 100%; height: 56px; background: #161022; border: 0; border-radius: 6px; color: #f9f9f9; font-family: inherit; font-size: 16px; } .modal-1-footer section { padding: 0 50px; } .modal-1-footer section.top { padding-top: 30px; margin-bottom: 48px; } .modal-1-footer section.top img { display: block; height: 30px; margin: 0 0 30px; } .modal-1-footer section.top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); } @media (width > 480px) { .modal-1-footer article button { width: 70%; } .modal-1-footer section.top ul { padding-right: 10%; } } @media (width > 600px) { .modal-1-footer article { flex-direction: row; min-height: 140px; margin: -70px 20px 20px; padding: 30px 50px 30px; } .modal-1-footer article button { width: auto; padding: 0 20px 0 24px; } .modal-1-footer section.top ul { grid-template-columns: repeat(4, 1fr); padding-right: 0; } } .modal-1-footer section.top ul li a { display: block; margin-bottom: 18px; color: rgb(255 255 255 / 90%); } .modal-1-footer section.top h3 { color: rgb(255 255 255 / 40%); font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; margin-bottom: 20px; } .modal-1-overlay, .modal-1-modal { position: fixed; opacity: 0; visibility: hidden; transition: 0.5s; } @keyframes overlay-in { 0% { scale: 0 0.004; } 33% { scale: 1 0.004; } 66%, 100% { scale: 1 1; } } .modal-1-overlay { z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 75%); display: grid; place-items: center; } .modal-1-overlay.open { visibility: visible; opacity: 1; animation: overlay-in 1s both; } @keyframes modal-in { 0%, 66% { opacity: 0; visibility: hidden; translate: -50% -40%; } 100% { opacity: 1; visibility: visible; } } .modal-1-modal { z-index: 2; width: 430px; top: 50%; left: 50%; background: #ffffff; border-radius: 12px; padding: 0 40px 50px; translate: -50% -50%; box-shadow: 0 10px 30px rgb(0 0 0 / 24%); } .modal-1-overlay.open .modal-1-modal { opacity: 1; visibility: visible; animation: modal-in 1s; } .modal-1-modal header { background: linear-gradient(90deg, #773ecb, #9f63ff); margin: -85px -20px 30px; border-radius: 12px; height: 170px; display: flex; justify-content: center; flex-direction: column; padding-left: 40px; box-shadow: 0 16px 30px rgb(0 0 0 / 12%); } .modal-1-modal h2 { margin-bottom: 10px; font-size: 29px; } .modal-1-modal h3 { opacity: 0.45; font-weight: 400; } .modal-1-modal form { display: grid; gap: 16px; } .modal-1-modal .textbox { position: relative; width: 100%; height: 56px; display: flex; align-items: center; } .modal-1-modal .textbox span { position: relative; z-index: 1; left: 16px; font-size: 20px; color: #96939c; pointer-events: none; } .modal-1-modal input { position: absolute; top: 0; left: 0; right: 0; border: 0; background: #ececec; height: 56px; border-radius: 6px; font-family: inherit; padding: 0 16px 0 44px; font-size: 16px; } .modal-1-modal input::placeholder { color: #96939c; } .modal-1-modal > p { color: #96939c; margin: 30px 0 0; } ================================================ FILE: src/components/modals/Modal2/Modal2 copy.css ================================================ .overlay, .dialog { position: fixed; } @keyframes overlay-in { 0% { scale: 0 0.003; } 33%, 36% { scale: 1 0.003; } 66%, 100% { scale: 1 1; } } .overlay { z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 75%); display: grid; place-items: center; } .overlay.open { animation: overlay-in 1s both; } .overlay.closed { animation: overlay-in 1s 0.25s reverse both; } .overlay.default { scale: 0; } @keyframes modal-in { 0% { opacity: 0; visibility: hidden; scale: 0.5; } 100% { opacity: 1; visibility: visible; scale: 1; } } .dialog { z-index: 2; width: 380px; top: 50%; left: 50%; background: #ffffff; border-radius: 12px; padding: 0 40px 50px; translate: -50% -50%; box-shadow: 0 10px 30px rgb(0 0 0 / 24%); } .dialog.default { opacity: 0; visibility: hidden; } .dialog.open { animation: modal-in 0.5s 0.6s both; } .dialog.closed { animation: modal-in 0.5s reverse both; } .dialog header { background: linear-gradient(90deg, #9d50bb, #6e48aa); margin: -85px -20px 30px; border-radius: 12px; height: 170px; display: flex; justify-content: center; flex-direction: column; padding-left: 40px; box-shadow: 0 16px 30px rgb(0 0 0 / 12%); } .dialog header h2 { margin-bottom: 10px; font-size: 29px; } .dialog header h3 { opacity: 0.45; font-weight: 400; } ================================================ FILE: src/components/modals/Modal2/Modal2.css ================================================ .modal-2-overlay, .modal-2-modal { position: fixed; } @keyframes overlay-in { 0% { scale: 0 0.003; } 33%, 36% { scale: 1 0.003; } 66%, 100% { scale: 1 1; } } .modal-2-overlay { z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 75%); display: grid; place-items: center; } .modal-2-overlay.open { animation: overlay-in 1s both; } .modal-2-overlay.closed { animation: overlay-in 1s 0.25s reverse both; } .modal-2-overlay.default { scale: 0; } @keyframes modal-in { 0% { opacity: 0; visibility: hidden; scale: 0.5; } 100% { opacity: 1; visibility: visible; scale: 1; } } .modal-2-modal { z-index: 2; width: 380px; top: 50%; left: 50%; background: #ffffff; border-radius: 12px; padding: 0 40px 50px; translate: -50% -50%; box-shadow: 0 10px 30px rgb(0 0 0 / 24%); } .modal-2-modal.default { opacity: 0; visibility: hidden; } .modal-2-modal.open { animation: modal-in 0.5s 0.6s both; } .modal-2-modal.closed { animation: modal-in 0.5s reverse both; } .modal-2-modal header { background: linear-gradient(90deg, #9d50bb, #6e48aa); margin: -85px -20px 30px; border-radius: 12px; height: 170px; display: flex; justify-content: center; flex-direction: column; padding-left: 40px; box-shadow: 0 16px 30px rgb(0 0 0 / 12%); } .modal-2-modal header h2 { margin-bottom: 10px; font-size: 29px; } .modal-2-modal header h3 { opacity: 0.45; font-weight: 400; } ================================================ FILE: src/components/modals/Modal2/Modal2.jsx ================================================ import { createPortal } from "react-dom"; import "./Modal2.css"; export const Modal2 = ({ title, subtitle, modalContent, toggleModal, isOpen, }) => { const open = isOpen === null ? "default" : isOpen ? "open" : "closed"; const Overlay = () => (
    ); const Dialog = () => (
    e.stopPropagation()} >

    {title}

    {subtitle}

    {modalContent}
    ); return ( <> {createPortal(, document.body)} {createPortal(, document.body)} ); }; ================================================ FILE: src/components/modals/Modal2/Modal2Example.css ================================================ .page.modal-2-page { background: #ffffff; } .page.modal-2-page .container { max-width: 700px; margin: 0 auto; } .modal-2-footer { position: fixed; left: 0; bottom: 0; right: 0; height: calc(50vh + 1px); padding-bottom: 20px; background: #161022; color: #e5e2e9; } .modal-2-footer article { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 40px 40px; margin: -99px 20px 20px; border-radius: 10px; background: linear-gradient(90deg, #9d50bb, #6e48aa); } .modal-2-footer article h2 { font-weight: 400; color: #f9f9f9; } .signup-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 0 20px; width: 100%; height: 56px; background: #161022; border: 0; border-radius: 6px; color: #e5e2e9; font-family: inherit; font-size: 16px; cursor: pointer; } .modal-2-footer section { padding: 0 50px; } .modal-2-footer section.top { padding-top: 30px; margin-bottom: 48px; } .modal-2-footer section.top img { display: block; height: 30px; margin: 0 0 30px; } .modal-2-footer section.top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); } @media (width > 480px) { .modal-2-footer article button { width: 70%; } .modal-2-footer section.top ul { padding-right: 10%; } } @media (width > 600px) { .modal-2-footer article { flex-direction: row; min-height: 140px; margin: -70px 20px 20px; padding: 30px 50px 30px; } .modal-2-footer article button { width: auto; padding: 0 20px 0 24px; } .modal-2-footer section.top ul { grid-template-columns: repeat(4, 1fr); padding-right: 0; } } .modal-2-footer section.top ul li a { display: block; margin-bottom: 18px; color: #e5e2e9; } .modal-2-footer section.top h3 { color: #9a90a9; font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; margin-bottom: 20px; } .modal-2-modal form { display: grid; gap: 16px; } .modal-2-modal input { border: 0; background: #ececec; height: 56px; border-radius: 6px; font-family: inherit; padding: 0 20px; font-size: 16px; } .modal-2-modal input::placeholder { color: #96939c; } .modal-2-modal > p { color: #96939c; margin: 30px 0 0; text-align: center; } ================================================ FILE: src/components/modals/Modal2/Modal2Example.jsx ================================================ import { useState } from "react"; import "./Modal2Example.css"; import { Modal2 } from "./Modal2"; import logo from "./logo.svg"; export const Modal2Example = () => { const [isOpen, setIsOpen] = useState(null); const toggleModal = () => setIsOpen(!isOpen); return (

    No credit card information required

    } />
    ); }; ================================================ FILE: src/components/modals/index.js ================================================ export * from "./Modal1/Modal1"; export * from "./Modal2/Modal2"; export * from "./Modal2/Modal2Example"; ================================================ FILE: src/components/navbars/Navbar1/Navbar1.css ================================================ .page.navbar-1-page { background: #09090b; color: #faf9f5; font-family: "Euclid Circular A", "Poppins"; padding-top: 72px; margin: 0; } .navbar-1 { position: fixed; z-index: 1; top: 0; left: 0; translate: 0 -72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; width: 100%; height: 72px; box-shadow: 0 10px 20px rgb(0 0 0 / 10%); background: #4f52ff; transition: 0.3s; } .navbar-1.visible { top: 0; translate: 0; } .navbar-1 > h1 { width: 36px; height: 36px; background: #f9f9f9; color: #4f52ff; display: grid; place-items: center; border-radius: 50%; } .navbar-1 .nav-items { display: flex; align-items: center; gap: 16px; } .navbar-1 .nav-items > a { text-decoration: none; font-weight: 400; color: rgb(255 255 255 / 96%); height: 72px; display: grid; place-items: center; } .navbar-1 .nav-items > a:hover { color: rgb(255 255 255 / 96%); } .page.navbar-1-page h2 { font-size: 20px; margin: 0 0 4px; cursor: default; } .page.navbar-1-page section { display: flex; align-items: center; gap: 40px; padding: 100px 60px; } .page.navbar-1-page p { opacity: 0.6; } .page.navbar-1-page section.shaded { background: #0e0e11; } .page.navbar-1-page section > img { width: 200px; height: 200px; } .page.navbar-1-page section.shaded > img { padding: 20px; } .page.navbar-1-page section > p { line-height: 1.7; } ================================================ FILE: src/components/navbars/Navbar1/Navbar1.jsx ================================================ import { useEffect, useRef, useState } from "react"; import image1 from "./1.svg"; import image2 from "./2.svg"; import image3 from "./3.svg"; import image4 from "./4.svg"; import image5 from "./5.svg"; import image6 from "./6.svg"; import "./Navbar1.css"; export const Navbar1 = () => { const [isVisible, setIsVisible] = useState(true); const lastScrollTop = useRef(0); useEffect(() => { const handleScroll = () => { var { scrollY } = window; if (scrollY > lastScrollTop.current) { setIsVisible(false); } else if (scrollY < lastScrollTop.current) { setIsVisible(true); } // else was horizontal scroll lastScrollTop.current = scrollY <= 0 ? 0 : scrollY; }; window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); return (

    About

    Discover Fuzion, where innovation meets excellence. With a dedicated team, we redefine standards to deliver top-notch solutions.

    Services

    Explore tailored solutions at Fuzion. From consulting to technology, we propel your business forward.

    Products

    Experience innovation with Fuzion's exceptional products. Crafted for performance, each reflects our commitment to excellence.

    Contact

    Ready to bring ideas to life? Connect with us today. Whether questions or collaboration, we're here to assist.

    My Skills

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse itaque corporis optio unde quia, modi pariatur ea magni dolorum?

    My Skills

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse itaque corporis optio unde quia, modi pariatur ea magni dolorum?

    My Skills

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse itaque corporis optio unde quia, modi pariatur ea magni dolorum?

    ); }; ================================================ FILE: src/components/navbars/Navbar2/Navbar2.css ================================================ .page.navbar-2-page { background: #f3f3f6; font-family: "Euclid Circular B", "Poppins"; } .navbar-2 { --color-primary: #fe5495; position: fixed; top: 0; left: 0; z-index: 1; display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 78px; width: 100%; background: #ffffff; color: #5b5968; box-shadow: 0 10px 50px rgb(0 0 0 / 2%); } .navbar-2 a { padding: 0 12px; display: flex; align-items: center; cursor: pointer; width: 100%; height: 72px; font-size: 15px; } .navbar-2 .avatar { height: 46px; padding: 1px; border-radius: 50%; border: 1px solid #8f44fd; } .navbar-2 > img { height: 32px; } .navbar-2-menu { display: flex; align-items: center; justify-content: center; font-weight: 500; } .navbar-2-dropdown { position: fixed; z-index: 1; top: 86px; left: 0; width: 120px; padding: 6px 0; display: grid; opacity: 0; visibility: hidden; /* transition: 0.3s; */ border-radius: 12px; background: #ffffff; box-shadow: 0 0 30px rgb(0 0 0 / 4%); transition: 0.3s; } .navbar-2 a:is(:hover, .active) { color: var(--color-primary); } .navbar-2-dropdown.visible { opacity: 1; visibility: visible; } .navbar-2-dropdown::after { content: ""; position: absolute; top: -12px; width: 100%; height: 50px; } .navbar-2-dropdown > a { position: relative; z-index: 1; height: 40px; font-size: 14px; white-space: nowrap; } .navbar-2-search { flex: 1 1 auto; position: relative; margin-left: 12px; } .navbar-2-search input { border: 0; border-radius: 52px; height: 52px; width: 100%; background: #f3f3f6; padding-left: 18px; padding-right: 36px; font-size: 14.75px; font-family: inherit; } .navbar-2-search button { border: 0; display: grid; place-items: center; height: 34px; width: 34px; border-radius: 50%; background: var(--color-primary); color: #f9f9f9; position: absolute; top: 50%; right: 8px; translate: 0 -50%; font-size: 18px; } .navbar-2-search button span { font-size: 20px; } .navbar-2-search input::placeholder { color: #9b98b1; } ================================================ FILE: src/components/navbars/Navbar2/Navbar2.jsx ================================================ import { useEffect, useRef, useState } from "react"; import logo from "./logo.svg"; import avatar from "./avatar.png"; import "./Navbar2.css"; const items = [ { name: "Explore", items: ["Following", "Popular", "Noteworthy"], }, { name: "Talent", items: ["Browse", "Profiles", "Services", "Jobs"], }, { name: "Blog", items: ["News", "Articles", "Community"], }, ]; const Link = ({ item, isActive, onHover }) => { const linkRef = useRef(); const handleHover = () => { const rect = linkRef.current.getBoundingClientRect(); onHover(item, `${rect.x}px`); }; return ( {item.name} ); }; const Search = () => (
    ); const CoolNav = ({ items }) => { const [translateX, setTranslateX] = useState("0"); const [activeItem, setActiveItem] = useState(null); const [isHidden, setIsHidden] = useState(true); const handleLinkHover = (item, x) => { setActiveItem(item); setTranslateX(x); }; const handleMouseEnter = () => { setIsHidden(false); }; const handleMouseLeave = () => { setIsHidden(true); }; return (
    {items.map((item, index) => ( ))}
    {activeItem?.items?.map((link) => ( {link} ))}
    ); }; export const Navbar2 = () => { return (
    ); }; ================================================ FILE: src/components/navbars/Navbar3/Navbar3.css ================================================ .page.navbar-3-page { background: #f8f7ff; font-family: "Euclid Circular A", "Poppins"; } .navbar-3 { --color-primary: #6f5bf3; position: fixed; top: 0; left: 0; z-index: 1; display: flex; align-items: center; padding: 0 20px; height: 72px; width: 100%; background: #ffffff; color: #5b5968; box-shadow: 0 10px 50px rgb(0 0 0 / 2%); } .navbar-3 a { padding: 0 12px; display: flex; align-items: center; cursor: pointer; width: 100%; height: 72px; font-size: 15px; } .navbar-3 > img { margin: 0 24px 0 0; height: 36px; width: 36px; } .navbar-3-menu { display: flex; align-items: center; justify-content: center; font-weight: 500; } .navbar-3-dropdown { position: fixed; z-index: 1; top: 82px; left: 0; height: 0; width: 120px; padding: 6px 0; overflow: hidden; display: grid; opacity: 0; visibility: hidden; transition: 0.3s; border-radius: 6px; background: #ffffff; box-shadow: 0 0 30px rgb(0 0 0 / 4%); transition: 0.3s; } .navbar-3 a:is(:hover, .active) { color: var(--color-primary); } .navbar-3-dropdown.visible { opacity: 1; visibility: visible; height: max-content; } .navbar-3-dropdown::after { content: ""; position: absolute; inset: 0; top: -12px; } .navbar-3-dropdown > a { position: relative; z-index: 1; height: 40px; font-size: 14px; white-space: nowrap; } .navbar-3-search { position: relative; margin-left: auto; } .navbar-3-search span { position: absolute; top: 50%; left: 12px; translate: 0 -50%; font-size: 18px; } .navbar-3-search input { border: 0; border-radius: 6px; height: 36px; width: 100%; max-width: 200px; background: #f6f5fd; padding-left: 36px; font-size: 15px; } .navbar-3-search span, .navbar-3-search input::placeholder { color: #9b98b1; } ================================================ FILE: src/components/navbars/Navbar3/Navbar3.jsx ================================================ import { useRef, useState } from "react"; import avatar from "./avatar.png"; import "./Navbar3.css"; const items = [ { name: "About", }, { name: "Skills", items: ["UI/UX", "Development", "Design"], }, { name: "Projects", items: ["Chatbot", "Calculator", "Weather"], }, { name: "Work", items: ["Portfolio", "Resume", "GitHub"], }, ]; const Link = ({ item, activeItem, onHover }) => { const linkRef = useRef(); const handleHover = () => { const rect = linkRef.current.getBoundingClientRect(); onHover(item, `${rect.x}px`); }; return ( {item.name} ); }; const Search = () => (
    search
    ); export const Navbar3 = () => { const [translateX, setTranslateX] = useState("0"); const [activeItem, setActiveItem] = useState(null); const handleLinkHover = (item, x) => { setActiveItem(item || null); setTranslateX(x); }; return (
    ); }; ================================================ FILE: src/components/navbars/Navbar4/Navbar4.css ================================================ .navbar-4-page { --color-primary: #5c48cf; --gradient: linear-gradient(to right, var(--color-primary), #485acf); background: #202022; font-family: "Euclid Circular A", "Poppins"; color: #f9f9f9; margin: 0; height: 100vh; display: grid; place-items: center; } .navbar-4 { position: fixed; top: 6px; left: 0; right: 0; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: #161618; box-shadow: 0 20px 40px rgb(0 0 0 / 12%); } .navbar-4 img { height: 32px; } .navbar-4 .end { width: 120px; } .navbar-4 .end:last-child { text-align: right; color: #7f7f80; } .navbar-4 nav { position: relative; font-weight: 400; font-size: 0; display: flex; padding: 0; width: 80%; } .navbar-4 nav .item { font-size: 15px; display: inline-block; position: relative; padding: 0 20px; cursor: pointer; z-index: 5; min-width: 25%; height: 60px; line-height: 60px; text-align: center; opacity: 0.7; transition: 0.3s; } .navbar-4 .item:hover { opacity: 1; } .navbar-4 .dropdown { overflow: hidden; list-style: none; position: absolute; padding: 0; width: 100%; left: 0; top: 62px; } .navbar-4 .dropdown > div { translate: 0 -100%; transition: all 0.5s 0.1s; position: relative; } .dropdown a { display: block; padding: 0; width: 100%; height: 40px; line-height: 40px; font-size: 14px; background: #161618; color: #7f7f80; transition: background 0.1s; } .navbar-4 .dropdown a:hover { background: var(--gradient); color: inherit; } .navbar-4 .underline { height: 5px; background: var(--gradient); position: absolute; bottom: 0; width: 25%; z-index: 2; pointer-events: none; transition: 0.35s; } .navbar-4 nav .item:hover > .dropdown > div { translate: 0; } ================================================ FILE: src/components/navbars/Navbar4/Navbar4.jsx ================================================ import { useState } from "react"; import "./Navbar4.css"; import logo from "./logo.svg"; const navItems = [ { name: "Docs", }, { name: "Guides", }, { name: "Demos", items: ["React", "Svelte", "Vue"], }, { name: "Issues", }, ]; const NavItem = ({ item, onHover }) => ( {item.name} {!!item.items && ( )} ); export const Navbar4 = () => { const [activeItem, setActiveItem] = useState(null); const onHover = (index) => setActiveItem(index); return (
    v1.0.2
    ); }; ================================================ FILE: src/components/navbars/index.js ================================================ export * from "./Navbar1/Navbar1"; export * from "./Navbar2/Navbar2"; export * from "./Navbar3/Navbar3"; export * from "./Navbar4/Navbar4"; ================================================ FILE: src/components/parallax/index.js ================================================ export * from "./parallax-1/Parallax1"; export * from "./parallax-2/Parallax2"; ================================================ FILE: src/components/parallax/parallax-1/Parallax1.jsx ================================================ import { useState, useEffect } from "react"; import "./styles.css"; export const Parallax1 = () => { const [scrollPosition, setScrollPosition] = useState(0); const handleScroll = () => setScrollPosition(window.scrollY); useEffect(() => { window.addEventListener("scroll", handleScroll, { passive: true }); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return (

    Parallax

    What is parallax?

    Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or half-angle of inclination between those two lines. Due to foreshortening, nearby objects show a larger parallax than farther objects, so parallax can be used to determine distances.

    Parallax also affects optical instruments such as rifle scopes, binoculars, microscopes, and twin-lens reflex cameras that view objects from slightly different angles. Many animals, along with humans, have two eyes with overlapping visual fields that use parallax to gain depth perception; this process is known as stereopsis. In computer vision the effect is used for computer stereo vision, and there is a device called a parallax rangefinder that uses it to find the range, and in some variations also altitude to a target.

    Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or half-angle of inclination between those two lines. Due to foreshortening, nearby objects show a larger parallax than farther objects, so parallax can be used to determine distances.

    Parallax also affects optical instruments such as rifle scopes, binoculars, microscopes, and twin-lens reflex cameras that view objects from slightly different angles. Many animals, along with humans, have two eyes with overlapping visual fields that use parallax to gain depth perception; this process is known as stereopsis. In computer vision the effect is used for computer stereo vision, and there is a device called a parallax rangefinder that uses it to find the range, and in some variations also altitude to a target.

    ); }; ================================================ FILE: src/components/parallax/parallax-1/styles.css ================================================ .page.parallax-1-page { background: #0e0d0e; height: 100%; font-family: "Euclid Circular A", "Poppins"; } * { box-sizing: border-box; } .parallax-banner { display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: url("./bg.png"); background-size: cover; background-repeat: no-repeat; background-position: 50% 70%; height: 600px; width: 100vw; transition: 0.05s linear; } .parallax-banner h2 { font-size: 48px; color: #f8f8f8; padding-top: 0; margin-top: 0; margin-bottom: 10px; } .parallax-banner button { border: 0; background: #ffffff; color: #222222; padding: 10px 24px; border-radius: 30px; font-family: inherit; font-size: 16px; font-weight: 600; } .parallax-container { padding: 0 10%; } .parallax-banner h2 { margin-top: 0; margin-bottom: 40px; padding-top: 60px; } ================================================ FILE: src/components/parallax/parallax-2/Parallax2.css ================================================ .page.parallax-2-page { margin: 0; background: #6a8faa; font-family: "Euclid Circular A", "Poppins"; } .parallax-2-page section { position: relative; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } .parallax-2-page .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; filter: brightness(0.68); } .parallax-2-page h1 { color: white; text-shadow: 1px 1px 3px black; z-index: 1; font-size: 3em; font-weight: 400; } ================================================ FILE: src/components/parallax/parallax-2/Parallax2.jsx ================================================ import { useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/all"; import { useGSAP } from "@gsap/react"; import "./Parallax2.css"; import image1 from "./1.jpg"; import image2 from "./2.jpg"; import image3 from "./3.jpg"; gsap.registerPlugin(ScrollTrigger); const sectionsData = [ { image: image1, text: "Parallax" }, { image: image2, text: "So smooth" }, { image: image3, text: "Nice, right?" }, ]; const getRatio = (el) => window.innerHeight / (window.innerHeight + el.offsetHeight); const ParallaxSection = ({ image, text }) => (

    {text}

    ); export const Parallax2 = () => { const containerRef = useRef(null); useGSAP( (context) => { const sections = gsap.utils.toArray("section", context.scope); sections.forEach((section, i) => { const bg = section.querySelector(".bg"); gsap.fromTo( bg, { backgroundPosition: () => i ? `50% ${-window.innerHeight * getRatio(section)}px` : "50% 0px", }, { backgroundPosition: () => `50% ${window.innerHeight * (1 - getRatio(section))}px`, ease: "none", scrollTrigger: { trigger: section, start: () => (i ? "top bottom" : "top top"), end: "bottom top", scrub: true, }, } ); }); }, { scope: containerRef } ); return (
    {sectionsData.map((s, i) => ( ))}
    ); }; ================================================ FILE: src/components/sidebars/Sidebar1/Sidebar1.jsx ================================================ import { useRef, useState } from "react"; import "./styles.css"; const menuItems = [ { name: "Home", icon: "home", }, { name: "Settings", icon: "settings", items: ["Display", "Editor", "Theme", "Interface"], }, { name: "Create", icon: "add_box", items: ["Article", "Document", "Report"], }, { name: "Account", icon: "lock", items: ["Dashboard", "Logout"], }, { name: "Products", icon: "inventory_2", }, { name: "Favourites", icon: "favorite", }, ]; const Icon = ({ icon }) => ( {icon} ); const NavHeader = () => (
    Admin
    ); const NavButton = ({ onClick, name, icon, isActive, hasSubNav }) => ( ); const SubMenu = ({ item, activeItem, handleClick }) => { const navRef = useRef(null); const isSubNavOpen = (item, items) => items.some((i) => i === activeItem) || item === activeItem; return (
    {item?.items.map((subItem) => ( ))}
    ); }; export const Sidebar1 = () => { const [activeItem, setActiveItem] = useState(""); const handleClick = (item) => { console.log("activeItem", activeItem); setActiveItem(item !== activeItem ? item : ""); }; return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar1/styles.css ================================================ * { box-sizing: border-box; } .page.sidebar-1-page { margin: 0; background: #12131a; font-family: "Euclid Circular A"; } .sidebar-1 button { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; } .sidebar-1 { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; gap: 8px; width: 260px; height: 100%; padding: 0 16px; background: #1d212a; border-right: 1px solid #2e303e; transition: width 0.4s; } .sidebar-1 .sidebar-header { display: flex; align-items: center; height: 72px; padding: 0 1.25rem 0 0; border-bottom: 1px solid #2e303e; color: #e1ecff; } .sidebar-1 .sidebar-header button { width: 54px; } .sidebar-1 .sidebar-logo { height: 20px; } .sidebar-1 button { position: relative; display: flex; gap: 16px; align-items: center; height: 50px; width: 100%; border-radius: 6px; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1; padding: 0 16px; color: #e1ecff; transition: background 0.3s; } .sidebar-1 button span:nth-child(2) { flex: 1 1 auto; } .sidebar-1 button:is(.active, :hover) { background: #004fee; color: #e1ecff; } .sidebar-1 button span { transition: 0.3s; } .sidebar-1 button.active > span:nth-child(3) { rotate: -180deg; } .sidebar-1 button:not(.active):hover { background: #2e303e; } .sidebar-1 .sub-nav button.active::before { background: #e1ecff; } .sidebar-1 .sub-nav { overflow: hidden; /* height: 0; */ transition: 0.5s; } /* .sub-nav.open { height: 200px; } */ .sidebar-1 .sub-nav button { padding-left: 54px; } .sidebar-1 .sub-nav button::before { content: ""; position: absolute; top: 50%; left: 25px; translate: 0 -50%; width: 5px; height: 5px; border-radius: 50%; background-color: #e1ecff; } .sidebar-1 .material-symbols-outlined { font-size: 22px; } ================================================ FILE: src/components/sidebars/Sidebar10/Sidebar10.css ================================================ .page.sidebar-10-page { background: url("./bg.jpg") #6a6eb7; background-size: cover; background-position: -200px; font-family: "Euclid Circular B", "Poppins"; } .page.sidebar-10-page::after { content: ""; position: fixed; z-index: 0; inset: 0; background: linear-gradient(rgb(0 0 0 / 80%), rgb(0 0 0 / 50%)); } .sidebar-10 { position: absolute; z-index: 2; top: 20px; left: 20px; border-radius: 10px; width: 280px; padding: 8px; background: rgb(255 255 255 / 4%); backdrop-filter: blur(10px); } .sidebar-10-header { display: flex; align-items: center; padding: 0 16px; gap: 9px; height: 56px; padding-bottom: 8px; font-size: 16px; font-weight: 400; } .sidebar-10-header > span:first-child { font-size: 20px; } .sidebar-10 ul { list-style: none; padding: 0; margin: 0; } .sidebar-10 button { background: transparent; color: inherit; border: 0; border-radius: 12px; width: 100%; height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-family: inherit; cursor: pointer; opacity: 0.75; transition: 0.3s; } .sidebar-10 button:hover { opacity: 1; } .sidebar-10 button span { font-size: 20px; } .sidebar-10 button span:first-child { color: #a0a0b8; } .sidebar-10 button span:nth-child(3) { margin-left: auto; rotate: 90deg; transition: 0.2s; } .sidebar-10 .block.open button span:nth-child(3) { rotate: 0deg; } .sidebar-10 .blocks { display: grid; gap: 8px; } .sidebar-10 .block { overflow: hidden; position: relative; border-radius: 12px; background: rgb(255 255 255 / 3%); transition: 0.3s; } .sidebar-10 .block:hover { background: rgb(255 255 255 / 6%); } .sidebar-10 .block.open { background: rgb(255 255 255 / 6%); } .sidebar-10 .block-inner { height: 0; overflow: hidden; transition: height 0.5s; } .block-items button { border-radius: 0; opacity: 0.55; transition: 0.3s; } .block-items button:hover { opacity: 1; background: rgb(255 255 255 / 3%); } ================================================ FILE: src/components/sidebars/Sidebar10/Sidebar10.jsx ================================================ import { useRef, useState } from "react"; import "./Sidebar10.css"; const blocks = [ { name: "Hosting", icon: "storage", items: [ { name: "Cloud", icon: "cloud" }, { name: "DNS", icon: "dns" }, { name: "API Keys", icon: "key" }, ], }, { name: "Storage", icon: "database", items: [ { name: "Administration", icon: "build" }, { name: "Management", icon: "hard_drive" }, ], }, { name: "Security", icon: "security", items: [ { name: "Firewall", icon: "explosion" }, { name: "Warnings", icon: "warning" }, { name: "Alerts", icon: "dangerous" }, { name: "Blocked", icon: "block" }, ], }, { name: "Profile", icon: "account_circle", items: [ { name: "Account", icon: "lock" }, { name: "Theme", icon: "palette" }, { name: "Apps", icon: "apps" }, ], }, ]; const Icon = ({ children }) => ( {children} ); const Button = ({ name, icon, isOpen, hasToggle, onClick }) => ( ); const Block = ({ name, icon, items }) => { const [isOpen, setIsOpen] = useState(false); const itemsRef = useRef(); return (
  • ))}
    ); }; export const Sidebar10 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar11/Sidebar11.css ================================================ .page.sidebar-11-page { background: #17132a url("./bg.jpg"); background-position: -400px; background-size: cover; overflow: hidden; } .page.sidebar-11-page::after { content: ""; position: fixed; z-index: 0; inset: 0; background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%)); } .sidebar-11 { position: absolute; z-index: 2; top: 20px; left: 20px; bottom: 26px; border-radius: 14px; width: 56px; background: rgb(0 0 0 / 12%); backdrop-filter: blur(10px); transition: width 0.45s; } .sidebar-11 button { border: 0; background: transparent; cursor: pointer; } .sidebar-11 .material-symbols-outlined { font-size: 18px; } .sidebar-11.open { width: 190px; } .sidebar-11 .inner { position: absolute; top: 0; left: 0; width: 190px; height: 100%; display: flex; flex-direction: column; } .sidebar-11 header { display: flex; align-items: center; height: 64px; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 0 6px; } .sidebar-11-burger { width: 44px; height: 72px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-11 header > img { height: 18px; } .sidebar-11 nav { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 6px; gap: 2px; } .sidebar-11 nav > button { display: flex; gap: 12px; align-items: center; height: 44px; width: 44px; font-family: "Euclid Circular B"; font-size: 14px; text-transform: capitalize; line-height: 1; padding: 0 12px; border-radius: 8px; opacity: 0.7; color: #f9f9f9; transition: 0.3s; } .sidebar-11 nav > button:hover { background: rgb(255 255 255 / 6%); opacity: 1; } .sidebar-11 nav > button:last-child { margin-top: auto; margin-bottom: 8px; } .sidebar-11:not(.open) nav > button:hover p { position: relative; opacity: 1; background: #121113; backdrop-filter: blur(10px); padding: 8px 12px; border-radius: 6px; translate: 16px 0; } .sidebar-11:not(.open) nav > button:hover p::after { content: ""; position: absolute; top: 50%; left: -4px; height: 8px; width: 8px; translate: 0 -50%; transform: rotate(45deg); border-radius: 1px; background: inherit; } .sidebar-11 header > img, .sidebar-11 nav > button p { opacity: 0; pointer-events: none; transition: 0.25s; } .sidebar-11.open :is(nav button p, header > img) { opacity: 1; } .sidebar-11.open nav > button { width: 100%; } ================================================ FILE: src/components/sidebars/Sidebar11/Sidebar11.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./Sidebar11.css"; const navItems = ["home", "build", "cloud", "stacks", "mail"]; export const Sidebar11 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar12/Sidebar12.css ================================================ .page.sidebar-12-page { background: url("./bg.jpg"); background-position: -360px; background-size: cover; overflow: hidden; font-family: "Euclid Circular B", "Poppins", sans-serif; } * { box-sizing: border-box; } .sidebar-12 { position: fixed; top: 24px; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: 260px; border-radius: 16px; padding: 0 16px; background: rgb(0 0 0 / 19%); backdrop-filter: blur(30px); } .sidebar-12 header { display: flex; align-items: center; height: 72px; padding-top: 10px; border-bottom: 1px solid rgb(255 255 255 / 8%); } .sidebar-12 header img { height: 44px; } .sidebar-12 button { position: relative; display: flex; gap: 12px; align-items: center; height: 50px; width: 100%; border-radius: 6px; font-size: 16px; font-family: inherit; padding: 0 16px; background: transparent; border: none; cursor: pointer; color: rgb(255 255 255 / 95%); transition: 0.3s; } .sidebar-12 button.active { background: rgb(0 0 0 / 18%); } .sidebar-12 button:not(.active):hover { background: rgb(0 0 0 / 8%); } .sidebar-12 i { font-size: 20px; width: 20px; } .sidebar-12 button i:last-child { margin-left: auto; transition: 0.3s; } .sidebar-12 button.active i:last-child { rotate: -180deg; } .sidebar-12 ul { list-style: none; padding: 0; margin: 0; } .sidebar-12 .sub-menu { overflow: hidden; transition: height 0.5s ease; } .sidebar-12 .sub-menu ul { padding-left: 0; } .sidebar-12 .sub-menu button { padding-left: 48px; } .sidebar-12 .sub-menu button::before { content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 35%); } ================================================ FILE: src/components/sidebars/Sidebar12/Sidebar12.jsx ================================================ import { useRef, useState } from "react"; import "./Sidebar12.css"; import logo from "./logo.svg"; const SIDEBAR_ITEMS = [ { id: "dashboard", label: "Dashboard", icon: "ai-dashboard", type: "page", }, { id: "create", label: "Create", icon: "ai-folder-add", type: "submenu", children: [ { id: "article", label: "Article" }, { id: "document", label: "Document" }, { id: "slides", label: "Slides" }, ], }, { id: "account", label: "Account", icon: "ai-lock-on", type: "submenu", children: [ { id: "admin", label: "Admin" }, { id: "display", label: "Display" }, { id: "appearance", label: "Appearance" }, { id: "preferences", label: "Preferences" }, ], }, { id: "profile", label: "Profile", icon: "ai-person", type: "submenu", children: [ { id: "avatar", label: "Avatar" }, { id: "theme", label: "Theme" }, ], }, { id: "notifications", label: "Notifications", icon: "ai-bell", type: "page", }, { id: "products", label: "Products", icon: "ai-cart", type: "page", }, { id: "settings", label: "Settings", icon: "ai-gear", type: "page", }, ]; export const Sidebar12 = () => { const [activeItem, setActiveItem] = useState("dashboard"); const [openSubmenu, setOpenSubmenu] = useState(null); const submenuRefs = useRef({}); const getSubmenuHeight = (id) => { const el = submenuRefs.current[id]; if (!el) return 0; return el.getBoundingClientRect().height; }; const handlePageClick = (id) => { setActiveItem(id); setOpenSubmenu(null); }; const handleSubmenuToggle = (id) => { setActiveItem(id); setOpenSubmenu((prev) => (prev === id ? null : id)); }; return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar13/Sidebar13.css ================================================ .page.sidebar-13-page { background: url("./bg.jpg"); background-position: -380px; background-size: cover; overflow: hidden; font-family: "Euclid Circular B", "Poppins", sans-serif; } * { box-sizing: border-box; } .title { position: absolute; top: 160px; left: 50%; translate: -50% 0; } .title h2, .title h3 { margin: 0; font-weight: 400; text-align: center; text-shadow: 0 0 10px rgb(0 0 0 / 28%); } .title h2 { margin: 0 0 8px; } .title h3 { letter-spacing: 1px; opacity: 0.6; font-size: 14px; } .sidebar-13 { position: fixed; top: 240px; left: auto; right: auto; bottom: -40px; display: flex; flex-direction: column; gap: 8px; width: 260px; border-radius: 16px; padding: 0 16px; background: rgb(0 0 0 / 19%); backdrop-filter: blur(30px); } .sidebar-13 header { display: flex; align-items: center; height: 72px; padding-top: 10px; border-bottom: 1px solid rgb(255 255 255 / 8%); } .sidebar-13 header img { height: 24px; margin-left: 16px; } .sidebar-13 button { position: relative; display: flex; gap: 12px; align-items: center; height: 50px; width: 100%; border-radius: 6px; font-size: 16px; font-family: inherit; padding: 0 16px; background: transparent; border: none; cursor: pointer; color: rgb(255 255 255 / 95%); transition: 0.3s; } .sidebar-13 button.active { background: rgb(0 0 0 / 18%); } .sidebar-13 button:not(.active):hover { background: rgb(0 0 0 / 8%); } .sidebar-13 ion-icon { font-size: 19px; width: 20px; } .sidebar-13 button ion-icon:last-child { margin-left: auto; transition: 0.3s; } .sidebar-13 button.active ion-icon:last-child { rotate: -180deg; } .sidebar-13 ul { list-style: none; padding: 0; margin: 0; } .sidebar-13 .sub-menu { overflow: hidden; transition: height 0.5s ease; } .sidebar-13 .sub-menu ul { padding-left: 0; } .sidebar-13 .sub-menu button { padding-left: 48px; } .sidebar-13 .sub-menu button::before { content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgb(255 255 255 / 35%); } ================================================ FILE: src/components/sidebars/Sidebar13/Sidebar13.jsx ================================================ import { useRef, useState, useLayoutEffect } from "react"; import "./Sidebar13.css"; import logo from "./logo.svg"; const SIDEBAR_ITEMS = [ { id: "dashboard", label: "Dashboard", icon: "grid-outline", type: "page" }, { id: "create", label: "Create", icon: "document-text-outline", type: "submenu", children: [ { id: "article", label: "Article" }, { id: "document", label: "Document" }, { id: "slides", label: "Slides" }, ], }, { id: "account", label: "Account", icon: "lock-closed-outline", type: "submenu", children: [ { id: "admin", label: "Admin" }, { id: "display", label: "Display" }, { id: "appearance", label: "Appearance" }, { id: "preferences", label: "Preferences" }, ], }, { id: "profile", label: "Profile", icon: "person-outline", type: "submenu", children: [ { id: "avatar", label: "Avatar" }, { id: "theme", label: "Theme" }, ], }, { id: "notifications", label: "Notifications", icon: "notifications-outline", type: "page", }, { id: "saved", label: "Favourites", icon: "heart-outline", type: "page" }, { id: "products", label: "Products", icon: "cart-outline", type: "page" }, { id: "settings", label: "Settings", icon: "settings-outline", type: "page" }, ]; export const Sidebar13 = () => { const [activeItem, setActiveItem] = useState("dashboard"); const [openSubmenu, setOpenSubmenu] = useState(null); const handlePageClick = (id) => { setActiveItem(id); setOpenSubmenu(null); }; const handleSubmenuToggle = (id) => { setActiveItem((prev) => (prev === id ? null : id)); setOpenSubmenu((prev) => (prev === id ? null : id)); }; return (

    React Sidebar

    @FRONTENDJOE

    ); }; const SidebarItem = ({ item, activeItem, isOpen, onPageClick, onSubmenuToggle, }) => { const isActive = activeItem === item.id; return (
  • {item.type === "submenu" && ( )}
  • ); }; const Submenu = ({ isOpen, activeItem, items }) => { const listRef = useRef(null); const [height, setHeight] = useState(0); useLayoutEffect(() => { if (listRef.current) { setHeight(listRef.current.getBoundingClientRect().height); } }, [items]); return (
      {items.map((child) => (
    • ))}
    ); }; ================================================ FILE: src/components/sidebars/Sidebar14/Sidebar14.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./styles.css"; const navItems = ["home", "build", "cloud", "mail", "favorite"]; const Icon = ({ icon }) => ( {icon} ); const Button = ({ item }) => ( ); const Header = () => (
    ); export const Sidebar14 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar14/styles.css ================================================ .page.sidebar-14-page { background: #1c1b23; } .page.sidebar-14-page button { background: transparent; border: 0; cursor: pointer; } .sidebar-14 { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 56px; background: #5331ff; backdrop-filter: blur(10px); transition: 0.45s; } .sidebar-14 .material-symbols-outlined { font-size: 20px; } .sidebar-14.open { width: 190px; overflow: hidden; } .sidebar-14 .inner { position: absolute; top: 0; left: 0; width: 190px; height: 100%; display: flex; flex-direction: column; } .sidebar-14 header { display: flex; align-items: center; height: 64px; padding: 0 6px 0 48px; } .sidebar-14-burger { position: fixed; z-index: 2; top: 0; left: 0; width: 56px; height: 64px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-14 header > img { height: 18px; } .sidebar-14 nav { display: flex; flex-direction: column; padding: 0 8px 20px; gap: 2px; flex: 1 1 auto; } .sidebar-14 nav > button { display: flex; gap: 12px; align-items: center; height: 40px; width: 40px; font-family: "Euclid Circular A"; font-size: 14px; text-transform: capitalize; line-height: 1; padding: 0 10px; border-radius: 8px; color: #f9f9f9; } .sidebar-14 nav > button:last-child { margin-top: auto; } .sidebar-14 nav > button:hover { background: rgb(0 0 0 / 24%); } .sidebar-14:not(.open) nav p { visibility: hidden; } .sidebar-14:not(.open) nav > button:hover p { opacity: 1; visibility: visible; background: #2e2a47; padding: 5px 10px; font-size: 13px; border-radius: 6px; translate: 12px 0; } .sidebar-14 header > img, .sidebar-14 nav > button p { opacity: 0; transition: 0.25s; } .sidebar-14.open :is(nav button p, header > img) { opacity: 1; } .sidebar-14.open nav > button { width: 100%; } @media (width <= 400px) { .sidebar-14 { translate: -100% 0; } .sidebar-14.open { translate: 0; } .sidebar-14:not(.open) button span { transition: 0.3s; opacity: 0; } } ================================================ FILE: src/components/sidebars/Sidebar15/Sidebar15.css ================================================ .page.sidebar-15-page { --color-bg: #f4f6fa; --color-primary: #121926; --color-muted: #9fa4af; --color-hover: #e8ecf4; margin: 0; background: #dadee5; color: #5d6674; height: 100vh; font-family: "Euclid Circular A"; } .sidebar-15 h2, .sidebar-15 h3 { margin: 0; } .sidebar-15 { position: fixed; overflow: hidden; top: 24px; left: 18px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; width: 80px; border-radius: 18px; transition: 0.4s; background: #ffffff; } .sidebar-15 button { border: 0; background: transparent; font-size: 22px; color: inherit; border-radius: 8px; font-family: inherit; cursor: pointer; transition: 0.3s; } .sidebar-15 .left, .sidebar-15 .right { position: absolute; top: 0; bottom: 0; transition: 0.4s; display: flex; flex-direction: column; align-items: center; } .sidebar-15 .left { z-index: 1; left: 0; width: 80px; background: #ffffff; } .sidebar-15 .left img { width: 40px; margin: 24px 0 28px; } .sidebar-15 .left button { width: 44px; height: 44px; display: grid; place-items: center; } .sidebar-15 .left button:hover { background: var(--color-bg); color: #384251; } .sidebar-15 .left div:last-of-type { margin-top: auto; margin-bottom: 20px; } .sidebar-15 .right { left: 76px; height: 100%; position: relative; } .sidebar-15 .right-inner { position: absolute; inset: 8px; left: 4px; border-radius: 12px; background: var(--color-bg); } .sidebar-15 .right .header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 28px; } .sidebar-15 .right h2 { font-size: 16px; font-weight: 600; } .sidebar-15 .right h3 { font-size: 12px; font-weight: 500; color: var(--color-muted); } .sidebar-15 .right nav { padding: 0 12px; } .sidebar-15 .right button { padding: 0 12px; background: transparent; display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; font-size: 14px; } .sidebar-15 .right button i:last-child { opacity: 0; font-size: 16px; margin-left: auto; transition: 0.3s; } .sidebar-15 .right button:hover { background: var(--color-hover); color: #384251; } .sidebar-15 .right button:hover i:last-child { opacity: 1; color: var(--color-muted); } .sidebar-15 .right button i { font-size: 18px; } .sidebar-15:hover { width: 300px; } .sidebar-15:hover .right { width: 225px; } .sidebar-15 .submenu { position: relative; list-style: none; margin: 0; padding: 8px 0 8px 29px; font-size: 14px; cursor: pointer; } .sidebar-15 .submenu::before { content: ""; position: absolute; top: 8px; left: 21px; bottom: 8px; width: 1px; background: var(--color-muted); opacity: 0.33; } .sidebar-15 .submenu li { white-space: nowrap; height: 36px; padding-left: 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; transition: 0.3s; } .sidebar-15 .submenu li:hover { background: var(--color-hover); color: #384251; cursor: pointer; } .sidebar-15 .submenu .badge { font-size: 10px; padding: 3px 5px; border-radius: 4px; background: var(--color-primary); color: #ffffff; margin-right: 12px; } ================================================ FILE: src/components/sidebars/Sidebar15/Sidebar15.jsx ================================================ import "./Sidebar15.css"; import logo from "./logo.svg"; const leftTopItems = [ "ai-home-alt1", "ai-heart", "ai-mention", "ai-chat-dots", "ai-plus", ]; const leftBottomItems = ["ai-gear", "ai-link-out"]; const navItems = [ { icon: "ai-dashboard", label: "Dashboard" }, { icon: "ai-shipping-box-v1", label: "Products" }, { icon: "ai-person", label: "Customers" }, { icon: "ai-open-envelope", label: "Messages", actionIcon: "ai-plus", submenu: [ { label: "Drafts", count: 10 }, { label: "Scheduled", count: 4 }, { label: "Published", count: 20 }, ], }, { icon: "ai-image", label: "Images" }, { icon: "ai-network", label: "Network" }, { icon: "ai-data", label: "Inventory" }, { icon: "ai-hashtag", label: "Hashtags" }, ]; const IconButton = ({ icon }) => ( ); const LeftSidebar = () => (
    Logo {leftTopItems.map((icon) => ( ))}
    {leftBottomItems.map((icon) => ( ))}
    ); const SidebarHeader = () => (

    Untitled UI

    store.untitledui.com

    ); const Submenu = ({ items }) => (
      {items.map((item) => (
    • {item.label} {item.count}
    • ))}
    ); const NavItem = ({ item }) => ( <> {item.submenu && } ); const Navigation = () => ( ); const RightSidebar = () => (
    ); export const Sidebar15 = () => { return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar2/Sidebar2.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./styles.css"; const navItems = ["home", "settings", "build", "cloud", "mail", "bookmark"]; export const Sidebar2 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar2/styles.css ================================================ .page.sidebar-2-page { background: #17132a; } .sidebar-2 { position: absolute; overflow: hidden; top: 0; left: 0; width: 56px; height: 100%; background: #4f2cd4; transition: width 0.4s; } .sidebar-2.open { width: 260px; } .sidebar-2 .inner { position: absolute; top: 0; left: 0; width: 260px; } .sidebar-2 header { display: flex; align-items: center; height: 64px; padding: 0 6px; background: rgb(0 0 0 / 25%); } .sidebar-2-burger { width: 44px; height: 72px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-2 header > img { height: 28px; } .sidebar-2 nav { display: grid; padding: 6px; gap: 2px; } .sidebar-2 nav > button { display: flex; gap: 12px; align-items: center; height: 44px; width: 44px; font-family: "Poppins"; font-size: 16px; text-transform: capitalize; line-height: 1; padding: 0 12px; border-radius: 8px; color: #f9f9f9; } .sidebar-2 nav > button:hover { background: rgb(0 0 0 / 30%); } .sidebar-2 header > img, .sidebar-2 nav > button p { opacity: 0; transition: 0.3s; } .sidebar-2.open :is(nav button p, header > img) { opacity: 1; } .sidebar-2.open nav > button { width: 100%; } ================================================ FILE: src/components/sidebars/Sidebar3/Sidebar3.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./styles.css"; const navItems = ["home", "settings", "build", "cloud", "mail"]; export const Sidebar3 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar3/styles.css ================================================ .page.sidebar-3-page { background: #17132a url("./bg.jpeg"); background-size: cover; } .page.sidebar-3-page::after { content: ""; position: fixed; z-index: 0; inset: 0; background: rgb(0 0 0 / 15%); } .sidebar-3 { position: absolute; z-index: 2; top: 20px; left: 20px; bottom: 20px; border-radius: 8px; width: 56px; background: rgb(0 0 0 / 25%); backdrop-filter: blur(10px); transition: width 0.45s; } .sidebar-3 button { border: 0; background: transparent; cursor: pointer; } .sidebar-3 .material-symbols-outlined { font-size: 20px; } .sidebar-3.open { width: 190px; } .sidebar-3 .inner { position: absolute; top: 0; left: 0; width: 190px; } .sidebar-3 header { display: flex; align-items: center; height: 64px; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 0 6px; } .sidebar-3-burger { width: 44px; height: 72px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-3 header > img { height: 18px; } .sidebar-3 nav { display: grid; padding: 0 6px; gap: 2px; } .sidebar-3 nav > button { display: flex; gap: 12px; align-items: center; height: 44px; width: 44px; font-family: "Poppins"; font-size: 14px; text-transform: capitalize; line-height: 1; padding: 0 12px; border-radius: 8px; opacity: 0.7; color: #f9f9f9; } .sidebar-3 nav > button:hover { background: rgb(0 0 0 / 30%); opacity: 1; } .sidebar-3:not(.open) nav > button:hover p { opacity: 1; background: rgb(0 0 0 / 70%); padding: 4px 8px; border-radius: 6px; translate: 10px 0; } .sidebar-3 header > img, .sidebar-3 nav > button p { opacity: 0; transition: 0.25s; } .sidebar-3.open :is(nav button p, header > img) { opacity: 1; } .sidebar-3.open nav > button { width: 100%; } ================================================ FILE: src/components/sidebars/Sidebar4/Sidebar4.css ================================================ * { box-sizing: border-box; } .page.sidebar-4-page { background: #36367f; } .sidebar-4 button { background: transparent; border: 0; padding: 0; cursor: pointer; } .sidebar-4 { position: absolute; overflow: hidden; top: 20px; left: 20px; bottom: 30px; width: 64px; border-radius: 16px; background: #21214c; transition: width 0.4s; } .sidebar-4:hover { width: 260px; } .sidebar-4 .inner { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; } .sidebar-4 .header { display: flex; align-items: center; height: 72px; padding: 0 20px; background: rgb(0 0 0 / 15%); } .sidebar-4 .header h1 { margin-left: 12px; font-weight: 500; font-size: 14px; letter-spacing: 2px; } .sidebar-4 .logo { height: 28px; scale: 1.1; transition: 0.5s; } .sidebar-4 .menu { position: relative; display: grid; } .sidebar-4 .menu::after { content: ""; position: absolute; top: 0; left: 0; height: 56px; width: 6px; background: #6154f7; translate: 0 var(--top); transition: 0.5s; } .sidebar-4 .menu button { display: flex; gap: 16px; align-items: center; height: 56px; width: 100%; font-family: "Poppins"; font-size: 17px; text-transform: capitalize; line-height: 1; padding: 0 22px; color: rgb(255 255 255 / 60%); cursor: pointer; opacity: 0.8; transition: 0.5s; } .sidebar-4:hover .menu button:hover:not(.active) { background: rgb(0 0 0 / 8%); } .sidebar-4 .menu :is(button:hover, .active) { background: rgb(0 0 0 / 35%); color: rgb(255 255 255 / 100%); opacity: 1; } .sidebar-4:hover .menu .active { cursor: default; } .sidebar-4 .menu button:hover > span { opacity: 1; } .sidebar-4 .menu button p, .sidebar-4 .header h1 { opacity: 0; transition: 0.5s; } .sidebar-4:hover :is(.sidebar-4 .menu button p, .sidebar-4 .header h1) { opacity: 1; } .sidebar-4:hover .logo { scale: 1; } .sidebar-4 .menu button > img { width: 24px; height: 24px; } ================================================ FILE: src/components/sidebars/Sidebar4/Sidebar4.jsx ================================================ import { useState } from "react"; import logo from "./logo.png"; import "./Sidebar4.css"; const navItems = [ "home", "dashboard", "mail", "cloud", "workspaces", "settings", ]; export const Sidebar4 = () => { const [active, setActive] = useState(1); const goto = (index) => setActive(index); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar5/Sidebar5.css ================================================ .page.sidebar-5-page { margin: 0; background: #1c376d; height: 100vh; overflow: hidden; } .lni { font-size: 24px; } .sidebar-5 button { background: transparent; border: 0; padding: 0; cursor: pointer; } .sidebar-5 { position: absolute; overflow: hidden; top: 0; left: 0; bottom: 0; width: 260px; background: rgb(0 0 0 / 40%); } .sidebar-5 .sidebar-inner { position: absolute; top: 0; left: 0; width: 260px; } .sidebar-5 .sidebar-header { display: flex; align-items: center; height: 72px; padding-top: 10px; } .sidebar-5 .sidebar-burger { width: 60px; height: 60px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-5 .sidebar-logo { height: 22px; } .sidebar-5 .sidebar-menu { display: grid; padding: 0 10px; } .sidebar-5 .sidebar-button { display: flex; gap: 16px; align-items: center; height: 56px; width: 100%; font-family: "Poppins"; font-size: 17px; text-transform: capitalize; line-height: 1; padding: 0 10px; border-radius: 8px; color: #b8c2d8; opacity: 0.9; } .sidebar-5 .sidebar-button p { font-size: 15px; margin-left: 1px; } .sidebar-5 .handle { position: absolute; z-index: 100; width: 8px; top: 0; bottom: 0; right: 0; user-select: none; transition: 0.3s; } .sidebar-5 .handle:hover, .sidebar-5 .handle:active { background: rgb(255 255 255 / 6%); cursor: col-resize; } ================================================ FILE: src/components/sidebars/Sidebar5/Sidebar5.jsx ================================================ import { useRef, useState } from "react"; import logo from "./logo.svg"; import "./Sidebar5.css"; const items = [ { name: "home", icon: "home-2", }, { name: "favourites", icon: "heart", }, { name: "products", icon: "cart-2", }, { name: "testimonials", icon: "comment-1", }, { name: "security", icon: "locked-2", }, { name: "settings", icon: "gear-1", }, ]; const Icon = ({ children }) => ; export const Sidebar5 = () => { const [width, setWidth] = useState(60); const sidebarRef = useRef(null); const sidebar = sidebarRef.current; const resize = (e) => { let newWidth = e.clientX - sidebar?.offsetLeft; if (newWidth < 60) newWidth = 60; if (newWidth > 259) newWidth = 260; setWidth(newWidth); }; const stopResize = () => { document.body.style.cursor = "default"; window.removeEventListener("mousemove", resize); window.removeEventListener("mouseup", stopResize); }; const initResize = () => { document.body.style.cursor = "col-resize"; window.addEventListener("mousemove", resize); window.addEventListener("mouseup", stopResize); }; return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar6/Sidebar6.css ================================================ * { box-sizing: border-box; } .sidebar-6 { --width-open: 260px; --width-closed: 64px; } .page.sidebar-6-page { background: #474bb7; } .sidebar-6 button { background: transparent; border: 0; padding: 0; cursor: pointer; } .sidebar-6 { overflow: hidden; position: absolute; top: 20px; left: 20px; bottom: 30px; width: var(--width-closed); border-radius: 16px; background: #1a1a36; transition: width 0.3s; } .sidebar-6:hover { width: var(--width-open); } .sidebar-6 .toggle-btn { position: absolute; z-index: 2; top: 24px; right: -12px; display: grid; place-items: center; padding: 0; width: 24px; height: 24px; border-radius: 50%; background: #373153; color: #8f8d9b; box-shadow: 0 0 10px rgb(0 0 0 / 10%); transition: 0.3s; } .sidebar-6 .toggle-btn:hover { color: #f9f9f9; } .sidebar-6:hover .toggle-btn { rotate: 180deg; } .sidebar-6 .inner { position: absolute; top: 0; left: 0; bottom: 0; width: 260px; display: flex; flex-direction: column; } .sidebar-6 .header { display: flex; align-items: center; height: 72px; width: var(--width-closed); padding: 0 20px; background: rgb(0 0 0 / 15%); border-top-left-radius: 16px; border-top-right-radius: 16px; transition: 0.3s; } .sidebar-6:hover .header { width: var(--width-open); } .sidebar-6 .header h1 { margin-left: 12px; font-weight: 500; font-size: 16px; letter-spacing: 2px; } .sidebar-6 .logo { height: 28px; } .sidebar-6 .menu { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; } .sidebar-6 .menu::after { content: ""; position: absolute; top: 0; left: 0; height: 56px; width: 6px; background: #656aff; translate: 0 var(--top); transition: 0.3s; } .sidebar-6 .menu button { display: flex; gap: 16px; align-items: center; height: 56px; width: var(--width-closed); font-family: "Poppins"; font-size: 17px; text-transform: capitalize; line-height: 1; padding: 0 22px; color: #9193b3; cursor: pointer; opacity: 0.8; transition: 0.3s; } .sidebar-6:hover .menu button { width: var(--width-open); } .sidebar-6 .menu button.active { color: #f9f9f9; background: rgb(255 255 255 / 3%); opacity: 1; } .sidebar-6 .menu button:not(.active):hover { background: rgb(255 255 255 / 2%); opacity: 0.9; } .sidebar-6:hover .menu .active { cursor: default; } .sidebar-6 .menu button:hover > span { opacity: 1; } .sidebar-6 .menu button p, .sidebar-6 .header h1 { opacity: 0; transition: 0.3s; } .sidebar-6 .menu button:hover p { transition: 0.1s; } .sidebar-6:hover :is(.sidebar-6 .menu button p, .sidebar-6 .header h1) { opacity: 1; } .sidebar-6 .menu button > img { width: 24px; height: 24px; } ================================================ FILE: src/components/sidebars/Sidebar6/Sidebar6.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./Sidebar6.css"; const navItems = [ "dashboard", "leaderboard", "groups", "analytics", "message", "settings", ]; export const Sidebar6 = () => { const [active, setActive] = useState(1); const goto = (index) => setActive(index); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar7/Sidebar7.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./styles.css"; const navItems = ["home", "build", "cloud", "mail", "favorite"]; const Icon = ({ icon }) => ( {icon} ); const Button = ({ item }) => ( ); const Header = () => (
    ); export const Sidebar7 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar7/styles.css ================================================ .page.sidebar-7-page { background: #1c1b23; } .page.sidebar-7-page button { background: transparent; border: 0; cursor: pointer; } .sidebar-7 { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 56px; background: #5331ff; backdrop-filter: blur(10px); transition: 0.45s; } .sidebar-7 .material-symbols-outlined { font-size: 20px; } .sidebar-7.open { width: 190px; overflow: hidden; } .sidebar-7 .inner { position: absolute; top: 0; left: 0; width: 190px; height: 100%; display: flex; flex-direction: column; } .sidebar-7 header { display: flex; align-items: center; height: 64px; padding: 0 6px 0 48px; } .sidebar-7-burger { position: fixed; z-index: 2; top: 0; left: 0; width: 56px; height: 64px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-7 header > img { height: 18px; } .sidebar-7 nav { display: flex; flex-direction: column; padding: 0 8px 20px; gap: 2px; flex: 1 1 auto; } .sidebar-7 nav > button { display: flex; gap: 12px; align-items: center; height: 40px; width: 40px; font-family: "Euclid Circular A"; font-size: 14px; text-transform: capitalize; line-height: 1; padding: 0 10px; border-radius: 8px; color: #f9f9f9; } .sidebar-7 nav > button:last-child { margin-top: auto; } .sidebar-7 nav > button:hover { background: rgb(0 0 0 / 24%); } .sidebar-7:not(.open) nav p { visibility: hidden; } .sidebar-7:not(.open) nav > button:hover p { opacity: 1; visibility: visible; background: #2e2a47; padding: 5px 10px; font-size: 13px; border-radius: 6px; translate: 12px 0; } .sidebar-7 header > img, .sidebar-7 nav > button p { opacity: 0; transition: 0.25s; } .sidebar-7.open :is(nav button p, header > img) { opacity: 1; } .sidebar-7.open nav > button { width: 100%; } @media (width <= 400px) { .sidebar-7 { translate: -100% 0; } .sidebar-7.open { translate: 0; } .sidebar-7:not(.open) button span { transition: 0.3s; opacity: 0; } } ================================================ FILE: src/components/sidebars/Sidebar8/Sidebar8.css ================================================ .page.sidebar-8-page { --color-hover: #313132; --border: 1px solid #2d2d2d; margin: 0; background: #141414; color: #fdffff; height: 100vh; font-family: "SF Pro"; } .sidebar-8 header :is(h2, h3) { margin: 0; } .sidebar-8 { position: fixed; overflow: hidden; top: 24px; left: 24px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; width: 80px; border-radius: 18px; border: var(--border); transition: 0.4s; background: #1c1c1c; } .sidebar-8 button { border: 0; background: transparent; font-size: 22px; color: inherit; border-radius: 8px; font-family: inherit; cursor: pointer; transition: 0.3s; } .sidebar-8-left, .sidebar-8-right { position: absolute; top: 0; bottom: 0; transition: 0.4s; display: flex; flex-direction: column; align-items: center; } .sidebar-8-left { z-index: 1; left: 0; width: 80px; } .sidebar-8-dots { position: absolute; top: 10px; left: 18px; width: 10px; height: 10px; border-radius: 50%; background: #ee6c5f; } .sidebar-8-dots::before, .sidebar-8-dots::after { content: ""; width: inherit; height: inherit; border-radius: inherit; position: inherit; } .sidebar-8-dots::before { left: 16px; background: #f7bc50; } .sidebar-8-dots::after { left: 32px; background: #61c453; } .sidebar-8-left img { width: 40px; margin: 36px 0 14px; } .sidebar-8-left button { width: 44px; height: 44px; display: grid; place-items: center; opacity: 0.8; } .sidebar-8-left button:hover { opacity: 1; background: var(--color-hover); } .sidebar-8-left div:last-of-type { margin-top: auto; margin-bottom: 16px; } .sidebar-8-right { left: 76px; height: 100%; position: relative; } .sidebar-8-right-inner { position: absolute; inset: 8px; left: 6px; border-radius: 12px; background: #1a1a1a; border: var(--border); } .sidebar-8-right header { display: flex; align-items: center; justify-content: space-between; padding: 30px 16px 18px; } .sidebar-8-right h2 { font-size: 16px; font-weight: 600; } .sidebar-8-right h3 { font-size: 12px; font-weight: 500; color: #7e7f82; } .sidebar-8-right nav { padding: 0 12px; } .sidebar-8-right button { padding: 0 12px; background: transparent; display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; font-size: 15px; opacity: 0.7; } .sidebar-8-right button:hover { opacity: 1; background: var(--color-hover); } .sidebar-8-right button i { font-size: 18px; } .sidebar-8:hover { width: 300px; } .sidebar-8:hover .sidebar-8-right { width: 225px; } ================================================ FILE: src/components/sidebars/Sidebar8/Sidebar8.jsx ================================================ import logo from "./logo.svg"; import "./Sidebar8.css"; const navItems = ["home-alt1", "heart", "mention", "plus"]; const footerItems = ["gear", "link-out"]; const innerItems = [ { name: "Dashboard", icon: "dashboard", }, { name: "Products", icon: "shipping-box-v1", }, { name: "Customers", icon: "person", }, { name: "Messages", icon: "open-envelope", }, { name: "Images", icon: "image", }, { name: "Inventory", icon: "data", }, { name: "Hashtags", icon: "hashtag", }, ]; const Icon = ({ icon }) => ; const Button = ({ item }) => ( ); const Header = () => (

    Untitled UI

    store.untitledui.com

    ); export const Sidebar8 = () => { return (
    ); }; ================================================ FILE: src/components/sidebars/Sidebar9/Sidebar9.css ================================================ .page.sidebar-9-page { background: #17132a url("./bg.jpg"); background-size: cover; } .page.sidebar-9-page::after { content: ""; position: fixed; z-index: 0; inset: 0; background: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 0%)); } .sidebar-9 { position: absolute; z-index: 2; top: 20px; left: 20px; bottom: 26px; border-radius: 14px; border: 1px solid rgb(255 255 255 / 6%); width: 56px; background: rgb(255 255 255 / 6%); backdrop-filter: blur(10px); transition: width 0.45s; } .sidebar-9 button { border: 0; background: transparent; cursor: pointer; } .sidebar-9 .material-symbols-outlined { font-size: 20px; } .sidebar-9.open { width: 190px; } .sidebar-9 .inner { position: absolute; top: 0; left: 0; width: 190px; } .sidebar-9 header { display: flex; align-items: center; height: 64px; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 0 6px; } .sidebar-9-burger { width: 44px; height: 72px; display: grid; place-items: center; color: #f9f9f9; } .sidebar-9 header > img { height: 18px; } .sidebar-9 nav { display: grid; padding: 0 6px; gap: 2px; } .sidebar-9 nav > button { display: flex; gap: 12px; align-items: center; height: 44px; width: 44px; font-family: "Euclid Circular B"; font-size: 14px; text-transform: capitalize; line-height: 1; padding: 0 12px; border-radius: 8px; opacity: 0.7; color: #f9f9f9; transition: 0.3s; } .sidebar-9 nav > button:hover { background: rgb(255 255 255 / 6%); opacity: 1; } .sidebar-9:not(.open) nav > button:hover p { opacity: 1; background: rgb(0 0 0 / 20%); backdrop-filter: blur(10px); padding: 8px 12px; border-radius: 6px; translate: 10px 0; } .sidebar-9 header > img, .sidebar-9 nav > button p { opacity: 0; pointer-events: none; transition: 0.25s; } .sidebar-9.open :is(nav button p, header > img) { opacity: 1; } .sidebar-9.open nav > button { width: 100%; } ================================================ FILE: src/components/sidebars/Sidebar9/Sidebar9.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./Sidebar9.css"; const navItems = ["home", "security", "build", "cloud", "mail", "settings"]; export const Sidebar9 = () => { const [isOpen, setIsOpen] = useState(false); return (
    ); }; ================================================ FILE: src/components/sidebars/index.js ================================================ export * from "./Sidebar1/Sidebar1"; export * from "./Sidebar2/Sidebar2"; export * from "./Sidebar3/Sidebar3"; export * from "./Sidebar4/Sidebar4"; export * from "./Sidebar5/Sidebar5"; export * from "./Sidebar6/Sidebar6"; export * from "./Sidebar7/Sidebar7"; export * from "./Sidebar8/Sidebar8"; export * from "./Sidebar9/Sidebar9"; export * from "./Sidebar10/Sidebar10"; export * from "./Sidebar11/Sidebar11"; export * from "./Sidebar12/Sidebar12"; export * from "./Sidebar13/Sidebar13"; export * from "./Sidebar14/Sidebar14"; export * from "./Sidebar15/Sidebar15"; ================================================ FILE: src/components/signups/Signup1/Signup1.css ================================================ .page.signup-1-page { margin: 0; background: #f2f3fe; color: #4b5679; height: 100vh; display: grid; place-items: center; overflow: hidden; font-family: "Euclid Circular B", "Poppins"; } .signup-1-card { --color-primary: #6663e6; position: relative; overflow: hidden; width: 660px; height: 440px; border-radius: 32px; background: #ffffff; box-shadow: 0 12px 80px rgba(0, 0, 0, 0.12); } .signup-1-card .card-bg { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 860px; height: 440px; rotate: -45deg; transform-origin: 0% 100%; background: var(--color-primary); } .signup-1-card .card-bg-2 { background: var(--color-primary); rotate: 0deg; opacity: 0; right: 0; left: auto; transform-origin: 100% 100%; } .signup-1-card .card-bg-1.register { animation: card-bg-register 1.5s both; } .signup-1-card .card-bg-1.login { animation: card-bg-login 1.5s both; } .signup-1-card .card-bg-2.register { animation: card-bg-2-register 1.5s both; } .signup-1-card .card-bg-2.login { animation: card-bg-2-login 1.5s both; } .signup-1-card .logo { position: absolute; top: 70px; z-index: 2; height: 24px; transition: 0.3s; opacity: 0; } .signup-1-card .logo-1 { translate: -280px 0; left: 64px; } .signup-1-card .logo-2 { translate: 280px 0; right: 64px; } .signup-1-card .card-bg.login ~ .logo-1, .signup-1-card .card-bg.register ~ .logo-2 { opacity: 1; translate: 0; transition: 0.3s 1.05s; } .signup-1-card .form { position: absolute; z-index: 3; top: 0; left: 0; bottom: 0; width: 50%; display: grid; place-items: center; } .signup-1-card .form h2 { text-align: center; font-weight: 500; } .signup-1-card .form form { display: grid; gap: 12px; opacity: 0; transition: 0.3s; } .signup-1-card .form a { display: inline-flex; flex-direction: column; gap: 8px; color: #a7a7ad; cursor: pointer; font-size: 14px; text-align: center; } .signup-1-card .form p { font-size: 14px; text-align: center; margin: 0; display: flex; align-items: center; justify-content: center; height: 44px; color: #a7a7ad; } .signup-1-card .form a em { display: block; font-style: normal; font-size: 15px; color: var(--color-primary); } .signup-1-card .form.register { translate: 100% 0; } .signup-1-card .form.register form { translate: 320px 0; } .signup-1-card .form.login form { translate: -320px 0; } .signup-1-card .form.register.active form, .signup-1-card .form.login.active form { opacity: 1; translate: 0; transition: 0.5s 1s; } .signup-1-card form input { width: 260px; padding: 0 12px; font-size: 14px; background: #f4f4f7; } .signup-1-card form input::placeholder { color: #a7a7ad; } .signup-1-card input, .signup-1-card button { border: 0; border-radius: 12px; height: 44px; font-family: inherit; font-size: 16px; } .signup-1-card form button { color: #f9f9f9; background: var(--color-primary); letter-spacing: 1px; font-size: 14px; } /* Animations (Global definitions - prefixes not applied to @keyframe names) */ @keyframes card-bg-register { 0% { rotate: -45deg; } 50% { opacity: 1; } 50%, 100% { rotate: 0deg; } 50.01%, 100% { opacity: 0; } } @keyframes card-bg-login { 0% { opacity: 0; rotate: 0deg; } 50% { rotate: 0deg; opacity: 0; } 50%, 100% { rotate: 0; } 50.01%, 100% { opacity: 1; } 100% { rotate: -45deg; } } @keyframes card-bg-2-register { 0%, 50% { rotate: 0; opacity: 0; } 50.01% { opacity: 1; rotate: 0deg; } 100% { opacity: 1; rotate: 45deg; } } @keyframes card-bg-2-login { 0% { rotate: 45deg; opacity: 1; } 50%, 100% { rotate: 0deg; opacity: 1; } 50.01%, 100% { opacity: 0; } } ================================================ FILE: src/components/signups/Signup1/Signup1.jsx ================================================ import { useState } from "react"; import logo from "./logo.svg"; import "./Signup1.css"; const CardBackground = ({ view }) => { const bgClass = view === "login" ? "register" : "login"; return ( <>
    ); }; const LogoGroup = ({ logo }) => { return ( <> logo logo ); }; const LoginForm = ({ view, toggleView }) => { return (

    Login

    Forgot password?

    Don't have an account? Register here
    ); }; const RegisterForm = ({ view, toggleView }) => { return ( ); }; export const Signup1 = () => { const [view, setView] = useState("login"); const toggleView = () => setView(view === "login" ? "register" : "login"); return (
    ); }; ================================================ FILE: src/components/signups/index.js ================================================ export * from "./Signup1/Signup1"; ================================================ FILE: src/components/tables/Table1/Table1.css ================================================ .table-1-wrapper { overflow: auto; position: relative; z-index: 2; width: 440px; min-width: 440px; max-width: 440px; } .table-1-card table { width: 100%; border-collapse: collapse; text-align: left; } .table-1-card table th { opacity: 0.5; font-weight: 400; user-select: none; text-transform: capitalize; background: rgb(255 255 255 / 6%); } .table-1-card table :is(th, td) { position: relative; overflow: hidden; white-space: nowrap; height: 36px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 10%); } .table-1-card table th .draggable { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; } ================================================ FILE: src/components/tables/Table1/Table1.jsx ================================================ import { useEffect, useRef, useState, createRef } from "react"; import "./Table1.css"; const TableHeader = ({ index, column, columnRef, initResize }) => { const width = !!initResize ? column.width : "100%"; return ( {column.name} {!!initResize && ( initResize(e, index)} > )} ); }; export const Table1 = ({ columns, data }) => { const [columnState, setColumnState] = useState(columns); const [columnRefs, setColumnRefs] = useState([]); const wrapperRef = useRef(null); const activeIndex = useRef(null); const resize = (e) => { const columnsCopy = [...columns]; const column = columnsCopy[activeIndex.current]; const columnRef = columnRefs[activeIndex.current]; const nextWidth = e.clientX - 48 - columnRef.current.offsetLeft - (wrapperRef.current.offsetLeft - wrapperRef.current.scrollLeft); console.log("nextWidth", nextWidth); column.width = nextWidth; setColumnState(columnsCopy); }; const stopResize = () => { document.body.style.cursor = "default"; window.removeEventListener("mousemove", resize); window.removeEventListener("mouseup", stopResize); }; const initResize = (e, index) => { activeIndex.current = index; e.stopPropagation(); document.body.style.cursor = "col-resize"; window.addEventListener("mousemove", resize); window.addEventListener("mouseup", stopResize); }; useEffect(() => { setColumnRefs( Array(columns.length) .fill() .map((_, i) => columnRefs[i] || createRef()) ); }, []); return (
    {columnState.map((column, index) => ( ))} {data.map((item) => ( {columnState.map((column) => ( ))} ))}
    {item[column.name]}
    ); }; ================================================ FILE: src/components/tables/Table1/Table1Example.css ================================================ .page.table-1-page { background: linear-gradient(45deg, #2c3c5e, #1a2239); color: #f9f9f9; display: flex; align-items: flex-start; display: grid; place-items: center; } .table-1-card { background: rgb(255 255 255 / 3%); border: 2px solid rgb(255 255 255 / 3%); backdrop-filter: blur(10px); border-radius: 12px; padding: 24px; font-size: 12px; } .table-1-card .header { display: flex; justify-content: space-between; margin-bottom: 24px; } .table-1-card .header h2 { font-weight: 400; opacity: 0.6; display: flex; align-items: center; } .table-1-card .header button { background: #2e5fdc; color: rgb(255 255 255 / 96%); font-size: 12px; border: 0; border-radius: 20px; font-family: inherit; padding: 8px 14px; } ================================================ FILE: src/components/tables/Table1/Table1Example.jsx ================================================ import { Table1 } from "./Table1"; import "./Table1Example.css"; import logo from "./logo.svg"; const columns = [ { name: "name", width: 125, }, { name: "age", width: 50, }, { name: "level", width: 170, }, ]; const data = [ { name: "Alice Johnson", age: 29, level: "Intermediate", languages: ["Python", "JavaScript", "HTML"], }, { name: "Bob Smith", age: 35, level: "Advanced", languages: ["Java", "Kotlin", "Scala"], }, { name: "Charlie Evans", age: 23, level: "Beginner", languages: ["Python", "C++"], }, { name: "Diana Lee", age: 41, level: "Expert", languages: ["C#", "F#", "SQL"], }, { name: "Edward Kim", age: 28, level: "Intermediate", languages: ["JavaScript", "TypeScript", "Node.js"], }, { name: "Fiona Garcia", age: 32, level: "Advanced", languages: ["Ruby", "Go", "Elixir"], }, { name: "George Thompson", age: 26, level: "Intermediate", languages: ["PHP", "Python", "JavaScript"], }, ]; export const Table1Example = () => { return (

    Developers

    ); }; ================================================ FILE: src/components/tables/Table2/Table2.css ================================================ .table-2 { border-collapse: collapse; text-align: left; width: 100%; } .table-2 thead { position: sticky; top: 0; left: 0; z-index: 1; } .table-2 thead tr th:not(:last-child) { width: 120px; max-width: 120px; } .table-2 :is(th, td) { position: relative; overflow: hidden; white-space: nowrap; padding: 0 6px; height: 50px; font-size: 13px; } .table-2 th { font-weight: 500; user-select: none; text-transform: capitalize; color: #706d84; height: 56px; cursor: pointer; vertical-align: middle; transition: 0.3s; } .table-2 th i { font-size: 11px; translate: 0 -1px; margin-left: 6px; } .table-2 th:is(.active, :hover) { color: inherit; } .table-2 td { opacity: 0.65; transition: opacity 0.3s; } .table-2 tbody tr:hover td { opacity: 1; } .table-2 tr { cursor: pointer; border-bottom: 1px solid #34323c; } .table-2 tbody tr:last-child { border: 0; } .table-2 tbody tr:nth-child(odd) { background: #1e1d25; } ================================================ FILE: src/components/tables/Table2/Table2.jsx ================================================ import { useState } from "react"; import "./Table2.css"; const TableHeader = ({ column, onSort, sortOrder, sortColumn }) => { const isActive = column === sortColumn; return ( onSort(column)}> {column} {isActive && ( )} ); }; export const Table2 = ({ rows, columns }) => { const [sortColumn, setSortColumn] = useState(columns[0]); const [sortOrder, setSortOrder] = useState("asc"); const sortedRows = rows.sort((a, b) => { const [valA, valB] = [a[sortColumn], b[sortColumn]]; return typeof valA === typeof valB ? sortOrder === "asc" ? valA > valB ? 1 : -1 : valA < valB ? 1 : -1 : 0; }); const handleSort = (column) => { console.log("name", column); setSortColumn(column); setSortOrder( sortColumn !== column ? "asc" : sortOrder === "asc" ? "desc" : "asc" ); }; return ( {columns.map((column) => ( ))} {sortedRows.map((row) => ( {columns.map((column) => ( ))} ))}
    {row[column]}
    ); }; ================================================ FILE: src/components/tables/Table2/Table2Example.css ================================================ .table-2-page { background: #222129; color: #f5f3f9; margin: 0; height: 100vh; font-size: 110%; font-family: "Euclid Circular A", "Poppins"; } .table-2-page .wrapper { overflow: auto; position: relative; z-index: 2; } .table-2-page header { position: relative; overflow: hidden; margin: 0 0 18px; } .table-2-page header .content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 240px; max-width: 700px; margin: 0 auto; padding: 0 70px 60px; } .table-2-page header::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: 0; background: #5926fc; width: 500vw; aspect-ratio: 1/1; border-radius: 50%; } .table-2-page header button { font-family: inherit; background: rgb(0 0 0 / 16%); color: inherit; border: 0; border-radius: 8px; padding: 12px 18px 12px 20px; font-size: 13.5px; display: flex; align-items: center; gap: 4px; } .table-2-page header button span { font-size: 16px; translate: 0 -1px; } .table-2-page header h2 { font-size: 20px; font-weight: 400; display: flex; align-items: center; } .table-2-page header h2 i { margin-right: 8px; background: rgb(0 0 0 / 16%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; } .table-2-page .card { max-width: 600px; margin: 0 auto; position: relative; z-index: 1; background: #1a191e; border-radius: 8px; box-shadow: 0 30px 40px rgb(0 0 0 / 12%); padding: 10px 18px 18px; font-size: 12px; margin: -100px auto 30px; } @media (width < 706px) { .table-2-page .card { margin: -100px 50px 30px; } } ================================================ FILE: src/components/tables/Table2/Table2Example.jsx ================================================ import { Table2 } from "./Table2"; import "./Table2Example.css"; const rows = [ { name: "Zoe Blogs", level: "Intermediate", age: 21, language: "JavaScript", location: "USA", }, { name: "Jane Doe", level: "Advanced", age: 25, language: "Python", location: "Canada", }, { name: "Alice Smith", level: "Junior", age: 22, language: "Ruby", location: "UK", }, { name: "Bob Kohler", level: "Senior", age: 35, language: "C#", location: "Germany", }, { name: "Dana White", level: "Junior", age: 23, language: "PHP", location: "France", }, { name: "Ethan Hunt", level: "Advanced", age: 28, language: "JavaScript", location: "USA", }, { name: "Fiona Green", level: "Senior", age: 40, language: "Java", location: "Ireland", }, { name: "Luuk Black", level: "Intermediate", age: 30, language: "JavaScript", location: "Netherlands", }, { name: "Hannah Isak", level: "Junior", age: 24, language: "Kotlin", location: "Sweden", }, ]; const columns = ["name", "level", "language", "location"]; export const Table2Example = () => { return (

    {/* */} Developers

    ); }; ================================================ FILE: src/components/tables/Table3/Table3.css ================================================ .table-3 { width: 100%; border-collapse: collapse; } .table-3 td { padding: 16px; white-space: nowrap; } .table-3 tr td:last-of-type { text-align: right; } .table-3 th:first-of-type { width: 20px; } .table-3 tr td:first-child, .table-3 tr th:first-child { padding-right: 2px; } .table-3 tr td:last-child, .table-3 tr th:last-child { padding-right: 12px; } .table-3 th:nth-child(2) { width: 133px; max-width: 133px; min-width: 133px; } .table-3 th:nth-child(3) { width: 180px; max-width: 180px; min-width: 180px; } .table-3 th { padding: 20px 16px; font-weight: 500; text-align: left; text-transform: capitalize; } .table-3 :is(td, th) { border-bottom: 1px solid #2d2d2d; } .table-3-footer { display: flex; align-items: center; } .table-3-footer p { margin: 0; font-size: 14px; color: #8a8a8a; } .table-3-footer p em { color: #ffffff; font-style: normal; } .table-3-pagination { padding: 16px; display: flex; } .table-3-pagination > button { background: transparent; border: 1px solid #2d2d2d; border-right: 0; color: #ffffff; font-family: inherit; padding: 0 12px; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; font-size: 14px; transition: 0.3s; } .table-3-pagination > button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .table-3-pagination > button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right: 1px solid #2d2d2d; } .table-3-pagination > button:hover { background: rgb(255 255 255 / 1%); } .table-3-pagination > button.active { background: #2d2d2d; } ================================================ FILE: src/components/tables/Table3/Table3.jsx ================================================ import { useState } from "react"; import "./Table3.css"; import { Checkbox } from "./Table3Example"; const pageSize = 5; const PaginatedTable = ({ pageNumber, totalPages, totalRows, goToPage }) => { return (
    {[...Array(totalPages)].map((_, index) => ( ))}

    Viewing{" "} {pageNumber === 1 ? 1 : (pageNumber - 1) * pageSize + 1}- {pageNumber * pageSize} {" "} of {totalRows} rows

    ); }; export const Table3 = ({ columns, rows }) => { const [pageNumber, setPageNumber] = useState(1); const totalPages = Math.ceil(rows.length / pageSize); const paginateArray = (array, pageSize, pageNumber) => { return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize); }; const goToPage = (page) => setPageNumber(page); return ( <> {columns.map((column, index) => ( ))} {paginateArray(rows, pageSize, pageNumber).map((row, index) => ( {row.map((control, index) => ( ))} ))}
    {column}
    {control}
    ); }; ================================================ FILE: src/components/tables/Table3/Table3Example.css ================================================ .page.table-3-page { background: #141414; font-family: "SF Pro"; font-size: 14px; overflow: hidden; } .table-3-page .card { background: #1c1c1c; border-radius: 8px; width: 600px; border: 1px solid #2d2d2d; } .table-3-page header { display: flex; margin-bottom: 16px; } .table-3-page header > h2 { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 22px; } .table-3-page header > h2 > span { font-size: 19px; color: #626262; } .table-3-page button { cursor: pointer; background: #1c1c1c; } .table-3-page header > button { border: 1px solid #2d2d2d; color: #ffffff; font-family: inherit; border-radius: 6px; padding: 0 16px; display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; margin-left: 16px; font-size: 16px; } .table-3-page header > button.dropdown { width: auto; padding-right: 8px; gap: 6px; } .table-3-switch input { position: absolute; scale: 0; } .table-3-switch-control { position: relative; display: block; width: 42px; height: 22px; border-radius: 32px; background: #191919; border: 1px solid #2d2d2d; cursor: pointer; } .table-3-switch input:checked ~ .table-3-switch-control { background: #353535; } .table-3-switch input:checked ~ .table-3-switch-control::after { translate: 20px 0; } .table-3-switch-control::after { content: ""; position: absolute; top: 2px; left: 2px; height: 16px; width: 16px; background: #ffffff; border-radius: inherit; } .table-3-checkbox input { position: absolute; scale: 0; } .table-3-checkbox-control { position: relative; display: block; width: 20px; height: 20px; border-radius: 3px; background: #191919; border: 1px solid #2d2d2d; cursor: pointer; } .table-3-checkbox input:checked ~ .table-3-checkbox-control { background: #ffffff; } .table-3-checkbox input:checked ~ .table-3-checkbox-control::after { opacity: 1; } .table-3-checkbox-control::after { content: ""; position: absolute; top: 2px; left: 50%; translate: -50% 0; height: 8px; width: 4px; border-right: 3px solid #141414; border-bottom: 3px solid #141414; rotate: 45deg; opacity: 0; } .table-3-id { display: flex; align-items: center; gap: 8px; } .table-3-id-img-wrapper { background: #353535; display: grid; place-items: center; padding: 7px; border-radius: 50%; } .table-3-id img { width: 14px; } .table-3-status { position: relative; border: 1px solid #2d2d2d; border-radius: 6px; padding-left: 22px; padding-right: 8px; display: inline-flex; align-items: center; height: 24px; font-size: 14px; text-transform: capitalize; } .table-3-status::after { content: ""; position: absolute; top: 50%; left: 8px; width: 8px; height: 8px; border-radius: 3px; translate: 0 -50%; background: #ffffff; } .table-3-status.available::after { background: #46ad7c; } .table-3-status.issue::after { background: #f35a42; } .table-3-status.busy::after { background: #fd9d27; } .table-3-progress { position: relative; display: inline-block; background: #353535; width: 100px; height: 8px; border-radius: 5px; margin-right: 12px; } .table-3-progress::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: var(--width); border-radius: inherit; background: #ffffff; transition: 0.3s; } .page-3-id-header { display: flex; align-items: center; } .page-3-id-header span { font-size: 18px; margin-left: 4px; } ================================================ FILE: src/components/tables/Table3/Table3Example.jsx ================================================ import { Table3 } from "./Table3"; import "./Table3Example.css"; import image from "./image.svg"; const Icon = ({ children }) => ( {children} ); const columns = [ Vehicle ID arrow_downward , "progress", "status", "active", "", ]; const Progress = ({ progress }) => ( <> {progress}% ); const Status = ({ status }) => (
    {status}
    ); export const Checkbox = ({ checked }) => ( ); const Id = ({ id }) => (
    {id}
    ); const Switch = ({ checked }) => ( ); const More = () => more_vert; const rows = [ [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], [ , , , , , , ], ]; export const Table3Example = () => { return (

    Reservations info

    ); }; ================================================ FILE: src/components/tables/index.js ================================================ export * from "./Table1/Table1Example"; export * from "./Table2/Table2Example"; export * from "./Table3/Table3Example"; ================================================ FILE: src/components/widgets/Widget1/Widget1.jsx ================================================ import { createRef, useEffect, useState } from "react"; import "./styles.css"; const buttonWidth = 56; const tabWidth = 300; const tabs = [ { title: "Home", icon: "home", content: "Some information inside the tab widget, that will auto resize it's height.", }, { title: "Settings", icon: "settings", content: "Some information inside the tab widget, that will auto resize it's height. This one has extra information so is a bit taller. Let's add one more sentence to see it's height grow even more!", }, { title: "Account", icon: "lock", content: "Some information inside the tab widget, that will auto resize it's height. This one has extra information so is a bit taller. ", }, ]; const WidgetHeader = ({ onClick, activeIndex }) => { return (
    {tabs.map((tab, index) => ( ))}
    ); }; const WidgetTab = ({ tabRef, title, content }) => { return (

    {title}

    {content}

    ); }; export const Widget1 = () => { const [activeIndex, setActiveIndex] = useState(0); const [height, setHeight] = useState(140); const [refs, setRefs] = useState([]); const handleClick = (index) => { setActiveIndex(index); setHeight(refs[index].current.clientHeight); }; useEffect(() => { setRefs(tabs.map(() => createRef())); }, []); useEffect(() => { if (!refs.length) return; setHeight(refs[0].current.clientHeight); }, [refs.length]); return (
    {tabs.map((tab, index) => ( ))}
    ); }; export const Widget1Example = () => (
    ); ================================================ FILE: src/components/widgets/Widget1/styles.css ================================================ :root { --color-primary: #5644fd; --tab-width: 300px; --button-width: 56px; } .page.widget-1-page { display: flex; flex-direction: column; justify-content: start; padding-top: 260px; font-family: "Euclid Circular A", "Poppins"; line-height: 1.5; background: #24232b; color: #f9f9f9; } .widget { background: #18181d; width: var(--tab-width); border-radius: 8px; } .widget h2 { margin: 0; } .widget > header { position: relative; display: flex; border-bottom: 1px solid rgb(255 255 255 / 10%); } .widget > header > button { padding: 20px 0; font-size: 15px; width: var(--button-width); cursor: pointer; background: transparent; color: rgb(255 255 255 / 50%); display: grid; place-items: center; border: 0; font-size: 22px; transition: 0.5s; } .widget > header > button:not(.active) { opacity: 0.7; } .widget > header > button:hover:not(.active) { opacity: 1; } .widget > header > button.active { color: var(--color-primary); } .widget .content { position: relative; overflow: hidden; transition: 0.5s; } .widget .content-inner { position: absolute; top: 0; left: 0; display: flex; align-items: start; width: calc(var(--tab-width) * 3); transition: 0.5s; } .widget .underline { position: absolute; left: 0; bottom: 0; width: var(--button-width); height: 3px; background: var(--color-primary); transition: 0.2s; } .widget h2 { margin: 0 0 10px; font-size: 15px; font-weight: 400; } .widget p { margin: 0; font-size: 13px; opacity: 0.5; } .widget .content-inner > div { width: inherit; padding: 20px; } ================================================ FILE: src/components/widgets/Widget2/Widget2.jsx ================================================ import { useState } from "react"; import "./styles.css"; const menuHeight = getComputedStyle(document.body).getPropertyValue( "--widget-2-menu-height" ); const items = [ { name: "Home", content: "Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.", }, { name: "Security", icon: "Encrypted", content: "Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.", }, { name: "Stacks", content: "Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.", }, { name: "Settings", content: "Vivamus volutpat ipsum ac ipsum feugiat, vel molestie elit vestibulum. Donec luctus commodo dictum. Aenean in turpis erat. Vestibulum imperdiet nibh. Ipsum ac ipsum feugiat, vel molestie.", }, ]; export const Widget2 = () => { const [activeBlock, setActiveBlock] = useState(0); const toggleMenuBlock = (index) => setActiveBlock(index); return (
    {items.map((item, index) => ( ))}
    {items.map((item) => (

    {item.name}

    {item.content}

    ))}
    ); }; ================================================ FILE: src/components/widgets/Widget2/styles.css ================================================ :root { --widget-2-color-primary: #195adc; --widget-2-sidebar-width: 130px; --widget-2-menu-height: 200px; } .page.widget-2-page { margin: 0; display: grid; place-items: center; background: linear-gradient(-135deg, var(--widget-2-color-primary), #0f3278); color: #f0f5ff; } .widget-2-card { display: flex; padding: 0 20px; width: 440px; height: var(--widget-2-menu-height); border-radius: 10px; background: #101115; box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06); } .widget-2-card .buttons { padding-top: 20px; width: var(--widget-2-sidebar-width); } .widget-2-card .buttons button { margin: 0; font-size: 14px; width: 100%; height: 40px; padding: 0 0 0 12px; background: transparent; border-radius: 6px; border: 0; display: flex; gap: 8px; align-items: center; font-weight: 400; font-family: inherit; cursor: pointer; color: inherit; } .widget-2-card .buttons button:focus { outline-color: var(--widget-2-color-primary); outline-offset: 0; } .widget-2-card .buttons button:hover { background-color: rgb(255 255 255 / 4%); } .widget-2-card .buttons button span { font-size: 16px; } .widget-2-card .buttons button.active { background: var(--widget-2-color-primary); color: #f9f9f9; } .widget-2-card .wrapper { position: relative; overflow: hidden; flex: 1 1 auto; } .widget-2-card .wrapper::before, .widget-2-card .wrapper::after { content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 36px; } .widget-2-card .wrapper::before { top: 0; background: linear-gradient(#101115, rgb(24 24 29 / 0%)); } .widget-2-card .wrapper::after { bottom: 0; background: linear-gradient(rgb(24 24 29 / 0%), #101115); } .widget-2-card .content { position: absolute; z-index: 1; top: 0; left: 0; height: calc(var(--widget-2-menu-height) * 3); transition: 0.6s; } .widget-2-card .content p { display: flex; align-items: center; line-height: 1.6; font-size: 13px; margin: 0; opacity: 0.5; } .widget-2-card .block { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; height: var(--widget-2-menu-height); } .widget-2-card .block h2 { margin: 0 0 6px; font-size: 18px; font-weight: 400; } ================================================ FILE: src/components/widgets/index.js ================================================ export * from "./Widget1/Widget1"; export * from "./Widget2/Widget2"; ================================================ FILE: src/index.css ================================================ body { margin: 0; /* background: #6a8faa; */ color: #f9f9f9; background: #2b2a2f; font-family: "Euclid Circular B", "Poppins"; overflow: hidden; } * { box-sizing: border-box; } .page { width: 100vw; height: 100vh; display: grid; place-items: center; } ================================================ FILE: src/main.jsx ================================================ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( , ) ================================================ FILE: src/routes.jsx ================================================ import { AutoSuggestExample, Card1, Card2Example, Card3Example, Card4Example, Card5Example, Card6Example, Card7Example, Carousel1, Carousel2, Carousel3, DeleteButton, Dropdown1Example, Dropdown2Example, Dropdown3, Dropdown4Example, Dropdown5Example, Dropdown6Example, Dropdown7, EditableTitleExample, FabButton, Accordion1Example, Accordion2Example, Accordion3Example, Login1, Login2, Login3, Login4, Login5, Login6, Modal1, Modal2Example, Navbar1, Navbar2, Navbar3, Navbar4, Parallax1, Parallax2, PasswordStrengthExample, PasswordStrength2Example, PasswordStrength3Example, PasswordStrength4Example, PasswordVisibilityExample, RcSlider, ReactDropzone, ReactXarrows, ScrollReveal, Sidebar1, Sidebar2, Sidebar3, Sidebar4, Sidebar5, Sidebar6, Sidebar7, Sidebar8, Sidebar9, Sidebar10, Sidebar11, Sidebar12, Sidebar13, Sidebar14, Sidebar15, Signup1, SliderExample, Table1Example, Table2Example, Table3Example, TrashButton, TypedMessageExample, Widget1Example, Widget2, } from "./components"; export const routes = [ { name: "DeleteButton", path: "/buttons/delete-button", element: , }, { name: "TrashButton", path: "/buttons/trash-button", element: , }, { name: "Sidebar1", path: "/sidebars/sidebar-1", element: , }, { name: "Controls - PasswordStrength", path: "/controls/password-strength", element: , }, { name: "ScrollReveal", path: "/gsap/scroll-reveal", element: , }, { name: "Accordion1", path: "/accordions/accordion-1", element: , }, { name: "Accordion2", path: "/accordions/accordion-2", element: , }, { name: "Login1", path: "/logins/login-1", element: , }, { name: "Sidebar2", path: "/sidebars/sidebar-2", element: , }, { name: "Card1", path: "/cards/card-1", element: , }, { name: "Modal1", path: "/modals/modal-1", element: , }, { name: "Parallax1", path: "/parallax/parallax-1", element: , }, { name: "Dropdown1", path: "/dropdowns/dropdown-1", element: , }, { name: "Widget1", path: "/widgets/widget-1", element: , }, { name: "Controls - AutoSuggest", path: "/controls/auto-suggest", element: , }, { name: "Sidebar3", path: "/sidebars/sidebar-3", element: , }, { name: "Carousel1", path: "/carousels/carousel-1", element: , }, { name: "RcSlider", path: "/libraries/rc-slider", element: , }, { name: "Modal2", path: "/modals/modal-2", element: , }, { name: "Navbar1", path: "/navbars/navbar-1", element: , }, { name: "Card2", path: "/cards/card-2", element: , }, { name: "Sidebar4", path: "/sidebars/sidebar-4", element: , }, { name: "Carousel2", path: "/carousels/carousel-2", element: , }, { name: "Table1", path: "/tables/table-1", element: , }, { name: "Sidebar5", path: "/sidebars/sidebar-5", element: , }, { name: "Widget2", path: "/widgets/widget-2", element: , }, { name: "Navbar2", path: "/navbars/navbar-2", element: , }, { name: "Dropdown2", path: "/dropdowns/dropdown-2", element: , }, { name: "Sidebar6", path: "/sidebars/sidebar-6", element: , }, { name: "Sidebar7", path: "/sidebars/sidebar-7", element: , }, { name: "ReactDropzone", path: "/libraries/react-dropzone", element: , }, { name: "Dropdown3", path: "/dropdowns/dropdown-3", element: , }, { name: "Table2", path: "/tables/table-2", element: , }, { name: "Navbar3", path: "/navbars/navbar-3", element: , }, { name: "FabButton", path: "/button/fab-button", element: , }, { name: "Controls - PasswordVisibility", path: "/controls/password-visibility", element: , }, { name: "Table3", path: "/tables/table-3", element: , }, { name: "Dropdown4", path: "/dropdowns/dropdown-4", element: , }, { name: "Sidebar8", path: "/sidebars/sidebar-8", element: , }, { name: "ReactXarrows", path: "/libraries/react-xarrows", element: , }, { name: "GSAP - TypedMessage", path: "/gsap/typed-message", element: , }, { name: "Card3", path: "/cards/card-3", element: , }, { name: "Controls - EditableText", path: "/controls/editable-text", element: , }, { name: "Sidebar9", path: "/sidebars/sidebar-9", element: , }, { name: "Sidebar10", path: "/sidebars/sidebar-10", element: , }, { name: "Controls - Slider", path: "/controls/slider", element: , }, { name: "Carousel3", path: "/carousels/carousel-3", element: , }, { name: "Card4", path: "/cards/card-4", element: , }, { name: "Parallax2", path: "/parallax/parallax-2", element: , }, { name: "Dropdown5", path: "/dropdown/dropdown-5", element: , }, { name: "Controls - PasswordStrength2", path: "/controls/password-strength-2", element: , }, { name: "Accordion3", path: "/accordions/accordion-3", element: , }, { name: "Sidebar11", path: "/sidebars/sidebar-11", element: , }, { name: "Card5", path: "/cards/card-5", element: , }, { name: "Login2", path: "/logins/login-2", element: , }, { name: "Card6", path: "/cards/card-6", element: , }, { name: "Dropdown6", path: "/dropdowns/dropdown-6", element: , }, { name: "Sidebar12", path: "/sidebars/sidebar-12", element: , }, { name: "Login3", path: "/logins/login-3", element: , }, { name: "Sidebar13", path: "/sidebars/sidebar-13", element: , }, { name: "Sidebar14", path: "/sidebars/sidebar-14", element: , }, { name: "Navbar4", path: "/navbars/navbar-4", element: , }, { name: "Sidebar15", path: "/sidebars/sidebars-15", element: , }, { name: "Login4", path: "/logins/login-4", element: , }, { name: "Signup1", path: "/signup/signup-1", element: , }, { name: "Card7", path: "/cards/card-7", element: , }, { name: "Controls - PasswordStrength3", path: "/controls/password-strength-3", element: , }, { name: "Controls - PasswordStrength4", path: "/controls/password-strength-4", element: , }, { name: "Dropdown7", path: "/dropdowns/dropdown-7", element: , }, { name: "Login5", path: "/logins/login-5", element: , }, { name: "Login6", path: "/logins/login-6", element: , }, ]; ================================================ FILE: vite.config.js ================================================ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], })