diff --git a/package-lock.json b/package-lock.json index 90395dd..aacca99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@radix-ui/react-dropdown-menu": "^2.0.5", + "@radix-ui/react-icons": "^1.3.0", "@react-three/drei": "9.32.4", "@react-three/fiber": "8.8.7", "@react-three/postprocessing": "2.6.2", @@ -644,6 +645,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", diff --git a/package.json b/package.json index c79b490..4bb28f1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@radix-ui/react-dropdown-menu": "^2.0.5", + "@radix-ui/react-icons": "^1.3.0", "@react-three/drei": "9.32.4", "@react-three/fiber": "8.8.7", "@react-three/postprocessing": "2.6.2", diff --git a/public/svgs/TrustAuthXLogo.tsx b/public/svgs/TrustAuthXLogo.tsx index c5aa9d8..f739e36 100644 --- a/public/svgs/TrustAuthXLogo.tsx +++ b/public/svgs/TrustAuthXLogo.tsx @@ -1,24 +1,50 @@ -import React from 'react'; +import React from "react"; export const TrustAuthXLogo = () => { - - return ( - - - - - - - - - - - - - - - - - ); -} - + return ( + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 0b6388e..dfbefc0 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,55 +1,111 @@ -import React from "react"; +import React, { useState } from "react"; import { TrustAuthXLogo } from "../../public/svgs/TrustAuthXLogo"; -import { Vector } from "../../public/svgs/Vector"; +import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import { HamburgerMenuIcon } from "@radix-ui/react-icons"; import { GithubLogo } from "../../public/svgs/Github"; import { VectorRight } from "../../public/svgs/VectorRight"; +const internalLinks = [ + { name: "Products" }, + { name: "Customers" }, + { name: "Enterprise" }, + { name: "Pricing" }, + { name: "Resources" }, + { name: "Contact us" }, +]; + +const externalLinks = [ + { name: "Github" }, + { name: "Docs" }, + { name: "Sign in" }, + { name: "Let’s Get Started" }, +]; + +const ExternalLinks = () => ( + <> +
+ +
Github
+
+
Docs
+
Sign in
+ +
+
+ Let’s Get Started +
+
+ +
+ +); + function Navbar() { + const [isOpen, setIsOpen] = useState(false); + return ( -
- {/*Internal Links*/} -
-
+ <> +
+ {/*Internal Links*/} +
-
-
-
Products
-
Customers
-
Enterprise
-
Pricing
-
Resources
-
- Contact us +
+ {internalLinks.map((link) => ( +
+ {link.name} +
+ ))}
-
- {/*External Links*/} -
-
- -
Github
-
-
Docs
-
Sign in
-
-
- Let’s Get Started -
-
- + {/*External Links*/} +
+
+ + {/* Mobile Menu*/} + + + + + + + + {internalLinks.map((link) => ( + + {link.name} + + ))} + + + + + + GitHub + + + Docs + + + SignIn + +
+
+ Let’s Get Started +
+
+ +
+ + +
-
+ ); } diff --git a/src/components/interactivePrism/index.tsx b/src/components/interactivePrism/index.tsx index 3efb965..3f20aae 100644 --- a/src/components/interactivePrism/index.tsx +++ b/src/components/interactivePrism/index.tsx @@ -4,11 +4,11 @@ "use client"; import * as THREE from "three"; -import { useRef, useCallback, useState } from "react"; -import { Canvas, useFrame, extend } from "@react-three/fiber"; -import { Bloom, EffectComposer } from "@react-three/postprocessing"; -import { PerformanceMonitor, usePerformanceMonitor } from '@react-three/drei'; -import { round } from 'lodash'; // Import the round function +import { useCallback, useRef, useState } from "react"; +import { Canvas, useFrame } from "@react-three/fiber"; +import { EffectComposer } from "@react-three/postprocessing"; +import { PerformanceMonitor, usePerformanceMonitor } from "@react-three/drei"; +import { round } from "lodash"; // Import the round function import { Beam } from "./Beam/Beam"; import { Rainbow } from "./Rainbow"; import { Prism } from "./Prism"; @@ -19,6 +19,7 @@ export function lerp(object, prop, goal, speed = 0.1) { } const vector = new THREE.Vector3(); + export function lerpV3(value, goal, speed = 0.1) { value.lerp(vector.set(...goal), speed); } @@ -35,18 +36,18 @@ export function calculateRefractionAngle( function Effects() { const [hasEffects, setHasEffects] = useState(true); - usePerformanceMonitor({ onChange: ({ factor }) => { - if (hasEffects && factor > 0.5) { - // Decrease the qualityScale of your effects. - effect.qualityScale = round(0.5 + 0.5 * factor, 1); - } - // Handle other conditions for declining or inclining quality - }}); + // usePerformanceMonitor({ + // onChange: ({ factor }) => { + // if (hasEffects && factor > 0.5) { + // // Decrease the qualityScale of your effects. + // effect.qualityScale = round(0.5 + 0.5 * factor, 1); + // } + // // Handle other conditions for declining or inclining quality + // }, + // }); return ( - - { /* Your post-processing effects here */ } - + {/* Your post-processing effects here */} ); } @@ -70,7 +71,7 @@ export default function InteractivePrism({ camera={{ position: [0, 0, 20], zoom: 65 }} > - setDpr(1)} onIncline={() => setDpr(2)} >