diff --git a/app/globals.css b/app/globals.css index 03fafbe..28d95a8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -120,3 +120,194 @@ body { scrollbar-width: none; } +/* AI Copilot Orb Real Vector Animations - Continuous & Fabric Motion */ + +/* 1. Orbiting Ring: Uninterrupted continuous 360-degree orbital rotation (No stops, constant velocity) */ +@keyframes orbitRingMotion { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} + +/* 2. Contour Rings: Continuous silky spin around the orb */ +@keyframes contourRingsMotion { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* 3. Color & Gradient Flow: Continuous fluid color transition through Figma states (Blue -> Purple -> Cyan -> Blue) */ +@keyframes orbColorCycleMotion { + 0% { + filter: hue-rotate(0deg) saturate(100%) brightness(1); + } + 25% { + filter: hue-rotate(42deg) saturate(125%) brightness(1.06); + } + 50% { + filter: hue-rotate(-20deg) saturate(115%) brightness(1.04); + } + 75% { + filter: hue-rotate(20deg) saturate(110%) brightness(1.02); + } + 100% { + filter: hue-rotate(0deg) saturate(100%) brightness(1); + } +} + +/* 4. Refracting Starlight: Unbroken continuous circular orbit inside star */ +@keyframes starSpotlightMotion { + 0% { + transform: rotate(0deg) translate(38px, 0) rotate(0deg); + } + 100% { + transform: rotate(360deg) translate(38px, 0) rotate(-360deg); + } +} + +/* 5. Radiating Energy Waves: Smooth harmonic wave breathing */ +@keyframes energyWavesMotion { + 0%, 100% { + transform: translateY(0px) scaleY(1); + opacity: 0.9; + } + 50% { + transform: translateY(-16px) scaleY(1.05); + opacity: 1; + } +} + +/* 6. Core Sphere subtle breath */ +@keyframes spherePulseMotion { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } +} + +/* 7. Liquid Blob continuous drift */ +@keyframes blobDriftMotion { + 0% { + transform: rotate(0deg) translate(22px, 0) rotate(0deg); + } + 100% { + transform: rotate(360deg) translate(22px, 0) rotate(-360deg); + } +} + +/* 8. Ambient Backdrop Glow smooth pulse */ +@keyframes ambientGlowMotion { + 0%, 100% { + opacity: 0.75; + transform: scale(1); + } + 50% { + opacity: 0.95; + transform: scale(1.025); + } +} + +/* 9. Particle Constellation A: Continuous smooth orbital drift around orb */ +@keyframes particlesMotionA { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* 10. Particle Constellation B: Continuous counter-orbital drift with gentle shimmer */ +@keyframes particlesMotionB { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} + +/* 11. Particle Constellation C: Continuous floating wave */ +@keyframes particlesMotionC { + 0%, 100% { + transform: translate(0px, 0px); + opacity: 0.7; + } + 50% { + transform: translate(-8px, 10px); + opacity: 1; + } +} + +/* Animation Utility Classes - Constant velocity & uninterrupted flow */ +.animate-orbit-ring { + animation: orbitRingMotion 12s linear infinite; + will-change: transform; +} + +.animate-contour-rings { + animation: contourRingsMotion 18s linear infinite; + will-change: transform; +} + +.animate-orb-color-cycle { + animation: orbColorCycleMotion 12s linear infinite; + will-change: filter; +} + +.animate-star-spotlight { + animation: starSpotlightMotion 8s linear infinite; + transform-origin: 636.929px 420.938px; + will-change: transform; +} + +.animate-energy-waves { + animation: energyWavesMotion 6s ease-in-out infinite; + will-change: transform, opacity; +} + +.animate-sphere-pulse { + animation: spherePulseMotion 6s ease-in-out infinite; + will-change: transform; +} + +.animate-blob-drift { + animation: blobDriftMotion 10s linear infinite; + transform-origin: 637.492px 421.5px; + will-change: transform; +} + +.animate-ambient-glow { + animation: ambientGlowMotion 6s ease-in-out infinite; + transform-origin: 637.492px 421.5px; + will-change: transform, opacity; +} + +.animate-particles-a { + animation: particlesMotionA 24s linear infinite; + transform-origin: 637.492px 421.5px; + will-change: transform; +} + +.animate-particles-b { + animation: particlesMotionB 30s linear infinite; + transform-origin: 637.492px 421.5px; + will-change: transform; +} + +.animate-particles-c { + animation: particlesMotionC 6s ease-in-out infinite; + will-change: transform, opacity; +} + + + + diff --git a/components/copilot/AnimatedCopilotOrb.tsx b/components/copilot/AnimatedCopilotOrb.tsx new file mode 100644 index 0000000..a4510f8 --- /dev/null +++ b/components/copilot/AnimatedCopilotOrb.tsx @@ -0,0 +1,404 @@ +"use client"; + +export function AnimatedCopilotOrb() { + return ( + + {/* Ambient Background Glow */} + + + + + + + + + + + + + {/* Main Orb Color-Morphing Entity */} + + {/* Core Sphere (Base Glow & Dark Volume) */} + + + + + + + + + + {/* Orbiting Energy Ring (Ellipse 760) */} + + + + + + + {/* Masked Spherical Interior */} + + + + + {/* Liquid Internal Glow Blob */} + + + + + + + {/* Central 4-Pointed Star with Refracting Spotlight */} + + + + + + + + + + + + + + + + + {/* Radiating Flare Energy Waves */} + + + + + + + + + + + + + + + + + + + + + {/* Twin Contour Rings */} + + + + + + + + + + + + {/* Constellation of 98 Dynamic Particles */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* SVG Filters & Linear Gradients */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/components/sections/AiCopilotSection.tsx b/components/sections/AiCopilotSection.tsx index 46ed327..68741ba 100644 --- a/components/sections/AiCopilotSection.tsx +++ b/components/sections/AiCopilotSection.tsx @@ -1,4 +1,5 @@ import Image from "next/image"; +import { AnimatedCopilotOrb } from "@/components/copilot/AnimatedCopilotOrb"; export function AiCopilotSection() { return ( @@ -64,18 +65,39 @@ export function AiCopilotSection() { - {/* Content Frame: AI Orb & Feature Matrix */} + {/* Content Frame: Separated AI Orb & Feature Matrices (Figma: 1216px x 437px) */}
-
- AI Management Co-Pilot Matrix +
+ {/* Left Icon Matrix (Figma: 495x288 at x=0, y=75) */} +
+ AI Features Matrix Left +
+ + {/* Right Icon Matrix (Figma: 495x288 at x=721, y=75) */} +
+ AI Features Matrix Right +
+ + {/* Middle Luminous Orb (Figma: 437x437 centered at x=608, y=218.5) */} +
+ +
diff --git a/components/sections/DashboardSection.tsx b/components/sections/DashboardSection.tsx index 9831836..12b6565 100644 --- a/components/sections/DashboardSection.tsx +++ b/components/sections/DashboardSection.tsx @@ -14,7 +14,7 @@ export function DashboardSection() { {/* Dashboard Screenshot Image (Dashboard_image_4178_61404: w: 1200, h: 769, radius: 24) */}
TeamBy Time Tracking Dashboard UI + + + + + + + + + diff --git a/public/assets/images/Dashboard.svg b/public/assets/images/Dashboard.svg new file mode 100644 index 0000000..ccb8306 --- /dev/null +++ b/public/assets/images/Dashboard.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/assets/images/copilot_ambient_glow.svg b/public/assets/images/copilot_ambient_glow.svg new file mode 100644 index 0000000..daf3d89 --- /dev/null +++ b/public/assets/images/copilot_ambient_glow.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/copilot_luminous_ball.png b/public/assets/images/copilot_luminous_ball.png index a348252..4396889 100644 Binary files a/public/assets/images/copilot_luminous_ball.png and b/public/assets/images/copilot_luminous_ball.png differ diff --git a/public/assets/images/copilot_luminous_ball.svg b/public/assets/images/copilot_luminous_ball.svg index 4febc24..4565093 100644 --- a/public/assets/images/copilot_luminous_ball.svg +++ b/public/assets/images/copilot_luminous_ball.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/images/copilot_orb.png b/public/assets/images/copilot_orb.png index a348252..4396889 100644 Binary files a/public/assets/images/copilot_orb.png and b/public/assets/images/copilot_orb.png differ diff --git a/public/assets/images/copilot_orb.svg b/public/assets/images/copilot_orb.svg index 4febc24..4565093 100644 --- a/public/assets/images/copilot_orb.svg +++ b/public/assets/images/copilot_orb.svg @@ -1,4 +1,4 @@ - + diff --git a/public/assets/images/copilot_orb_state1.png b/public/assets/images/copilot_orb_state1.png new file mode 100644 index 0000000..bff3b77 Binary files /dev/null and b/public/assets/images/copilot_orb_state1.png differ diff --git a/public/assets/images/copilot_orb_state1.svg b/public/assets/images/copilot_orb_state1.svg new file mode 100644 index 0000000..4565093 --- /dev/null +++ b/public/assets/images/copilot_orb_state1.svg @@ -0,0 +1,340 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/copilot_orb_state2.png b/public/assets/images/copilot_orb_state2.png new file mode 100644 index 0000000..abf93e7 Binary files /dev/null and b/public/assets/images/copilot_orb_state2.png differ diff --git a/public/assets/images/copilot_orb_state2.svg b/public/assets/images/copilot_orb_state2.svg new file mode 100644 index 0000000..3d048d4 --- /dev/null +++ b/public/assets/images/copilot_orb_state2.svg @@ -0,0 +1,345 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/copilot_orb_state3.png b/public/assets/images/copilot_orb_state3.png new file mode 100644 index 0000000..3a20fef Binary files /dev/null and b/public/assets/images/copilot_orb_state3.png differ diff --git a/public/assets/images/copilot_orb_state3.svg b/public/assets/images/copilot_orb_state3.svg new file mode 100644 index 0000000..5e79716 --- /dev/null +++ b/public/assets/images/copilot_orb_state3.svg @@ -0,0 +1,345 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/copilot_orb_state4.png b/public/assets/images/copilot_orb_state4.png new file mode 100644 index 0000000..82e6698 Binary files /dev/null and b/public/assets/images/copilot_orb_state4.png differ diff --git a/public/assets/images/copilot_orb_state4.svg b/public/assets/images/copilot_orb_state4.svg new file mode 100644 index 0000000..6ab1b28 --- /dev/null +++ b/public/assets/images/copilot_orb_state4.svg @@ -0,0 +1,341 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/images/test_separated_composite.png b/public/assets/images/test_separated_composite.png new file mode 100644 index 0000000..29cf4c9 Binary files /dev/null and b/public/assets/images/test_separated_composite.png differ