Skip to content

Commit 41167f6

Browse files
mostlyerrorclaude
mostlyerror
and
claude
committed
Apply homepage design language to all pages
Extract shared components (Reveal, SectionLabel, FAQAccordion, ContactForm) from the homepage and apply consistent scroll-reveal animations, section labels, alternating backgrounds, and editorial typography across all pages. Fix ContactForm success state contrast on dark backgrounds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 15375ae commit 41167f6

18 files changed

Lines changed: 1806 additions & 1939 deletions

File tree

‎app/(main)/about/page.tsx‎

Lines changed: 213 additions & 162 deletions
Large diffs are not rendered by default.

‎app/(main)/ai-for-business/page.tsx‎

Lines changed: 222 additions & 189 deletions
Large diffs are not rendered by default.

‎app/(main)/blog/[slug]/page.tsx‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Image from 'next/image'
44
import HeroSimple from '@/components/HeroSimple'
55
import RichText from '@/components/RichText'
66
import CTA from '@/components/CTA'
7+
import { Reveal } from '@/components/Reveal'
78
import { getAllBlogPosts, getBlogPostBySlug } from '@/lib/sanity.client'
89
import { urlFor } from '@/lib/sanity.image'
910
import { SEO } from '@/lib/seo.constants'
@@ -106,7 +107,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
106107
/>
107108

108109
{/* Blog Post Content */}
109-
<article className="py-12 bg-cream">
110+
<article className="py-16 md:py-24 bg-cream">
110111
<JsonLd
111112
data={buildBlogPostingSchema({
112113
...post,
@@ -120,40 +121,46 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
120121
: undefined,
121122
})}
122123
/>
123-
<div className="max-w-4xl mx-auto px-6">
124+
<div className="max-w-4xl mx-auto px-6 md:px-12">
124125
{/* Meta info */}
125-
<div className="flex items-center gap-4 text-sm text-charcoal-light mb-8">
126-
<span className="font-medium">{post.author}</span>
127-
<span>•</span>
128-
<time dateTime={post.publishedAt}>
129-
{new Date(post.publishedAt).toLocaleDateString('en-US', {
130-
month: 'long',
131-
day: 'numeric',
132-
year: 'numeric',
133-
})}
134-
</time>
135-
</div>
126+
<Reveal>
127+
<div className="flex items-center gap-4 text-sm text-charcoal-light mb-8">
128+
<span className="font-medium">{post.author}</span>
129+
<span>•</span>
130+
<time dateTime={post.publishedAt}>
131+
{new Date(post.publishedAt).toLocaleDateString('en-US', {
132+
month: 'long',
133+
day: 'numeric',
134+
year: 'numeric',
135+
})}
136+
</time>
137+
</div>
138+
</Reveal>
136139

137140
{/* Featured Image */}
138141
{post.featuredImage?.asset && (
139-
<div className="mb-12 rounded-3xl overflow-hidden">
140-
<div className="relative w-full" style={{ aspectRatio: '16/9' }}>
141-
<Image
142-
src={urlFor(post.featuredImage.asset).width(1200).height(675).url()}
143-
alt={post.featuredImage.alt || post.title}
144-
fill
145-
className="object-cover"
146-
priority
147-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
148-
/>
142+
<Reveal delay={0.1}>
143+
<div className="mb-12 rounded-3xl overflow-hidden">
144+
<div className="relative w-full" style={{ aspectRatio: '16/9' }}>
145+
<Image
146+
src={urlFor(post.featuredImage.asset).width(1200).height(675).url()}
147+
alt={post.featuredImage.alt || post.title}
148+
fill
149+
className="object-cover"
150+
priority
151+
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
152+
/>
153+
</div>
149154
</div>
150-
</div>
155+
</Reveal>
151156
)}
152157

