Align header sections at bottom: bio on left, CTA on right

This commit is contained in:
kbanc85 2025-11-09 21:40:50 -05:00
parent 4455984279
commit fc154bdebb
2 changed files with 49 additions and 49 deletions

View File

@ -5,7 +5,7 @@
<link>https://kbanc.com</link>
<description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description>
<language>en-us</language>
<lastBuildDate>Mon, 10 Nov 2025 02:27:35 GMT</lastBuildDate>
<lastBuildDate>Mon, 10 Nov 2025 02:30:48 GMT</lastBuildDate>
<atom:link href="https://kbanc.com/feed.xml" rel="self" type="application/rss+xml"/>
<item>

View File

@ -4,22 +4,22 @@ const Header = () => {
return (
<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 gap-8 items-start">
{/* Photo + Name/Title */}
<div className="flex flex-row gap-6 items-center flex-shrink-0">
<img
src="/kamil-banc.jpg"
alt="Kamil Banc"
className="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0"
/>
<div>
<h1 className="text-4xl md:text-5xl font-bold mb-2">Kamil Banc</h1>
<p className="text-xl text-secondary">AI Implementation Expert</p>
<div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 lg:gap-12 items-end">
{/* Left Side: Photo + Title + Bio */}
<div className="space-y-6">
{/* Photo + Name/Title */}
<div className="flex flex-row gap-6 items-center">
<img
src="/kamil-banc.jpg"
alt="Kamil Banc"
className="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0"
/>
<div>
<h1 className="text-4xl md:text-5xl font-bold mb-2">Kamil Banc</h1>
<p className="text-xl text-secondary">AI Implementation Expert</p>
</div>
</div>
</div>
{/* Bio Content + CTA Side by Side */}
<div className="w-full grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 lg:gap-12 items-start">
{/* Bio Text */}
<div className="space-y-4">
<p className="text-base leading-relaxed">
@ -34,42 +34,42 @@ const Header = () => {
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>
</div>
{/* Premium CTA + Links */}
<div className="border border-border rounded-lg p-6 lg:w-80 flex-shrink-0 space-y-4">
<div>
<p className="text-sm text-muted-foreground mb-4">
Get access to enterprise case studies, premium workflows, and our AI chatbot trained on all assets.
</p>
<a
href="https://aiadopters.club/subscribe"
target="_blank"
rel="noopener noreferrer"
className="bg-accent hover:bg-accent/90 text-accent-foreground font-medium px-4 py-2 rounded-lg transition-colors whitespace-nowrap text-center inline-flex items-center justify-center gap-2 w-full text-sm"
>
Unlock Premium
<ExternalLink className="h-3 w-3" />
</a>
</div>
{/* Right Side: Premium CTA + Links */}
<div className="border border-border rounded-lg p-6 lg:w-80 flex-shrink-0 space-y-4">
<div>
<p className="text-sm text-muted-foreground mb-4">
Get access to enterprise case studies, premium workflows, and our AI chatbot trained on all assets.
</p>
<a
href="https://aiadopters.club/subscribe"
target="_blank"
rel="noopener noreferrer"
className="bg-accent hover:bg-accent/90 text-accent-foreground font-medium px-4 py-2 rounded-lg transition-colors whitespace-nowrap text-center inline-flex items-center justify-center gap-2 w-full text-sm"
>
Unlock Premium
<ExternalLink className="h-3 w-3" />
</a>
</div>
<div className="flex flex-col gap-2 pt-2 border-t border-border">
<a
href="https://www.linkedin.com/in/kbanc/"
target="_blank"
rel="noopener noreferrer"
className="text-accent hover:underline inline-flex items-center gap-1 text-sm"
>
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 text-sm"
>
AI Adopters Club <ExternalLink className="h-3 w-3" />
</a>
</div>
<div className="flex flex-col gap-2 pt-2 border-t border-border">
<a
href="https://www.linkedin.com/in/kbanc/"
target="_blank"
rel="noopener noreferrer"
className="text-accent hover:underline inline-flex items-center gap-1 text-sm"
>
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 text-sm"
>
AI Adopters Club <ExternalLink className="h-3 w-3" />
</a>
</div>
</div>
</div>