Change hero visual from 3D to 2.5D #621
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,5 +12,4 @@ export const baseOptions: BaseLayoutProps = { | |
| nav: { | ||
| title: <Logo />, | ||
| }, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| "use client"; | ||
|
|
||
| import { useTheme } from "next-themes"; | ||
| import { useEffect, useRef, useState } from "react"; | ||
|
|
||
| /** | ||
| * HeroVisual component creates an interactive 2.5D visual using CSS transforms. | ||
| * It features a mouse-following tilt effect and theme-aware code highlights. | ||
| */ | ||
| export function HeroVisual() { | ||
| const { resolvedTheme } = useTheme(); | ||
| const [mounted, setMounted] = useState(false); | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); | ||
|
|
||
| useEffect(() => { | ||
| setMounted(true); | ||
| }, []); | ||
|
|
||
| const handleMouseMove = (e: React.MouseEvent) => { | ||
| if (!containerRef.current) return; | ||
| const rect = containerRef.current.getBoundingClientRect(); | ||
| const x = (e.clientX - rect.left) / rect.width - 0.5; | ||
| const y = (e.clientY - rect.top) / rect.height - 0.5; | ||
| setMousePos({ x, y }); | ||
| }; | ||
|
|
||
| const handleMouseLeave = () => { | ||
| setMousePos({ x: 0, y: 0 }); | ||
| }; | ||
|
|
||
| if (!mounted) { | ||
| return <div className="w-full aspect-square" />; | ||
| } | ||
|
|
||
| const syntaxColors = { | ||
| primary: resolvedTheme === "dark" ? "text-white" : "text-blue-950", | ||
| secondary: resolvedTheme === "dark" ? "text-white" : "text-blue-800", | ||
| punctuation: | ||
| resolvedTheme === "dark" ? "text-yellow-200" : "text-yellow-900", | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| ref={containerRef} | ||
| onMouseMove={handleMouseMove} | ||
| onMouseLeave={handleMouseLeave} | ||
| role="img" | ||
| aria-label="Interactive 2.5D visual representing ArkEnv's typesafe environment variables" | ||
| className="relative w-full max-w-125 mx-auto lg:ml-auto lg:mt-8 aspect-square flex items-center justify-center perspective-[1000px] group select-none" | ||
| > | ||
| {/* Ambient Glow Background */} | ||
| <div | ||
| className="absolute inset-0 bg-blue-500/10 dark:bg-blue-400/5 rounded-full blur-[80px] transform-gpu transition-transform duration-500" | ||
| style={{ | ||
| transform: `translate3d(${mousePos.x * 40}px, ${mousePos.y * 40}px, 0)`, | ||
| }} | ||
| /> | ||
|
|
||
| {/* The 2.5D Platform / Card */} | ||
| <div | ||
| className="relative w-75 h-75 transition-transform duration-300 ease-out transform-gpu" | ||
| style={{ | ||
| transformStyle: "preserve-3d", | ||
| transform: `rotateY(${mousePos.x * 20}deg) rotateX(${-mousePos.y * 20}deg)`, | ||
| }} | ||
| > | ||
| {/* Glass Base Layer */} | ||
| <div | ||
| className="absolute inset-0 bg-white/5 dark:bg-white/5 border border-white/20 dark:border-white/10 rounded-3xl backdrop-blur-md shadow-2xl" | ||
| style={{ transform: "translateZ(0px)" }} | ||
| /> | ||
|
|
||
| {/* Floating SVG Icon */} | ||
| <div | ||
| className="absolute inset-0 flex items-center justify-center transform-gpu" | ||
| style={{ transform: "translateZ(60px)" }} | ||
| > | ||
| <svg | ||
| width="160" | ||
| height="160" | ||
| viewBox="0 0 12 12" | ||
| className="drop-shadow-[0_20px_40px_rgba(59,130,246,0.3)] filter brightness-110 animate-spin-slow origin-center" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| role="img" | ||
| aria-labelledby="hero-icon-title" | ||
| > | ||
| <title id="hero-icon-title">ArkEnv Icon</title> | ||
| <path | ||
| className="stroke-blue-500 dark:stroke-blue-400" | ||
| style={{ | ||
| fill: "none", | ||
| strokeWidth: ".9", | ||
| strokeLinecap: "round", | ||
| strokeLinejoin: "round", | ||
| strokeMiterlimit: "10", | ||
| }} | ||
| d="M8.5 6c0-1.379-1.121-2.5-2.5-2.5A2.502 2.502 0 0 0 3.5 6c0 1.379 1.121 2.5 2.5 2.5S8.5 7.379 8.5 6ZM6 11V8.5M1 6h2.5m5 0H11M6 3.5V1M2.464 2.464l1.768 1.768m3.536 3.536 1.768 1.768m-7.072 0 1.768-1.768m3.536-3.536 1.768-1.768" | ||
| /> | ||
| <circle | ||
| cx="6" | ||
| cy="6" | ||
| r="0.9" | ||
| className="fill-blue-500 dark:fill-blue-400 animate-pulse" | ||
| /> | ||
| </svg> | ||
| </div> | ||
|
Comment on lines
+60
to
+107
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Verify custom utilities in globals.css and Tailwind configuration
echo "=== Checking for animate-spin-slow ==="
rg -n "spin-slow" apps/www/app/globals.css 2>/dev/null || echo "Not found in globals.css"
echo -e "\n=== Checking for w-75 and h-75 ==="
rg -n "w-75|h-75" apps/www/app/globals.css 2>/dev/null || echo "Not found in globals.css"
echo -e "\n=== Searching for Tailwind config files ==="
fd -t f "tailwind|next.config" apps/www/ --type f
echo -e "\n=== Checking for custom animation definitions ==="
rg -n "spin-slow|w-75|h-75" apps/www/Repository: yamcodes/arkenv Length of output: 834 🏁 Script executed: #!/bin/bash
# View the actual file to verify code style (tabs vs spaces, quotes, etc.)
echo "=== Checking file indentation and style ==="
head -120 apps/www/components/hero-visual.tsx | tail -65 | cat -A | head -30Repository: yamcodes/arkenv Length of output: 1291 🏁 Script executed: #!/bin/bash
# Check if Tailwind extends these custom utilities
echo "=== Checking tailwind.config ==="
find apps/www -name "tailwind.config.*" -o -name "next.config.*" | head -5Repository: yamcodes/arkenv Length of output: 115 Define custom utility classes The code uses The 3D transforms and SVG accessibility are well-implemented. Code style correctly uses tabs and double quotes per guidelines. 🤖 Prompt for AI Agents |
||
|
|
||
| {/* Floating Accents (Code Samples / Particles) */} | ||
| <div | ||
| className="absolute -top-4 -right-4 bg-white/20 dark:bg-black/40 border border-white/20 dark:border-white/10 rounded-lg p-3 backdrop-blur-xl shadow-xl transform-gpu transition-all duration-300 group-hover:translate-x-4 opacity-80 group-hover:opacity-100" | ||
| style={{ | ||
| transform: "translateZ(90px) rotate(-5deg)", | ||
| }} | ||
| > | ||
| <div className="text-[10px] font-mono leading-tight"> | ||
| <span className="text-yellow-900 dark:text-yellow-200">const</span>{" "} | ||
| <span className="text-blue-900 dark:text-white">env</span>{" "} | ||
| <span className="text-yellow-900 dark:text-yellow-200">=</span>{" "} | ||
| <span className="text-blue-800 dark:text-blue-200 italic"> | ||
| arkenv | ||
| </span> | ||
| <span className="text-yellow-900 dark:text-yellow-100">(</span> | ||
| <span className="text-yellow-900 dark:text-yellow-200">{"{"}</span> | ||
| <br /> | ||
| | ||
| <span className="text-blue-950 dark:text-white">PORT:</span>{" "} | ||
| <span className="text-yellow-900 dark:text-yellow-200">"</span> | ||
| <span className="text-blue-900 dark:text-blue-300">number</span> | ||
| <span className="text-yellow-900 dark:text-yellow-200">"</span> | ||
| <br /> | ||
| <span className="text-yellow-900 dark:text-yellow-200">{"}"}</span> | ||
| <span className="text-yellow-900 dark:text-yellow-100">)</span> | ||
coderabbitai[bot] marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| className="absolute -bottom-10 -left-12 transform-gpu transition-all duration-300 group-hover:-translate-x-4 group-hover:-translate-y-2 opacity-90 group-hover:opacity-100" | ||
| style={{ transform: "translateZ(40px) rotate(4deg)" }} | ||
| > | ||
| {/* The 'Code' line */} | ||
| <div className="bg-white/20 dark:bg-black/40 border border-white/20 dark:border-white/10 rounded-md px-3 py-1.5 backdrop-blur-xl shadow-xl font-mono text-[11px]"> | ||
| <span className="text-blue-950 dark:text-white">env</span> | ||
| <span className="text-yellow-900 dark:text-yellow-200">.</span> | ||
| <span className="text-yellow-900 dark:text-yellow-100">PORT</span> | ||
| </div> | ||
|
|
||
| {/* The Tooltip popover */} | ||
| <div | ||
| className="absolute bottom-full left-4 mb-2 border rounded-sm p-2 shadow-2xl transition-all duration-500 transform-gpu group-hover:scale-110 group-hover:-translate-y-1 bg-white dark:bg-[#0b1120] border-black/10 dark:border-white/10" | ||
| style={{ | ||
| transform: "translateZ(30px)", | ||
| }} | ||
| > | ||
| <div className="flex flex-col gap-0.5 whitespace-nowrap"> | ||
| <div className="text-[10px] font-mono leading-none"> | ||
| <span className={syntaxColors.primary}> | ||
| (<span className={syntaxColors.secondary}>property</span>) | ||
| </span>{" "} | ||
| <span className={syntaxColors.primary}>PORT</span> | ||
| <span className={syntaxColors.punctuation}>:</span>{" "} | ||
| <span className={syntaxColors.secondary}>number</span> | ||
| </div> | ||
| </div> | ||
| {/* Small arrow */} | ||
| <div className="absolute top-full left-4 w-2 h-2 rotate-45 -translate-y-1 border-r border-b bg-white dark:bg-[#0b1120] border-black/10 dark:border-white/10" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Ground Reflection / Shadow */} | ||
| <div | ||
| className="absolute bottom-10 left-1/2 -translate-x-1/2 w-48 h-12 bg-black/20 dark:bg-black/60 blur-3xl opacity-50 rounded-full" | ||
| style={{ transform: "rotateX(90deg) translateZ(-150px)" }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 789
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 1010
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 2418
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
# Check the next.config.ts file for Tailwind configuration cat apps/www/next.config.tsRepository: yamcodes/arkenv
Length of output: 3069
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
# Check globals.css for custom utility definitions cat -n apps/www/app/globals.cssRepository: yamcodes/arkenv
Length of output: 1291
🏁 Script executed:
# Check base.css for custom utilities cat -n apps/www/app/styles/base.cssRepository: yamcodes/arkenv
Length of output: 758
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 86
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 225
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 91
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 88
🏁 Script executed:
# Check postcss.config.mjs in apps/www cat apps/www/postcss.config.mjsRepository: yamcodes/arkenv
Length of output: 124
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 519
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 227
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 172
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 122
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 156
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 382
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 161
🏁 Script executed:
# Look at the entire package.json for Tailwind configuration cat package.jsonRepository: yamcodes/arkenv
Length of output: 1763
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 382
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 414
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 417
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 107
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 388
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 41
🏁 Script executed:
Repository: yamcodes/arkenv
Length of output: 151
Replace undefined Tailwind utilities with explicit arbitrary values or configure custom utilities.
Lines 50 and 62 use
max-w-125,w-75, andh-75, which are not standard Tailwind utilities and are not defined in the codebase. These classes will not apply any styles. Use explicit arbitrary value syntax instead:max-w-[500px],w-[300px], andh-[300px], or define these utilities in a Tailwind configuration file.🤖 Prompt for AI Agents