salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce shadow weights and simplify automation icons

Browse Source 
Product Module Screenshots:
- Reduced shadow from shadow-2xl to shadow-md for cleaner look
- Reduced blur from blur-xl to blur-lg on gradient glows
- Reduced inset values for more subtle frame effects

Hero Dashboard:
- Reduced shadow from shadow-2xl to shadow-lg
- Reduced blur effects from blur-3xl/blur-2xl to blur-xl/blur-lg
- Toned down opacity on glow effects

Automation Engine Section:
- Simplified numbered badges from colorful mix to consistent primary gradient
- Changed from w-10 h-10 to w-9 h-9 for cleaner appearance
- Removed heavy shadow-lg and glow effects, using subtle shadow-sm
- Removed hover glow animations for cleaner branded look
- Simplified icon badge from shadow-lg to shadow-sm
- Reduced automation dashboard shadow from shadow-2xl to shadow-md
- Updated glow colors to primary + success (matching brand)
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-08 09:03:44 +00:00
parent 7c79bdcc6c
commit 84ed711f6d
1 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/marketing/pages/Home.tsx
View File

@@ -159,10 +159,10 @@ const Home: React.FC = () => {
<div className="relative z-10"> <div className="relative z-10">
<div className="relative scale-110 lg:scale-125"> <div className="relative scale-110 lg:scale-125">
{/* Soft glow behind screenshot */} {/* Soft glow behind screenshot */}
<div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-3xl blur-3xl" /> <div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-purple)]/10 rounded-3xl blur-xl" />
{/* Device frame effect */} {/* Device frame effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" /> <div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" />
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden"> <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4"> <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-error-500/50" /> <div className="w-3 h-3 rounded-full bg-error-500/50" />
@@ -177,7 +177,7 @@ const Home: React.FC = () => {
/> />
</div> </div>
{/* Soft shadow */} {/* Soft shadow */}
<div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[var(--color-primary)]/20 to-transparent blur-3xl -z-10" /> <div className="absolute -bottom-6 -left-6 right-6 h-24 bg-gradient-to-t from-[var(--color-primary)]/10 to-transparent blur-xl -z-10" />
</div> </div>
</div> </div>
</div> </div>
@@ -269,8 +269,8 @@ const Home: React.FC = () => {
<div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}> <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
<div className="relative scale-110 lg:scale-115"> <div className="relative scale-110 lg:scale-115">
{/* Gradient frame background with colored glow */} {/* Gradient frame background with colored glow */}
<div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-10 blur-xl`} /> <div className={`absolute -inset-4 bg-gradient-to-br ${module.color} rounded-3xl opacity-10 blur-lg`} />
<div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden"> <div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-md overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/30 to-transparent flex items-center gap-2 px-4"> <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/30 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-error-500/50" /> <div className="w-3 h-3 rounded-full bg-error-500/50" />
@@ -337,7 +337,7 @@ const Home: React.FC = () => {
{/* Left: Content */} {/* Left: Content */}
<div className="z-10"> <div className="z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-sm">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-white"> <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -348,28 +348,26 @@ const Home: React.FC = () => {
7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot. 7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot.
</p> </p>
{/* 7 Automation Handoffs with neon glows */} {/* 7 Automation Handoffs - clean and simple */}
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
{[ {[
{ from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" }, { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" }, { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" }, { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" }, { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" }, { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" }, { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
{ from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" }, { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
].map((handoff, i) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-3"> <div key={i} className="flex items-center gap-3">
<div className={`relative w-10 h-10 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-lg ${handoff.glow} group`}> <div className={`relative w-9 h-9 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-sm`}>
{handoff.stage} {handoff.stage}
{/* Neon glow effect */}
<div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-lg opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white font-semibold">{handoff.from} → {handoff.to}</div> <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{/* Metrics */} {/* Metrics */}
@@ -391,7 +389,7 @@ const Home: React.FC = () => {
{/* Right: Automation Dashboard Screenshot */} {/* Right: Automation Dashboard Screenshot */}
<div className="relative z-10"> <div className="relative z-10">
<div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden"> <div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-md overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4"> <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-error-500/50" /> <div className="w-3 h-3 rounded-full bg-error-500/50" />
@@ -406,7 +404,7 @@ const Home: React.FC = () => {
/> />
</div> </div>
{/* Glow effect */} {/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" /> <div className="absolute -inset-3 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-success)]/10 rounded-2xl blur-xl -z-10" />
</div> </div>
</div> </div>
</div> </div>