update redesign

2026-06-24 18:31:06 +05:30
parent 6ddfc57217
commit d3c7d93cef
23 changed files with 1756 additions and 1518 deletions
--- a/src/components/layout/HeroVisualCollage.tsx
+++ b/src/components/layout/HeroVisualCollage.tsx
@@ -0,0 +1,138 @@
+import Image from "next/image";
+import { GlassInfoCard } from "../ui/GlassInfoCard";
+
+type GlassCardItem = {
+  text: string;
+  icon?: string;
+};
+
+type HeroVisualCollageProps = {
+  centerImage: string;
+  leftImage?: string;
+  rightImage?: string;
+  glassCards: GlassCardItem[];
+  isPhoneCenter?: boolean;
+};
+
+export function HeroVisualCollage({
+  centerImage,
+  leftImage,
+  rightImage,
+  glassCards,
+  isPhoneCenter = true,
+}: HeroVisualCollageProps) {
+  return (
+    <div className="relative w-full h-[380px] sm:h-[450px] lg:h-[500px] max-w-[540px] mx-auto flex items-center justify-center select-none">
+      {/* Decorative backgrounds */}
+      {/* 1. Soft purple circle */}
+      <div className="absolute w-[240px] h-[240px] rounded-full bg-[#7C3AED]/10 blur-[60px] -z-10" />
+
+      {/* 2. SVG Dot grid */}
+      <div className="absolute -top-4 -right-4 w-32 h-32 text-[#6330D6]/10 -z-10 opacity-20">
+        <svg className="w-full h-full" fill="currentColor">
+          <pattern id="collage-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+            <circle cx="2" cy="2" r="1.5" />
+          </pattern>
+          <rect width="100%" height="100%" fill="url(#collage-dots)" />
+        </svg>
+      </div>
+
+      {/* 3. Small x marks */}
+      <div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
+      <div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
+
+      {/* LEFT IMAGE PANEL (Hidden or compact on small mobile) */}
+      {leftImage && (
+        <div className="absolute left-2 sm:left-4 top-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
+          <Image
+            src={leftImage}
+            alt="Collage left asset"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100px, 130px"
+          />
+        </div>
+      )}
+
+      {/* RIGHT IMAGE PANEL */}
+      {rightImage && (
+        <div className="absolute right-2 sm:right-4 bottom-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
+          <Image
+            src={rightImage}
+            alt="Collage right asset"
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 100px, 130px"
+          />
+        </div>
+      )}
+
+      {/* CENTER COMPONENT */}
+      <div className="relative z-20">
+        {isPhoneCenter ? (
+          /* Phone Frame Container */
+          <div className="relative w-[180px] sm:w-[220px] h-[360px] sm:h-[440px] rounded-[36px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_50px_rgba(99,48,214,0.12)] bg-[#FAF8FC] overflow-hidden flex flex-col justify-center items-center">
+            <Image
+              src={centerImage}
+              alt="Phone Mockup Screen"
+              fill
+              className="object-cover"
+              sizes="(max-width: 640px) 180px, 220px"
+              priority
+            />
+          </div>
+        ) : (
+          /* Central Logo / Visual Panel */
+          <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
+            <Image
+              src={centerImage}
+              alt="Central logo panel"
+              width={160}
+              height={160}
+              className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
+              priority
+            />
+          </div>
+        )}
+      </div>
+
+      {/* FLOATING GLASS CARDS (Positioned Absolute, scaled down on mobile) */}
+      {glassCards.length > 0 && (
+        <div className="absolute inset-0 z-30 pointer-events-none">
+          {/* Card 1: Top Right */}
+          {glassCards[0] && (
+            <div className="absolute right-0 sm:right-[5%] top-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[0].text}
+                icon={glassCards[0].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+
+          {/* Card 2: Bottom Left */}
+          {glassCards[1] && (
+            <div className="absolute left-0 sm:left-[5%] bottom-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[1].text}
+                icon={glassCards[1].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+
+          {/* Card 3: Mid Left/Right */}
+          {glassCards[2] && (
+            <div className="absolute left-[5%] top-[45%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
+              <GlassInfoCard
+                text={glassCards[2].text}
+                icon={glassCards[2].icon}
+                className="scale-90 sm:scale-100"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}