Skip to content

Add hero illustration and enhance CTA buttons #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mostlyerror merged 1 commit into from
Jan 15, 2026
Merged

Add hero illustration and enhance CTA buttons #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 31 additions & 26 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,37 @@ export default function Home() {
{/* Decorative elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{/* Large blurred gradient blobs */}
<div className="absolute -top-32 -right-32 w-[500px] h-[500px] bg-mustard/15 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 -left-48 w-[600px] h-[600px] bg-sage/10 rounded-full blur-3xl"></div>
<div className="absolute -bottom-20 right-1/4 w-[400px] h-[400px] bg-coral/5 rounded-full blur-3xl"></div>
<div className="absolute -top-32 -left-32 w-[500px] h-[500px] bg-mustard/15 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 -right-48 w-[600px] h-[600px] bg-sage/10 rounded-full blur-3xl"></div>
<div className="absolute -bottom-20 left-1/4 w-[400px] h-[400px] bg-coral/5 rounded-full blur-3xl"></div>

{/* SVG decorative elements */}
<svg className="absolute top-32 right-[12%] w-24 h-24 text-coral/15" viewBox="0 0 100 100">
<svg className="absolute top-32 left-[8%] w-24 h-24 text-coral/15 max-lg:hidden" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="8 6"/>
</svg>
<svg className="absolute bottom-1/4 left-[8%] w-40 h-40 text-sage/15" viewBox="0 0 100 100">
<svg className="absolute bottom-1/4 right-[8%] w-40 h-40 text-sage/15 max-lg:hidden" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="1.5"/>
</svg>
<svg className="absolute top-[45%] right-[5%] w-16 h-16 text-mustard/25" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>
<svg className="absolute top-[20%] left-[15%] w-10 h-10 text-lavender/20" viewBox="0 0 100 100">
<svg className="absolute top-[20%] left-[12%] w-10 h-10 text-lavender/20 max-lg:hidden" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" rx="20" fill="currentColor"/>
</svg>
<svg className="absolute bottom-32 right-[20%] w-8 h-8 text-coral/20" viewBox="0 0 100 100">
<svg className="absolute bottom-32 left-[18%] w-8 h-8 text-coral/20 max-lg:hidden" viewBox="0 0 100 100">
<rect x="15" y="15" width="70" height="70" rx="15" fill="currentColor"/>
</svg>

{/* Dot grid patterns */}
<div className="absolute top-40 left-[5%] grid grid-cols-4 gap-4 opacity-20 max-md:hidden">
<div className="absolute top-40 left-[5%] grid grid-cols-4 gap-4 opacity-20 max-lg:hidden">
{[...Array(12)].map((_, i) => (
<div key={i} className="w-2 h-2 bg-charcoal/60 rounded-full"></div>
))}
</div>
<div className="absolute bottom-24 right-[8%] grid grid-cols-3 gap-3 opacity-15 max-md:hidden">
{[...Array(6)].map((_, i) => (
<div key={i} className="w-1.5 h-1.5 bg-charcoal rounded-full"></div>
))}
</div>
</div>

{/* Floating shapes (animated) */}
<div className="absolute top-[20%] right-[10%] w-14 h-14 bg-sage/80 rounded-2xl animate-float max-md:hidden shadow-lg"></div>
<div className="absolute top-[55%] right-[18%] w-10 h-10 bg-mustard/80 rounded-full animate-float-delayed max-md:hidden shadow-lg"></div>
<div className="absolute top-[35%] right-[5%] w-6 h-6 bg-lavender/80 rounded-xl animate-float-fast max-md:hidden shadow-md"></div>
<div className="absolute top-[20%] left-[8%] w-14 h-14 bg-sage/80 rounded-2xl animate-float max-lg:hidden shadow-lg"></div>
<div className="absolute top-[55%] left-[15%] w-10 h-10 bg-mustard/80 rounded-full animate-float-delayed max-lg:hidden shadow-lg"></div>
<div className="absolute top-[35%] left-[5%] w-6 h-6 bg-lavender/80 rounded-xl animate-float-fast max-lg:hidden shadow-md"></div>

<div className="max-w-6xl mx-auto px-6 relative z-10">
<div className="max-w-[700px]">
<div className="inline-flex items-center gap-2 bg-white/80 backdrop-blur-sm px-3.5 py-1.5 rounded-full text-sm font-medium mb-5 shadow-sm border border-mustard/30">
Expand All @@ -61,11 +53,24 @@ export default function Home() {
<p className="text-lg text-charcoal-light max-w-[550px] mb-8">
You don&apos;t need more software. You need the right solution, and someone who&apos;ll tell you the truth about what that is.
</p>
<div className="flex gap-3 flex-wrap max-md:flex-col">
<Link href="#contact" className="inline-block px-6 py-3 bg-coral text-white font-semibold text-base rounded-full hover:bg-coral-hover hover:-translate-y-0.5 hover:shadow-lg hover:shadow-coral/30 transition-all duration-300 text-center">

{/* Illustration */}
<div className="mb-0 md:mb-8 md:mt-4">
<Image
src="/good_robot_hero.png"
alt="Person working collaboratively with a friendly robot assistant"
width={600}
height={400}
priority
className="w-full h-auto max-w-full md:max-w-2xl"
/>
</div>

<div className="flex gap-4 flex-wrap max-md:flex-col">
<Link href="#contact" className="inline-block px-8 py-4 bg-coral text-white font-bold text-lg rounded-full shadow-xl shadow-coral/40 hover:bg-coral-hover hover:-translate-y-1 hover:shadow-2xl hover:shadow-coral/50 transition-all duration-300 text-center">
Let&apos;s Talk →
</Link>
<Link href="#services" className="inline-block px-6 py-3 bg-white/80 backdrop-blur-sm text-charcoal font-semibold text-base rounded-full border-2 border-charcoal/20 hover:bg-charcoal hover:text-white hover:border-charcoal transition-all duration-300 text-center">
<Link href="#services" className="inline-block px-8 py-4 bg-white text-charcoal font-bold text-lg rounded-full border-2 border-charcoal/30 shadow-lg hover:bg-charcoal hover:text-white hover:border-charcoal hover:-translate-y-1 hover:shadow-xl transition-all duration-300 text-center">
See How We Help
</Link>
</div>
Expand Down
Binary file added public/good_robot_hero.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.