Apple Animation

src/components/HomeHero/SoftwareWindow/ConfigurationSteps/ConfigCursor.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useDelayedUnmount } from '../../hooks/useDelayedUnmount';
+
+interface ConfigCursorProps {
+  pos: { x: number; y: number };
+  visible: boolean;
+  isClicking: boolean;
+  transition: string;
+}
+
+export default function ConfigCursor({ pos, visible, isClicking, transition }: ConfigCursorProps) {
+  const shouldRender = useDelayedUnmount(visible, 300);
+
+  if (!shouldRender) return null;
+
+  return (
+    <div
+      className="pointer-events-none absolute z-50"
+      style={{
+        left: `${pos.x}%`,
+        top: `${pos.y}%`,
+        opacity: visible ? 1 : 0,
+        transform: `translate(-20%, -20%) scale(${isClicking ? 0.85 : 1})`,
+        transition: transition === 'none'
+          ? 'transform 0.15s ease-out, opacity 0.3s ease'
+          : `${transition}, transform 0.15s ease-out, opacity 0.3s ease`,
+      }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.3))' }}
+      >
+        <path
+          d="M5.5 3.5L19 10L11.5 12.5L9 20L5.5 3.5Z"
+          fill="var(--ifm-color-primary)"
+          stroke="white"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+}

src/components/HomeHero/SoftwareWindow/ConfigurationSteps/InputTypeStep.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+interface InputTypeStepProps {
+  isVisible: boolean;
+  selected: string | null;
+}
+
+const INPUT_TYPES = [
+  { id: 'image', label: 'Image' },
+  { id: 'comparison', label: 'Comparison' },
+  { id: 'video', label: 'Video' },
+  { id: 'depth', label: 'Depth' },
+];
+
+export default function InputTypeStep({ isVisible, selected }: InputTypeStepProps) {
+  return (
+    <div
+      style={{
+        opacity: isVisible ? 1 : 0,
+        transform: isVisible ? 'translateX(0)' : 'translateX(-20px)',
+        transition: 'all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)',
+        pointerEvents: 'none',
+      }}
+    >
+      <div
+        className="oneware-section-header"
+        style={{ margin: 0, padding: 0, fontSize: 'clamp(0.5rem, 1.2vw, 0.7rem)', marginBottom: 'clamp(4px, 0.8vw, 8px)' }}
+      >
+        INPUT TYPE
+      </div>
+      <div className="flex items-center gap-1">
+        <div className="flex p-[2px] bg-black/20 rounded-lg border border-white/5 flex-1 min-w-0">
+          {INPUT_TYPES.map(({ id, label }) => (
+            <div
+              key={id}
+              id={`config-input-${id}`}
+              className={`
+                flex-1 flex items-center justify-center py-1 sm:py-1.5 rounded-[6px] transition-all duration-300 ease-out relative overflow-hidden
+                cursor-default pointer-events-none
+                ${selected === id
+                  ? 'text-[var(--ifm-color-primary)] font-bold bg-white/5 border border-[var(--ifm-color-primary)]/20 shadow-[inset_0_0_15px_rgba(0,255,209,0.05)]'
+                  : 'text-white/30 border border-transparent'}
+              `}
+            >
+              <span
+                className="relative z-10 tracking-wider"
+                style={{ fontSize: 'clamp(0.35rem, 0.85vw, 0.55rem)' }}
+              >
+                {label}
+              </span>
+              <div
+                className="absolute bottom-0 left-1/4 right-1/4 h-[1px] bg-[var(--ifm-color-primary)] shadow-[0_0_8px_var(--ifm-color-primary)] transition-opacity duration-300"
+                style={{ opacity: selected === id ? 1 : 0 }}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex-shrink-0 text-white/20" style={{ fontSize: 'clamp(10px, 1.5vw, 16px)' }}>
+          <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}