Skip to content

Commit 7b4f0a2

Browse files
mostlyerrorclaude
mostlyerror
and
claude
committed
Redesign Recent Work section as horizontal carousel
- Convert stacked cards to horizontal scrolling carousel - Add all 3 case studies (SWAPP, Mayday, LLT) to homepage - Move "View all case studies" link to header (top right) - Reduce card width for better multi-card preview (70vw/340px) - Align "Read case study" CTAs at bottom of all cards - Remove arrow from card titles for cleaner look - Add scrollbar-hide utility for clean carousel UI - Change LLT emoji to 📚 (books) for learning theme - Add snap scrolling and mobile swipe hint Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 613986a commit 7b4f0a2

2 files changed

Lines changed: 151 additions & 94 deletions

File tree

‎app/page.tsx‎

Lines changed: 135 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -236,124 +236,166 @@ export default function Home() {
236236
</section>
237237

238238
{/* Recent Work */}
239-
<section id="work" className="py-20 bg-gradient-to-br from-cream via-white to-sage/5">
240-
<div className="max-w-6xl mx-auto px-6">
241-
<div className="text-center mb-12">
242-
<h2 className="text-3xl md:text-4xl font-semibold mb-3">Recent Work</h2>
243-
<p className="text-lg text-charcoal-light">Real projects, real results</p>
244-
</div>
245-
246-
{/* Case Study Cards */}
247-
<div className="max-w-4xl mx-auto space-y-8">
248-
{/* SWAPP Case Study Card */}
239+
<section id="work" className="py-20 bg-gradient-to-br from-cream via-white to-sage/5 overflow-hidden">
240+
<div className="max-w-7xl mx-auto px-6">
241+
<div className="flex items-end justify-between mb-12">
242+
<div>
243+
<h2 className="text-3xl md:text-4xl font-semibold mb-3">Recent Work</h2>
244+
<p className="text-lg text-charcoal-light">Real projects, real results</p>
245+
</div>
249246
<Link
250-
href="/case-studies/swapp"
251-
className="block bg-white rounded-2xl border border-charcoal/10 overflow-hidden hover:border-coral/30 hover:shadow-2xl transition-all duration-300 group"
247+
href="/case-studies"
248+
className="inline-flex items-center gap-2 text-charcoal hover:text-coral font-medium transition-colors"
252249
>
253-
<div className="grid md:grid-cols-5 gap-0">
254-
{/* Left side - Icon */}
255-
<div className="md:col-span-2 relative bg-gradient-to-br from-coral/20 to-mustard/15 min-h-[200px] md:min-h-0">
256-
<div className="absolute inset-0 flex items-center justify-center p-8">
250+
View all case studies
251+
<span className="transition-transform hover:translate-x-1">→</span>
252+
</Link>
253+
</div>
254+
255+
{/* Horizontal Scrolling Carousel */}
256+
<div className="relative">
257+
<div className="overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-8 -mx-6 px-6">
258+
<div className="flex gap-6 w-max">
259+
{/* SWAPP Case Study Card */}
260+
<Link
261+
href="/case-studies/swapp"
262+
className="flex-shrink-0 w-[70vw] md:w-[340px] bg-white rounded-2xl border border-charcoal/10 overflow-hidden hover:border-coral/30 hover:shadow-2xl transition-all duration-300 group snap-start"
263+
>
264+
{/* Icon/Header */}
265+
<div className="relative bg-gradient-to-br from-coral/20 to-mustard/15 h-28 flex items-center justify-center">
257266
<div className="text-center">
258-
<div className="text-6xl mb-4">🏔️</div>
259-
<div className="text-sm font-semibold text-charcoal/60 uppercase tracking-wider">Case Study</div>
267+
<div className="text-4xl mb-1">🏔️</div>
268+
<div className="text-xs font-semibold text-charcoal/60 uppercase tracking-wider">Case Study</div>
260269
</div>
261270
</div>
262-
</div>
263271

264-
{/* Right side - Content */}
265-
<div className="md:col-span-3 p-8">
266-
<div className="flex items-start justify-between mb-4">
267-
<h3 className="text-2xl font-bold text-charcoal group-hover:text-coral transition-colors">
268-
SWAPP: Emergency Response
269-
</h3>
270-
<span className="text-coral ml-2 group-hover:translate-x-1 transition-transform">→</span>
271-
</div>
272+
{/* Content */}
273+
<div className="p-5 flex flex-col h-[calc(100%-7rem)]">
274+
<div className="mb-3">
275+
<h3 className="text-xl font-bold text-charcoal group-hover:text-coral transition-colors">
276+
SWAPP: Emergency Response
277+
</h3>
278+
</div>
272279

273-
<p className="text-charcoal-light mb-6 leading-relaxed">
274-
Led development of rapid-response system that reduced intake time by 80% during
275-
severe weather emergencies, preventing 8,300+ nights of unsheltered homelessness.
276-
</p>
280+
<p className="text-charcoal-light text-sm mb-5 leading-relaxed">
281+
Led development of rapid-response system that reduced intake time by 80% during
282+
severe weather emergencies, preventing 8,300+ nights of unsheltered homelessness.
283+
</p>
277284

278-
{/* Key stats */}
279-
<div className="grid grid-cols-2 gap-4 mb-6">
280-
<div>
281-
<div className="text-2xl font-bold text-coral mb-1">80%</div>
282-
<div className="text-sm text-charcoal/60">Faster intake time</div>
283-
</div>
284-
<div>
285-
<div className="text-2xl font-bold text-sage mb-1">15x</div>
286-
<div className="text-sm text-charcoal/60">Capacity increase</div>
285+
{/* Key stats */}
286+
<div className="grid grid-cols-2 gap-3 mb-4">
287+
<div>
288+
<div className="text-2xl font-bold text-coral mb-0.5">80%</div>
289+
<div className="text-xs text-charcoal/60">Faster intake time</div>
290+
</div>
291+
<div>
292+
<div className="text-2xl font-bold text-sage mb-0.5">15x</div>
293+
<div className="text-xs text-charcoal/60">Capacity increase</div>
294+
</div>
287295
</div>
288-
</div>
289296

290-
<div className="flex items-center gap-2 text-coral font-semibold group-hover:gap-3 transition-all">
291-
Read case study
292-
<span>→</span>
297+
<div className="mt-auto flex items-center gap-2 text-coral font-semibold text-sm group-hover:gap-3 transition-all">
298+
Read case study
299+
<span>→</span>
300+
</div>
293301
</div>
294-
</div>
295-
</div>
296-
</Link>
302+
</Link>
297303

298-
{/* Mayday Case Study Card */}
299-
<Link
300-
href="/case-studies/mayday"
301-
className="block bg-white rounded-2xl border border-charcoal/10 overflow-hidden hover:border-coral/30 hover:shadow-2xl transition-all duration-300 group"
302-
>
303-
<div className="grid md:grid-cols-5 gap-0">
304-
{/* Left side - Icon */}
305-
<div className="md:col-span-2 relative bg-gradient-to-br from-sage/20 to-sky/15 min-h-[200px] md:min-h-0">
306-
<div className="absolute inset-0 flex items-center justify-center p-8">
304+
{/* Mayday Case Study Card */}
305+
<Link
306+
href="/case-studies/mayday"
307+
className="flex-shrink-0 w-[70vw] md:w-[340px] bg-white rounded-2xl border border-charcoal/10 overflow-hidden hover:border-coral/30 hover:shadow-2xl transition-all duration-300 group snap-start"
308+
>
309+
{/* Icon/Header */}
310+
<div className="relative bg-gradient-to-br from-sage/20 to-sky/15 h-28 flex items-center justify-center">
307311
<div className="text-center">
308-
<div className="text-6xl mb-4">🎯</div>
309-
<div className="text-sm font-semibold text-charcoal/60 uppercase tracking-wider">Case Study</div>
312+
<div className="text-4xl mb-1">🎯</div>
313+
<div className="text-xs font-semibold text-charcoal/60 uppercase tracking-wider">Case Study</div>
310314
</div>
311315
</div>
312-
</div>
313316

314-
{/* Right side - Content */}
315-
<div className="md:col-span-3 p-8">
316-
<div className="flex items-start justify-between mb-4">
317-
<h3 className="text-2xl font-bold text-charcoal group-hover:text-coral transition-colors">
318-
Mayday: Lead Generation
319-
</h3>
320-
<span className="text-coral ml-2 group-hover:translate-x-1 transition-transform">→</span>
321-
</div>
317+
{/* Content */}
318+
<div className="p-5 flex flex-col h-[calc(100%-7rem)]">
319+
<div className="mb-3">
320+
<h3 className="text-xl font-bold text-charcoal group-hover:text-coral transition-colors">
321+
Mayday: Lead Generation
322+
</h3>
323+
</div>
322324

323-
<p className="text-charcoal-light mb-6 leading-relaxed">
324-
Automated system that eliminates 15 hours/week of manual prospecting work by
325-
continuously scanning businesses and delivering daily digests of pre-qualified leads.
326-
</p>
325+
<p className="text-charcoal-light text-sm mb-5 leading-relaxed">
326+
Automated system that eliminates 15 hours/week of manual prospecting work by
327+
continuously scanning businesses and delivering daily digests of pre-qualified leads.
328+
</p>
329+
330+
{/* Key stats */}
331+
<div className="grid grid-cols-2 gap-3 mb-4">
332+
<div>
333+
<div className="text-2xl font-bold text-coral mb-0.5">~15 hours</div>
334+
<div className="text-xs text-charcoal/60">Eliminated weekly</div>
335+
</div>
336+
<div>
337+
<div className="text-2xl font-bold text-sage mb-0.5">10-15k</div>
338+
<div className="text-xs text-charcoal/60">Businesses scanned/month</div>
339+
</div>
340+
</div>
327341

328-
{/* Key stats */}
329-
<div className="grid grid-cols-2 gap-4 mb-6">
330-
<div>
331-
<div className="text-2xl font-bold text-coral mb-1">~15 hours</div>
332-
<div className="text-sm text-charcoal/60">Eliminated weekly</div>
342+
<div className="mt-auto flex items-center gap-2 text-coral font-semibold text-sm group-hover:gap-3 transition-all">
343+
Read case study
344+
<span>→</span>
333345
</div>
334-
<div>
335-
<div className="text-2xl font-bold text-sage mb-1">10-15k</div>
336-
<div className="text-sm text-charcoal/60">Businesses scanned/month</div>
346+
</div>
347+
</Link>
348+
349+
{/* LLT Case Study Card */}
350+
<Link
351+
href="/case-studies/llt"
352+
className="flex-shrink-0 w-[70vw] md:w-[340px] bg-white rounded-2xl border border-charcoal/10 overflow-hidden hover:border-coral/30 hover:shadow-2xl transition-all duration-300 group snap-start"
353+
>
354+
{/* Icon/Header */}
355+
<div className="relative bg-gradient-to-br from-lavender/20 to-mustard/10 h-28 flex items-center justify-center">
356+
<div className="text-center">
357+
<div className="text-4xl mb-1">📚</div>
358+
<div className="text-xs font-semibold text-charcoal/60 uppercase tracking-wider">Case Study</div>
337359
</div>
338360
</div>
339361

340-
<div className="flex items-center gap-2 text-coral font-semibold group-hover:gap-3 transition-all">
341-
Read case study
342-
<span>→</span>
362+
{/* Content */}
363+
<div className="p-5 flex flex-col h-[calc(100%-7rem)]">
364+
<div className="mb-3">
365+
<h3 className="text-xl font-bold text-charcoal group-hover:text-coral transition-colors">
366+
Let&apos;s Learn Together
367+
</h3>
368+
</div>
369+
370+
<p className="text-charcoal-light text-sm mb-5 leading-relaxed">
371+
Helped Houston tutoring agency optimize billing operations and adopt the right business
372+
management platform, saving hours weekly while enabling growth.
373+
</p>
374+
375+
{/* Key stats */}
376+
<div className="grid grid-cols-2 gap-3 mb-4">
377+
<div>
378+
<div className="text-2xl font-bold text-coral mb-0.5">Hours</div>
379+
<div className="text-xs text-charcoal/60">Saved weekly</div>
380+
</div>
381+
<div>
382+
<div className="text-2xl font-bold text-sage mb-0.5">3</div>
383+
<div className="text-xs text-charcoal/60">Vendors evaluated</div>
384+
</div>
385+
</div>
386+
387+
<div className="mt-auto flex items-center gap-2 text-coral font-semibold text-sm group-hover:gap-3 transition-all">
388+
Read case study
389+
<span>→</span>
390+
</div>
343391
</div>
344-
</div>
392+
</Link>
345393
</div>
346-
</Link>
394+
</div>
347395

348-
{/* Link to all case studies */}
349-
<div className="text-center mt-8">
350-
<Link
351-
href="/case-studies"
352-
className="inline-flex items-center gap-2 text-charcoal hover:text-coral font-medium transition-colors"
353-
>
354-
View all case studies
355-
<span className="transition-transform hover:translate-x-1">→</span>
356-
</Link>
396+
{/* Scroll hint */}
397+
<div className="text-center mt-6 text-sm text-charcoal/40">
398+
<span className="md:hidden">← Swipe to see more →</span>
357399
</div>
358400
</div>
359401
</div>

‎tailwind.config.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Config } from 'tailwindcss'
2+
import plugin from 'tailwindcss/plugin'
23

34
const config: Config = {
45
content: [
@@ -55,7 +56,21 @@ const config: Config = {
5556
},
5657
},
5758
},
58-
plugins: [],
59+
plugins: [
60+
plugin(function({ addUtilities }) {
61+
addUtilities({
62+
'.scrollbar-hide': {
63+
/* Hide scrollbar for Chrome, Safari and Opera */
64+
'&::-webkit-scrollbar': {
65+
display: 'none',
66+
},
67+
/* Hide scrollbar for IE, Edge and Firefox */
68+
'-ms-overflow-style': 'none',
69+
'scrollbar-width': 'none',
70+
},
71+
})
72+
}),
73+
],
5974
}
6075

6176
export default config

0 commit comments

Comments
 (0)