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,9 +4,11 @@ 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">
{/* Left Side: Photo + Title + Bio */}
<div className="space-y-6">
{/* Photo + Name/Title */} {/* Photo + Name/Title */}
<div className="flex flex-row gap-6 items-center flex-shrink-0"> <div className="flex flex-row gap-6 items-center">
<img <img
src="/kamil-banc.jpg" src="/kamil-banc.jpg"
alt="Kamil Banc" alt="Kamil Banc"
@ -18,8 +20,6 @@ const Header = () => {
</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,8 +34,9 @@ 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">
@ -73,7 +74,6 @@ const Header = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
</header> </header>
); );
}; };