Merge header and bio into unified compact layout
Consolidated Header and Bio components into a single responsive section for better space utilization and visual consistency with the claims library. Layout changes: - Unified header section with wide container (max-w-[1920px]) - Desktop (lg+): Photo + name/title on left, bio paragraphs flow to the right - Mobile: Vertical stack (photo → name → bio paragraphs) - Removed separate Bio section from homepage - Matches claims library container width for visual consistency Benefits: ✓ Reduces vertical scrolling on desktop ✓ Better use of horizontal space on wide screens ✓ Maintains mobile-friendly responsive design ✓ Preserves semantic HTML and SEO structure ✓ All content left-aligned for consistency Responsive breakpoints: - Mobile: Stacked vertically - lg (1024px+): Side-by-side layout with flexbox 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
c633cd230d
commit
98b1e6482b
|
|
@ -1,6 +1,5 @@
|
|||
import type { Metadata } from "next";
|
||||
import Header from "@/components/Header";
|
||||
import Bio from "@/components/Bio";
|
||||
import Services from "@/components/Services";
|
||||
import ClaimsLibrary from "@/components/ClaimsLibrary";
|
||||
import Footer from "@/components/Footer";
|
||||
|
|
@ -51,7 +50,6 @@ export default function HomePage() {
|
|||
</a>
|
||||
<Header />
|
||||
<main id="main-content">
|
||||
<Bio />
|
||||
<ClaimsLibrary />
|
||||
<Services />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
import { ExternalLink } from "lucide-react";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="border-b border-border py-12 md:py-16">
|
||||
<div className="container max-w-4xl mx-auto px-5">
|
||||
<div className="flex flex-row gap-6 items-center">
|
||||
<header className="border-b border-border py-10 md:py-12">
|
||||
<div className="container max-w-[1920px] mx-auto px-6 md:px-8 lg:px-12">
|
||||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">
|
||||
{/* Left: Photo + Name/Title */}
|
||||
<div className="flex flex-row gap-6 items-center lg:items-start flex-shrink-0">
|
||||
<img
|
||||
src="/kamil-banc.jpg"
|
||||
alt="Kamil Banc"
|
||||
|
|
@ -13,6 +17,41 @@ const Header = () => {
|
|||
<p className="text-xl text-secondary">AI Implementation Expert</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Bio Content */}
|
||||
<div className="flex-1 space-y-4">
|
||||
<p className="text-base leading-relaxed">
|
||||
I help organizations implement AI systems that actually work. I focus on real implementations that generate measurable value, not theoretical frameworks or vendor pitches.
|
||||
</p>
|
||||
|
||||
<p className="text-base leading-relaxed">
|
||||
My work focuses on practical adoption patterns: what works, what fails, and why. I document implementation frameworks, measure outcomes, and share findings through the AI Adopters Club community.
|
||||
</p>
|
||||
|
||||
<p className="text-base leading-relaxed">
|
||||
This library contains citation-ready claims from my research and consulting work. Each claim is backed by data, includes context, and is optimized for LLM extraction.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4 pt-2">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/kbanc/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
LinkedIn <ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
<a
|
||||
href="https://aiadopters.club"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
AI Adopters Club <ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue