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> <link>https://kbanc.com</link>
<description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description> <description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description>
<language>en-us</language> <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"/> <atom:link href="https://kbanc.com/feed.xml" rel="self" type="application/rss+xml"/>
<item> <item>

View File

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