Skip to content

Commit 055d6f3

Browse files
Erfan-AhmadiErfan-Ahmadi
committed
make header of whentocall smaller. cause it's not the main point of the page. only landing requires big hero section
1 parent f5ce310 commit 055d6f3

2 files changed

Lines changed: 100 additions & 59 deletions

File tree

‎app/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,15 @@ body {
750750
linear-gradient(180deg, rgba(0, 0, 0, 0.69), transparent 24%, transparent 58%, rgba(0, 0, 0, 0.78));
751751
}
752752

753+
.service-hero-compact {
754+
min-height: clamp(18rem, 36svh, 28rem);
755+
}
756+
757+
.service-hero-compact::before {
758+
inset: 22% 10% 12%;
759+
}
760+
761+
753762
.about-shell {
754763
position: relative;
755764
isolation: isolate;

‎app/when-to-call-devsh/page.tsx‎

Lines changed: 91 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -203,86 +203,118 @@ function ProofCard({ point }: { point: (typeof proofPoints)[number] }) {
203203
export default function Page() {
204204
return (
205205
<main className="services-shell min-h-screen overflow-hidden">
206-
207-
{/* 1. HERO SECTION */}
208-
<section className="service-hero relative flex flex-col justify-center py-16 sm:py-20 lg:py-24">
209-
<div aria-hidden="true" className="service-hero-cloud absolute inset-0 z-0">
210-
<div className="service-hero-cloud-base" />
211-
<NablaShaderBackdrop />
212-
<div className="service-hero-cloud-vignette" />
213-
</div>
214206

215-
<div className="site-container relative z-10">
216-
<div className="max-w-4xl">
217-
<p className="section-kicker">Specialist Graphics Engineering</p>
218-
<h1 className="!mb-0 !mt-4 bg-[linear-gradient(135deg,#fff_18%,#f4fffb_58%,var(--brand-accent-bright)_100%)] bg-clip-text pb-1 text-4xl font-semibold leading-[1.06] text-balance text-transparent drop-shadow-[0_0_1.8rem_rgba(0,0,0,0.55)] sm:text-5xl lg:text-6xl">
219-
We unblock rendering pipelines and rescue failing graphics architectures.
220-
</h1>
221-
<p className="cloud-lead !mt-6 max-w-2xl text-lg sm:text-xl">
222-
Expert GPU programming and data-oriented optimization for teams hitting the absolute limits of their hardware.
223-
</p>
224-
<div className="mt-8 flex flex-wrap gap-4">
225-
<a href="mailto:newclients@devsh.eu" className="premium-cta brand-button inline-flex items-center gap-3 rounded-lg border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5">
226-
Schedule a Consultation
227-
<ArrowIcon />
228-
</a>
229-
<a href="#intro-kit" className="inline-flex items-center gap-3 rounded-lg border border-white/18 bg-black/28 px-6 py-3 text-sm font-semibold text-white shadow-[0_0_1.2rem_rgba(0,0,0,0.28)] transition hover:border-white/32 hover:bg-white/[0.08]">
230-
Make an Introduction
231-
<ArrowIcon />
232-
</a>
233-
</div>
207+
{/* 1. HERO SECTION */}
208+
<section className="service-hero service-hero-compact relative flex flex-col justify-center py-6 sm:py-8 lg:py-10">
209+
<div aria-hidden="true" className="service-hero-cloud absolute inset-0 z-0">
210+
<div className="service-hero-cloud-base" />
211+
<NablaShaderBackdrop />
212+
<div className="service-hero-cloud-vignette" />
213+
</div>
214+
215+
<div className="site-container relative z-10">
216+
<div className="mx-auto max-w-3xl text-center">
217+
<h1 className="mx-auto !mb-0 !mt-0 max-w-3xl bg-[linear-gradient(135deg,#fff_18%,#f4fffb_58%,var(--brand-accent-bright)_100%)] bg-clip-text pb-1 text-3xl font-semibold leading-[1.15] tracking-tight text-transparent drop-shadow-[0_0_1.8rem_rgba(0,0,0,0.55)] sm:text-4xl lg:text-5xl">
218+
Give your software the ultimate visual and computational advantage.
219+
</h1>
220+
221+
<div className="mt-8 flex flex-wrap justify-center gap-4">
222+
<a
223+
href="mailto:newclients@devsh.eu"
224+
className="premium-cta brand-button inline-flex items-center gap-3 rounded-lg border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
225+
>
226+
Book a Technical Discovery Call
227+
<ArrowIcon />
228+
</a>
229+
230+
<a
231+
href="#intro-kit"
232+
className="inline-flex items-center gap-3 rounded-lg border border-white/18 bg-black/28 px-6 py-3 text-sm font-semibold text-white shadow-[0_0_1.2rem_rgba(0,0,0,0.28)] transition hover:border-white/32 hover:bg-white/[0.08]"
233+
>
234+
Make an Introduction
235+
<ArrowIcon />
236+
</a>
234237
</div>
235238
</div>
236-
</section>
239+
</div>
240+
</section>
237241

238-
{/* 2. WHEN TO CALL US - 3 Compact Cards */}
239-
<section className="site-container py-10 sm:py-10 lg:py-10">
242+
{/* 2. WHEN TO CALL US & WHEN NOT TO */}
243+
<section className="site-container py-10 sm:py-16 lg:py-20">
240244
<div className="section-head mx-auto mb-10 max-w-5xl sm:mb-14">
241-
<h2 className="section-heading">When it's time to bring us in.</h2>
245+
<h2 className="section-heading">When to Bring in the Big Guns</h2>
246+
<p className="mt-3 text-lg opacity-80 sm:text-xl">
247+
Call us if any of the following is you.
248+
</p>
242249
</div>
250+
251+
{/* All cards share this single flex container with a uniform gap */}
243252
<div className="mx-auto flex max-w-5xl flex-col gap-4 sm:gap-4">
244-
<CategoryCard title="The Competitive Gap" items={competitiveGapAndTeamStrategy} />
245-
<CategoryCard title="Modernization & Tech Debt" items={customSolutionsAndTechDebt} />
253+
254+
<CategoryCard title="Core Architecture & Custom Engineering" items={customSolutionsAndTechDebt} />
246255
<CategoryCard title="Performance & Stability Walls" items={performanceStabilityWalls} />
247-
</div>
248-
</section>
256+
<CategoryCard title="The Competitive Gap & Team Strategy" items={competitiveGapAndTeamStrategy} />
257+
258+
{/* 3. WHEN NOT TO CALL US (Red Card) */}
259+
<div className="relative mt-2 overflow-hidden rounded-lg border border-red-900/30 bg-red-950/20 px-6 py-5 sm:px-8 sm:py-6 lg:px-10 lg:py-6">
260+
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-red-500/30 to-transparent" aria-hidden="true" />
261+
262+
{/* Added mt-0 to kill any stray margins, and changed mb-4 to mb-6 to match the green cards */}
263+
<h3 className="mt-0 mb-6 text-2xl font-semibold leading-tight text-white sm:mb-6 sm:text-3xl">
264+
Who this is not for
265+
</h3>
266+
267+
<ul className="m-0 grid gap-6 p-0 list-none sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6">
268+
{notFitPoints.map((item, index) => (
269+
<li key={index} className="flex gap-3 text-sm leading-relaxed text-neutral-300 sm:text-base">
270+
<XIcon />
271+
<span className="mt-0.5">{item}</span>
272+
</li>
273+
))}
274+
</ul>
275+
</div>
249276

250-
{/* 3. WHEN NOT TO CALL US */}
251-
<section className="site-container pb-14 sm:pb-16 lg:pb-20">
252-
<div className="mx-auto max-w-5xl relative overflow-hidden rounded-lg border border-red-900/30 bg-red-950/20 p-6 sm:p-8 lg:p-10">
253-
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-red-500/30 to-transparent" aria-hidden="true" />
254-
<h3 className="mb-4 text-2xl font-semibold leading-tight text-white sm:mb-4 sm:text-3xl">Who this is not for</h3>
255-
<ul className="grid gap-6 p-0 list-none sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6">
256-
{notFitPoints.map((item, index) => (
257-
<li key={index} className="flex gap-3 text-sm leading-relaxed text-neutral-300 sm:text-base">
258-
<XIcon />
259-
<span>{item}</span>
260-
</li>
261-
))}
262-
</ul>
263277
</div>
264278
</section>
265279

266280
{/* 4. ENGAGEMENT MODEL */}
267-
<section className="border-y border-white/10 bg-black/45 py-14 sm:py-16 lg:py-20">
268-
<div className="site-container grid gap-10 lg:grid-cols-[0.72fr_1fr] lg:items-start">
269-
<div className="max-w-xl">
270-
<p className="section-kicker">How we integrate with your team</p>
271-
<h2 className="section-heading !mt-3">Our Engineering Process</h2>
281+
<section className="site-container py-14 sm:py-16 lg:py-20">
282+
<div className="mx-auto max-w-6xl">
283+
284+
{/* Centered Header Section */}
285+
<div className="mb-12 text-center sm:mb-16">
286+
<p className="section-kicker mx-auto">How we integrate with your team</p>
287+
<h2 className="section-heading !mt-3 mx-auto">Our Engineering Process</h2>
272288
</div>
273-
<div className="grid gap-4">
289+
290+
{/* 4-Column Grid: Stacks on mobile, 2x2 on tablet, 1x4 horizontal on desktop */}
291+
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8">
274292
{engagementModels.map((model, index) => (
275-
<article key={model.name} className="grid gap-4 rounded-lg border border-white/10 bg-black/35 p-5 sm:grid-cols-[4rem_1fr] sm:p-6">
276-
<div className="flex h-14 w-14 items-center justify-center rounded-md border border-[var(--brand-accent-bright)]/30 bg-[var(--brand-accent)]/10 text-lg font-semibold text-[var(--brand-accent-bright)]">
293+
<article
294+
key={model.name}
295+
className="group relative flex flex-col items-center rounded-2xl border border-emerald-900/30 bg-emerald-950/20 p-6 pt-8 text-center shadow-[0_1rem_3rem_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.05)] transition-all duration-300 hover:-translate-y-1 hover:border-emerald-700/50 hover:bg-emerald-900/20 sm:p-8 sm:pt-10"
296+
>
297+
{/* Top Gradient Accent */}
298+
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent transition-opacity duration-300 group-hover:via-emerald-400/60" aria-hidden="true" />
299+
300+
{/* Step Number Box */}
301+
<div className="relative mb-6 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-[var(--brand-accent-bright)]/30 bg-[var(--brand-accent)]/10 text-xl font-bold text-[var(--brand-accent-bright)] shadow-[0_0_20px_rgba(0,255,128,0.15)] transition-transform duration-300 group-hover:scale-110 group-hover:border-[var(--brand-accent-bright)]/50">
277302
{String(index + 1).padStart(2, "0")}
278303
</div>
279-
<div>
280-
<h3 className="!m-0 text-xl font-semibold leading-tight text-white sm:text-2xl">{model.name}</h3>
281-
<p className="!mb-0 !mt-3 text-sm leading-relaxed text-neutral-300 sm:text-base">{model.detail}</p>
304+
305+
{/* Content */}
306+
<div className="flex flex-1 flex-col">
307+
<h3 className="!m-0 text-lg font-semibold leading-tight text-white sm:text-xl">
308+
{model.name}
309+
</h3>
310+
<p className="!mb-0 !mt-3 text-sm leading-relaxed text-neutral-300 sm:text-base">
311+
{model.detail}
312+
</p>
282313
</div>
283314
</article>
284315
))}
285316
</div>
317+
286318
</div>
287319
</section>
288320

0 commit comments

Comments
 (0)