diff --git a/package-lock.json b/package-lock.json index 09db2398..95f15534 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@testing-library/user-event": "^14.5.2", "@vercel/analytics": "^1.5.0", "canvas-confetti": "^1.9.3", + "clsx": "^2.1.1", "cobe": "^0.6.3", "devdisplay": "file:", "flag": "^5.0.1", @@ -27,6 +28,7 @@ "html2canvas": "^1.4.1", "jspdf": "^3.0.2", "lucide-react": "^0.545.0", + "motion": "^12.23.24", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.5", @@ -38,6 +40,7 @@ "react-vertical-timeline-component": "^3.5.3", "sitemap": "^8.0.0", "styled-components": "^6.1.15", + "tailwind-merge": "^3.3.1", "web-vitals": "^5.0.3", "yocto-queue": "^1.2.0" }, @@ -6746,6 +6749,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -9380,12 +9384,12 @@ } }, "node_modules/framer-motion": { - "version": "12.23.22", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz", - "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==", + "version": "12.23.24", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz", + "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==", "license": "MIT", "dependencies": { - "motion-dom": "^12.23.21", + "motion-dom": "^12.23.23", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, @@ -13161,10 +13165,36 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion": { + "version": "12.23.24", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz", + "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.23.24", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/motion-dom": { - "version": "12.23.21", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz", - "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==", + "version": "12.23.23", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", + "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==", "license": "MIT", "dependencies": { "motion-utils": "^12.23.6" @@ -18547,6 +18577,16 @@ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, + "node_modules/tailwind-merge": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz", + "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", diff --git a/package.json b/package.json index 561512d3..c1a09583 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@testing-library/user-event": "^14.5.2", "@vercel/analytics": "^1.5.0", "canvas-confetti": "^1.9.3", + "clsx": "^2.1.1", "cobe": "^0.6.3", "devdisplay": "file:", "flag": "^5.0.1", @@ -22,6 +23,7 @@ "html2canvas": "^1.4.1", "jspdf": "^3.0.2", "lucide-react": "^0.545.0", + "motion": "^12.23.24", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.5", @@ -33,6 +35,7 @@ "react-vertical-timeline-component": "^3.5.3", "sitemap": "^8.0.0", "styled-components": "^6.1.15", + "tailwind-merge": "^3.3.1", "web-vitals": "^5.0.3", "yocto-queue": "^1.2.0" }, diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 248c4abf..138fb860 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,11 +1,11 @@ import React, { useState, useEffect } from 'react'; -import { FiChevronDown, FiArrowRight, FiHome, FiBarChart2, FiPieChart } from 'react-icons/fi'; +import { FiChevronDown } from 'react-icons/fi'; import { AnimatePresence, motion } from 'framer-motion'; -// import { FiUser, FiBriefcase, FiClipboard } from 'react-icons/fi'; const Navbar = () => { const [selected, setSelected] = useState(null); const [dir, setDir] = useState(null); + const [menuOpen, setMenuOpen] = useState(false); const handleSetSelected = (menu) => { if (typeof selected === 'number' && typeof menu === 'number') { @@ -17,121 +17,164 @@ const Navbar = () => { }; return ( - ); }; -const Tab = ({ children, tab, handleSetSelected, selected }) => { - return ( - - ); -}; + /> + + + +); -const Content = ({ selected, dir }) => { - return ( - - - +const Tabs = ({ selected, handleSetSelected, dir }) => ( +
handleSetSelected(null)} className="relative flex gap-2"> + {TABS.map((t) => ( + + {t.title} + + ))} +
+); - {TABS.map((t) => ( -
- {selected === t.id && ( - - - - )} -
- ))} - - ); -}; +const Tab = ({ children, tab, handleSetSelected, selected }) => ( + +); + +const Content = ({ selected, dir }) => ( + + + + + {TABS.map((t) => ( +
+ {selected === t.id && ( + + + + )} +
+ ))} + +); const Bridge = () =>
; const Nub = ({ selected }) => { const [left, setLeft] = useState(0); - - useEffect(() => { - moveNub(); - }, [selected]); + useEffect(() => moveNub(), [selected]); const moveNub = () => { if (selected) { const hoveredTab = document.getElementById(`shift-tab-${selected}`); const overlayContent = document.getElementById('overlay-content'); - if (!hoveredTab || !overlayContent) return; - const tabRect = hoveredTab.getBoundingClientRect(); const { left: contentLeft } = overlayContent.getBoundingClientRect(); - const tabCenter = tabRect.left + tabRect.width / 2 - contentLeft; - setLeft(tabCenter); } }; return ( { ); }; +/* ---------------- Original Tab Contents ---------------- */ const Developers = () => (
@@ -230,36 +274,6 @@ const Developers = () => (
); -// const VerifyNow = () => ( -// -// ); - const Connect = () => (
@@ -333,22 +347,9 @@ const Explore = () => ( ); const TABS = [ - { - title: 'Developers', - Component: Developers, - }, - { - title: 'Connect', - Component: Connect, - }, - // { - // title: 'Verify Now', - // Component: VerifyNow, - // }, - { - title: 'Explore', - Component: Explore, - }, + { title: 'Developers', Component: Developers }, + { title: 'Connect', Component: Connect }, + { title: 'Explore', Component: Explore }, ].map((n, idx) => ({ ...n, id: idx + 1 })); export default Navbar;