diff --git a/app/about/page.tsx b/app/about/page.tsx index cb9adc6..e92480a 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,47 +1,45 @@ -import React, { useRef, useEffect, useState } from "react"; +"use client" +import React, { useRef, useEffect, useState } from "react" const MouseTrackingGlowEffect: React.FC = () => { - const [position, setPosition] = useState({ x: 0, y: 0 }); - const [isHovered, setIsHovered] = useState(false); - const containerRef = useRef(null); + const [position, setPosition] = useState({ x: 0, y: 0 }) + const [isHovered, setIsHovered] = useState(false) + const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (event: MouseEvent) => { - setPosition({ x: event.clientX, y: event.clientY }); - }; + setPosition({ x: event.clientX, y: event.clientY }) + } const handleMouseEnter = () => { - setIsHovered(true); - }; + setIsHovered(true) + } const handleMouseLeave = () => { - setIsHovered(false); - }; + setIsHovered(false) + } - const container = containerRef.current; + const container = containerRef.current if (container) { - container.addEventListener("mousemove", handleMouseMove); - container.addEventListener("mouseenter", handleMouseEnter); - container.addEventListener("mouseleave", handleMouseLeave); + container.addEventListener("mousemove", handleMouseMove) + container.addEventListener("mouseenter", handleMouseEnter) + container.addEventListener("mouseleave", handleMouseLeave) } return () => { if (container) { - container.removeEventListener("mousemove", handleMouseMove); - container.removeEventListener("mouseenter", handleMouseEnter); - container.removeEventListener("mouseleave", handleMouseLeave); + container.removeEventListener("mousemove", handleMouseMove) + container.removeEventListener("mouseenter", handleMouseEnter) + container.removeEventListener("mouseleave", handleMouseLeave) } - }; - }, []); + } + }, []) return ( -
+
{ }} >
- ); -}; + ) +} -export default MouseTrackingGlowEffect; +export default MouseTrackingGlowEffect diff --git a/app/page.tsx b/app/page.tsx index 809cdc0..b33db20 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -14,6 +14,7 @@ import { Glow, GlowCapture } from "@codaworks/react-glow" import StarBackground from "components/StarBackground/StarBackground" import { Textarea } from "@nextui-org/react" import ImageFilter from "components/ImageFilter/ImageFilter" +import { BackgroundBeams } from "components/Ui/BackgroundBeams" export default function Web() { const [init, setInit] = useState(false) @@ -25,51 +26,54 @@ export default function Web() { return (
-
-
-
-

- Experience the next dimension -

-

- Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software - solutions powered by AI. -

- - +
+
+
+
+

+ Experience the next dimension +

+

+ Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software + solutions powered by AI. +

+ + +
-
-
- +
+ +
+ {/* */}
diff --git a/components/Ui/BackgroundBeams.tsx b/components/Ui/BackgroundBeams.tsx new file mode 100644 index 0000000..be7dd0f --- /dev/null +++ b/components/Ui/BackgroundBeams.tsx @@ -0,0 +1,139 @@ +"use client" +import React from "react" +import { motion } from "framer-motion" +import { cn } from "./../../utils/cn" + +export const BackgroundBeams = React.memo(({ className }: { className?: string }) => { + const paths = [ + "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875", + "M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867", + "M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859", + "M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851", + "M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843", + "M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835", + "M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827", + "M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819", + "M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811", + "M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803", + "M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795", + "M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787", + "M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779", + "M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771", + "M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763", + "M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755", + "M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747", + "M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739", + "M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731", + "M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723", + "M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715", + "M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707", + "M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699", + "M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691", + "M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683", + "M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675", + "M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667", + "M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659", + "M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651", + "M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643", + "M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635", + "M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627", + "M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619", + "M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611", + "M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603", + "M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595", + "M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587", + "M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579", + "M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571", + "M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563", + "M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555", + "M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547", + "M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539", + "M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531", + "M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523", + "M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515", + "M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507", + "M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499", + "M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491", + "M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483", + ] + return ( +
+ + + + {paths.map((path, index) => ( + + ))} + + {paths.map((path, index) => ( + + + + + + + ))} + + + + + + + + +
+ ) +}) + +BackgroundBeams.displayName = "BackgroundBeams" diff --git a/package.json b/package.json index 1b25687..1c25ded 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,8 @@ "@vercel/otel": "^0.3.0", "class-variance-authority": "^0.7.0", "framer-motion": "^11.0.25", + "clsx": "^2.1.0", + "framer-motion": "^11.0.25", "lodash": "^4.17.21", "next": "^14.0.3", "next-compose-plugins": "^2.2.1", @@ -64,7 +66,7 @@ "react-dom": "^18.2.0", "react-icons": "^5.0.1", "react-tsparticles": "^2.12.2", - "tailwind-merge": "^2.0.0", + "tailwind-merge": "^2.2.2", "tsparticles": "^3.3.0", "zod": "^3.22.4" }, diff --git a/tailwind.config.js b/tailwind.config.js index c869d7c..d392dd9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,6 +2,9 @@ const { pick, omit } = require("lodash") const colors = require("tailwindcss/colors") const defaultTheme = require("tailwindcss/defaultTheme") +const { + default: flattenColorPalette, +} = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", @@ -104,9 +107,21 @@ module.exports = { }, }, plugins: [ - require('@codaworks/react-glow/tailwind') + require('@codaworks/react-glow/tailwind'), + addVariablesForColors ], future: { hoverOnlyWhenSupported: true, }, } + +function addVariablesForColors({ addBase, theme }) { + let allColors = flattenColorPalette(theme("colors")); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ":root": newVars, + }); +} diff --git a/utils/cn.ts b/utils/cn.ts new file mode 100644 index 0000000..690b1ac --- /dev/null +++ b/utils/cn.ts @@ -0,0 +1,6 @@ +import { ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/yarn.lock b/yarn.lock index 4150684..c2846d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1751,20 +1751,13 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.20.13": +"@babel/runtime@^7.20.13", "@babel/runtime@^7.24.0": version "7.24.4" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz" integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA== dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.23.1": - version "7.23.4" - resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz" - integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg== - dependencies: - regenerator-runtime "^0.14.0" - "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.24.0", "@babel/template@^7.3.3": version "7.24.0" resolved "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz" @@ -9231,7 +9224,7 @@ clsx@^1.2.1: resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== -clsx@^2.0.0: +clsx@^2.0.0, clsx@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz" integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg== @@ -11451,6 +11444,13 @@ framer-motion@6.5.1: optionalDependencies: "@emotion/is-prop-valid" "^0.8.2" +framer-motion@^11.0.25: + version "11.0.25" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.25.tgz#9d5075aa82a6f336814273b7a5ea4cc93462ced0" + integrity sha512-mRt7vQGzA7++wTgb+PW1TrlXXgndqR6hCiJ48fXr2X9alte2hPQiAq556HRwDCt0Q5X98MNvcSe4KUa27Gm5Lg== + dependencies: + tslib "^2.4.0" + framesync@6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz" @@ -17543,12 +17543,12 @@ tailwind-merge@^1.14.0: resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz" integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ== -tailwind-merge@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.0.0.tgz" - integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw== +tailwind-merge@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.2.tgz#87341e7604f0e20499939e152cd2841f41f7a3df" + integrity sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw== dependencies: - "@babel/runtime" "^7.23.1" + "@babel/runtime" "^7.24.0" tailwind-merge@1.8.1: version "1.8.1"