Skip to content

Commit f83ddce

Browse files
Zeff01claude
Zeff01
and
claude
committed
fix: improve hero section design and text sizing
- Fix compressed 4-box layout with proper spacing and uniform heights - Remove unnecessary arrow icons from hero cards for cleaner design - Increase card sizes from 180px to 220px for better content display - Improve header title to be more customer-focused and clear - Add proper text clamping to prevent layout distortion - Enhance card padding and typography hierarchy 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 2bcc275 commit f83ddce

3 files changed

Lines changed: 78 additions & 69 deletions

File tree

‎apps/codebility/app/(marketing)/_components/landing/LandingHero.tsx‎

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,69 +8,82 @@ import SideNavMenu from "../MarketingSidenavMenu";
88
import HeroBackground from "./LandingHeroBg";
99
import HeroCard from "./LandingHeroCard";
1010

11+
const HIGHLIGHT_METRICS = [
12+
{ label: "Projects shipped", value: "120+" },
13+
{ label: "Avg. client satisfaction", value: "4.9/5" },
14+
{ label: "Specialists on demand", value: "80+" },
15+
];
1116

1217
const Hero = () => {
1318
return (
1419
<div className="relative">
1520
<HeroBackground />
1621

17-
{/* Todo add white grid here in png */}
18-
19-
<section className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-cover bg-no-repeat text-white">
22+
<section className="relative flex min-h-[90vh] w-full flex-col items-center justify-center overflow-hidden text-white">
2023
<SideNavMenu />
21-
<Container className="flex flex-col gap-10 lg:gap-20 mt-12">
22-
<div className="relative">
23-
<div className="relative z-10 flex flex-col gap-8 pt-20 text-center lg:pt-0">
24-
<div className="flex flex-col gap-4">
25-
<p className="text-lg font-normal uppercase md:text-2xl lg:font-semibold">
26-
Codebility
27-
</p>
28-
<h1 className="flex flex-col gap-1 text-4xl font-semibold md:text-6xl">
29-
<span>We Lead in Digital</span>
30-
<span>Innovation & Design</span>
31-
</h1>
32-
<h2 className="text-2xl">Helping you achieve impactful results</h2>
33-
</div>
34-
<div className="md:mx-auto">
35-
<div className="flex w-full flex-col items-center gap-4 md:flex-row">
36-
<Link href="/services">
37-
<Button variant="purple" size="lg" rounded="full" className="">
38-
Our Portfolio
39-
</Button>
40-
</Link>
41-
<Link href="/bookacall">
42-
<Button
43-
variant="outline"
44-
rounded="full"
45-
size="lg"
46-
>
47-
Let&apos;s Connect
48-
</Button>
49-
</Link>
24+
25+
<Container className="relative z-10 flex w-full max-w-[1400px] flex-col gap-20 px-6 py-20 md:px-10 md:py-24 lg:flex-row lg:items-center lg:gap-28 lg:pl-[13rem] xl:pl-[16rem]">
26+
<div className="flex w-full flex-col items-center gap-12 text-center lg:w-[58%] lg:items-start lg:text-left">
27+
<div className="flex flex-col gap-6">
28+
<span className="inline-flex items-center gap-2 self-center rounded-full border border-purple-300/30 bg-purple-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-purple-100 md:self-start">
29+
Strategic Digital Partner
30+
</span>
31+
<h1 className="flex flex-col gap-2 text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
32+
<span>Turn your ideas into</span>
33+
<span className="bg-gradient-to-r from-purple-200 via-white to-purple-300 bg-clip-text text-transparent">
34+
profitable digital products
35+
</span>
36+
</h1>
37+
<p className="max-w-2xl text-base leading-relaxed text-white/75 md:text-lg">
38+
We combine strategy, creative marketing, and engineering to launch experiences your audience remembers. From
39+
high-converting landing pages to full digital ecosystems, Codebility moves modern brands forward.
40+
</p>
41+
</div>
42+
43+
<div className="flex flex-col items-center gap-4 md:flex-row lg:items-center">
44+
<Link href="/bookacall" className="w-full md:w-auto">
45+
<Button variant="purple" size="lg" rounded="full" className="w-full md:w-auto">
46+
Book a Strategy Call
47+
</Button>
48+
</Link>
49+
<Link href="/services" className="w-full md:w-auto">
50+
<Button variant="outline" rounded="full" size="lg" className="w-full border-white/40 text-white md:w-auto">
51+
View Our Built Apps
52+
</Button>
53+
</Link>
54+
</div>
55+
56+
<div className="grid w-full grid-cols-1 items-stretch gap-6 sm:grid-cols-3">
57+
{HIGHLIGHT_METRICS.map((metric) => (
58+
<div
59+
key={metric.label}
60+
className="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-4 text-center shadow-lg shadow-purple-500/10 backdrop-blur"
61+
>
62+
<p className="text-2xl font-semibold text-white md:text-3xl">{metric.value}</p>
63+
<p className="mt-1 text-xs font-medium uppercase tracking-[0.18em] text-white/60 md:text-sm">
64+
{metric.label}
65+
</p>
5066
</div>
51-
</div>
67+
))}
5268
</div>
53-
<Image
54-
src={`https://codebility-cdn.pages.dev/assets/images/index/hero-grid.png`}
55-
alt="Hero Grid Background"
56-
width={1300}
57-
height={340}
58-
className="absolute -top-[10%] left-1/2 -translate-x-1/2 transform"
59-
priority
60-
/>
6169
</div>
6270

63-
<div className="grid w-full grid-cols-1 gap-3 sm:gap-4 lg:grid-cols-2 lg:gap-5">
64-
{MarketingCardData.map((data, index) => (
65-
<HeroCard
66-
key={index}
67-
title={data.title}
68-
description={data.description}
69-
url={data.url}
70-
/>
71-
))}
71+
<div className="relative flex w-full max-w-[520px] flex-col gap-8 self-center lg:w-[45%] lg:self-start">
72+
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8">
73+
{MarketingCardData.slice(0, 4).map((data, index) => (
74+
<HeroCard
75+
key={index}
76+
title={data.title}
77+
description={data.description}
78+
url={data.url}
79+
category={data.category}
80+
/>
81+
))}
82+
</div>
7283
</div>
7384
</Container>
85+
86+
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-80 bg-gradient-to-t from-black via-black/40 to-transparent" aria-hidden="true" />
7487
</section>
7588
</div>
7689
);

‎apps/codebility/app/(marketing)/_components/landing/LandingHeroCard.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,20 @@ interface HeroCardProps {
55
title: string;
66
description: string;
77
url?: string;
8+
category?: string;
89
}
910

10-
const HeroCard: React.FC<HeroCardProps> = ({
11-
title,
12-
description,
13-
url = "#",
14-
}) => {
11+
const HeroCard: React.FC<HeroCardProps> = ({ title, description, url = "#", category }) => {
1512
return (
16-
<Link href={url} className="hero-card">
17-
<div className="border-light-900/5 bg-light-700/10 hover:bg-light-700/30 flex min-h-[140px] w-full flex-col gap-3 rounded-md border-2 p-4 text-white backdrop-blur-lg duration-300 sm:gap-2 sm:p-6 md:min-h-[160px] lg:p-8">
18-
<div className="flex w-full flex-row items-start justify-between gap-3">
19-
<h3 className="text-lg font-medium leading-tight sm:text-xl md:text-2xl">{title}</h3>
20-
<span className="hero-change-bg-button flex size-8 flex-shrink-0 flex-col items-center justify-center rounded-full border-2 border-white/5 bg-white/5 sm:size-10">
21-
<Image
22-
src="/assets/svgs/icon-arrow-up-right.svg"
23-
width={12}
24-
height={12}
25-
alt="arrow up"
26-
className="sm:h-[15px] sm:w-[15px]"
27-
/>
28-
</span>
13+
<Link href={url} className="hero-card block h-full">
14+
<div className="border-light-900/5 bg-light-700/10 hover:bg-light-700/30 flex h-[220px] flex-col justify-between rounded-xl border-2 p-8 text-white backdrop-blur-lg duration-300 sm:h-[240px] sm:p-10">
15+
<div className="flex w-full flex-col gap-3">
16+
{category && (
17+
<p className="text-[10px] uppercase tracking-[0.3em] text-white/60 sm:text-xs">{category}</p>
18+
)}
19+
<h3 className="text-lg font-semibold leading-tight sm:text-xl line-clamp-2">{title}</h3>
2920
</div>
30-
<p className="text-sm leading-relaxed sm:text-base">{description}</p>
21+
<p className="text-sm leading-relaxed text-white/80 sm:text-base line-clamp-4 mt-auto">{description}</p>
3122
</div>
3223
</Link>
3324
);

‎apps/codebility/constants/landing_data.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface MarketingCardData {
3535
title: string;
3636
description: string;
3737
url: string;
38+
category?: string;
3839
}
3940

4041
export interface Service {
@@ -173,24 +174,28 @@ export const MarketingCardData: MarketingCardData[] = [
173174
description:
174175
"Develop your personalized AI assistant or seamlessly integrate AI into your existing tech website.",
175176
url: "/ai-integration",
177+
category: "Technology",
176178
},
177179
{
178180
title: "Web App Development",
179181
description:
180182
"Discover the best in the industry and turn your ideas into powerful digital solutions.",
181183
url: "/services#web-application",
184+
category: "Engineering",
182185
},
183186
{
184187
title: "Mobile App Development",
185188
description:
186189
"Experience top-notch mobile app development with our expert team.",
187190
url: "/services#mobile-application",
191+
category: "Engineering",
188192
},
189193
{
190194
title: "Product Design",
191195
description:
192196
"Encounter excellence in development with our skilled team, masters of UI/UX design.",
193197
url: "/services#product-design",
198+
category: "Product",
194199
},
195200
];
196201

0 commit comments

Comments
 (0)