153158
{/* Post Content */}
154-
<div className="prose prose-lg max-w-none">
155-
{post.content && <RichText content={post.content} />}
156-
</div>
159+
<Reveal delay={0.15}>
160+
<div className="prose prose-lg max-w-none">
161+
{post.content && <RichText content={post.content} />}
162+
</div>
163+
</Reveal>
157164
</div>
158165
</article>
159166

‎app/(main)/blog/page.tsx‎

Lines changed: 75 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Link from 'next/link'
33
import Image from 'next/image'
44
import HeroSimple from '@/components/HeroSimple'
55
import CTA from '@/components/CTA'
6+
import { Reveal } from '@/components/Reveal'
7+
import SectionLabel from '@/components/SectionLabel'
68
import { getAllBlogPosts } from '@/lib/sanity.client'
79
import { urlFor } from '@/lib/sanity.image'
810

@@ -41,92 +43,96 @@ export default async function Blog() {
4143
title="Blog"
4244
subtitle="Practical insights on technology, AI, and building smarter systems, without the jargon."
4345
maxWidth="max-w-6xl"
46+
label="Blog"
4447
/>
4548

4649
{/* Blog Grid */}
47-
<section className="py-20 bg-cream">
48-
<div className="max-w-6xl mx-auto px-6">
50+
<section className="py-24 md:py-32 bg-cream">
51+
<div className="max-w-6xl mx-auto px-6 md:px-12">
4952
{/* Featured Post */}
5053
{featuredPost && (
51-
<Link
52-
href={`/blog/${featuredPost.slug}`}
53-
className="block bg-white rounded-3xl overflow-hidden mb-16 hover:shadow-xl transition-shadow duration-300 no-underline text-charcoal"
54-
>
55-
<div className="grid md:grid-cols-2">
56-
{featuredPost.featuredImage?.asset ? (
57-
<div className="relative h-64 md:h-auto">
58-
<Image
59-
src={urlFor(featuredPost.featuredImage.asset).width(800).height(600).url()}
60-
alt={featuredPost.featuredImage.alt || featuredPost.title}
61-
fill
62-
className="object-cover"
63-
sizes="(max-width: 768px) 100vw, 50vw"
64-
/>
65-
</div>
66-
) : (
67-
<div className="bg-sage-light h-64 md:h-auto flex items-center justify-center text-8xl">
68-
🤖
69-
</div>
70-
)}
71-
<div className="p-8 md:p-12 flex flex-col justify-center">
72-
<span className="inline-block px-4 py-1.5 bg-coral text-white text-sm font-semibold rounded-full mb-5 w-fit">
73-
Featured
74-
</span>
75-
<h2 className="text-2xl md:text-3xl font-semibold mb-4 leading-tight">
76-
{featuredPost.title}
77-
</h2>
78-
<p className="text-charcoal-light mb-6">
79-
{featuredPost.excerpt || 'Read more to learn about this topic.'}
80-
</p>
81-
<div className="flex items-center gap-4 text-sm text-charcoal-light mb-4">
82-
<span>{featuredPost.author}</span>
83-
<span>•</span>
84-
<time>{new Date(featuredPost.publishedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
85-
</div>
86-
<span className="text-coral font-semibold">Read the full article →</span>
87-
</div>
88-
</div>
89-
</Link>
90-
)}
91-
92-
{/* Remaining Posts Grid */}
93-
{remainingPosts.length > 0 && (
94-
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
95-
{remainingPosts.map((post) => (
96-
<Link
97-
key={post._id}
98-
href={`/blog/${post.slug}`}
99-
className="block bg-white rounded-3xl overflow-hidden hover:shadow-xl transition-shadow duration-300 no-underline text-charcoal"
100-
>
101-
{post.featuredImage?.asset ? (
102-
<div className="relative h-48">
54+
<Reveal>
55+
<Link
56+
href={`/blog/${featuredPost.slug}`}
57+
className="block bg-white rounded-3xl overflow-hidden mb-16 hover:shadow-xl transition-shadow duration-300 no-underline text-charcoal"
58+
>
59+
<div className="grid md:grid-cols-2">
60+
{featuredPost.featuredImage?.asset ? (
61+
<div className="relative h-64 md:h-auto">
10362
<Image
104-
src={urlFor(post.featuredImage.asset).width(600).height(400).url()}
105-
alt={post.featuredImage.alt || post.title}
63+
src={urlFor(featuredPost.featuredImage.asset).width(800).height(600).url()}
64+
alt={featuredPost.featuredImage.alt || featuredPost.title}
10665
fill
10766
className="object-cover"
108-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
67+
sizes="(max-width: 768px) 100vw, 50vw"
10968
/>
11069
</div>
11170
) : (
112-
<div className="bg-sage-light h-48 flex items-center justify-center text-6xl">
113-
📝
71+
<div className="bg-sage-light h-64 md:h-auto flex items-center justify-center text-8xl">
72+
🤖
11473
</div>
11574
)}
116-
<div className="p-6">
117-
<h3 className="text-xl font-semibold mb-3 leading-tight">
118-
{post.title}
119-
</h3>
120-
<p className="text-charcoal-light text-sm mb-4 line-clamp-3">
121-
{post.excerpt || 'Read more to learn about this topic.'}
75+
<div className="p-8 md:p-12 flex flex-col justify-center">
76+
<span className="inline-block px-4 py-1.5 bg-coral text-white text-sm font-semibold rounded-full mb-5 w-fit">
77+
Featured
78+
</span>
79+
<h2 className="text-2xl md:text-3xl font-display font-bold mb-4 leading-tight">
80+
{featuredPost.title}
81+
</h2>
82+
<p className="text-charcoal-light mb-6">
83+
{featuredPost.excerpt || 'Read more to learn about this topic.'}
12284
</p>
123-
<div className="flex items-center gap-2 text-xs text-charcoal-light">
124-
<span>{post.author}</span>
85+
<div className="flex items-center gap-4 text-sm text-charcoal-light mb-4">
86+
<span>{featuredPost.author}</span>
12587
<span>•</span>
126-
<time>{new Date(post.publishedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</time>
88+
<time>{new Date(featuredPost.publishedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time>
12789
</div>
90+
<span className="text-coral font-semibold">Read the full article →</span>
12891
</div>
129-
</Link>
92+
</div>
93+
</Link>
94+
</Reveal>
95+
)}
96+
97+
{/* Remaining Posts Grid */}
98+
{remainingPosts.length > 0 && (
99+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
100+
{remainingPosts.map((post, i) => (
101+
<Reveal key={post._id} delay={i * 0.08}>
102+
<Link
103+
href={`/blog/${post.slug}`}
104+
className="block bg-white rounded-3xl overflow-hidden hover:shadow-xl transition-shadow duration-300 no-underline text-charcoal"
105+
>
106+
{post.featuredImage?.asset ? (
107+
<div className="relative h-48">
108+
<Image
109+
src={urlFor(post.featuredImage.asset).width(600).height(400).url()}
110+
alt={post.featuredImage.alt || post.title}
111+
fill
112+
className="object-cover"
113+
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
114+
/>
115+
</div>
116+
) : (
117+
<div className="bg-sage-light h-48 flex items-center justify-center text-6xl">
118+
📝
119+
</div>
120+
)}
121+
<div className="p-6">
122+
<h3 className="text-xl font-display font-bold mb-3 leading-tight">
123+
{post.title}
124+
</h3>
125+
<p className="text-charcoal-light text-sm mb-4 line-clamp-3">
126+
{post.excerpt || 'Read more to learn about this topic.'}
127+
</p>
128+
<div className="flex items-center gap-2 text-xs text-charcoal-light">
129+
<span>{post.author}</span>
130+
<span>•</span>
131+
<time>{new Date(post.publishedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</time>
132+
</div>
133+
</div>
134+
</Link>
135+
</Reveal>
130136
))}
131137
</div>
132138
)}

0 commit comments

Comments
 (0)