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 = () => (
+ <>
+
+ 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*/}
-
-
-
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)}
>