Skip to content

Add transparent pricing page with accessible rates #12

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 2 commits into from
Jan 15, 2026
Merged

Add transparent pricing page with accessible rates #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8141539
Add hero illustration and enhance CTA buttons
mostlyerror Jan 15, 2026
9a8f86d
Add transparent pricing page with accessible rates
mostlyerror Jan 15, 2026
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
71 changes: 38 additions & 33 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 Expand Up @@ -103,9 +108,9 @@ export default function Home() {
&quot;The best solution is usually simpler than you think.&quot;
</p>
<div className="space-y-4 text-charcoal-light mb-8">
<p>Most tech consultants default to building something complex. I take a different approach: I find the solution that fits your problem, your budget, and your team.</p>
<p>Sometimes that&apos;s a simple automation or an off-the-shelf tool. Sometimes it&apos;s custom software built exactly for your needs. The difference is I&apos;ll always tell you which one makes sense and why.</p>
<p>No unnecessary complexity. No overselling. Just the right solution for where you are and where your business is going.</p>
<p>I&apos;m building my consulting practice and keeping things simple. I focus on finding the solution that fits your problem and budget—whether that&apos;s a quick automation, a simple website, or custom development.</p>
<p>I won&apos;t overcomplicate things or sell you services you don&apos;t need. You&apos;ll get honest advice, fair pricing, and quality work.</p>
<p>I&apos;m transparent about where I am: building my portfolio with real client projects. That means accessible pricing and personalized attention.</p>
</div>
<div className="flex items-center gap-3">
<img
Expand Down Expand Up @@ -202,7 +207,7 @@ export default function Home() {
<div className="max-w-6xl mx-auto px-6">
<div className="max-w-[550px] mb-12">
<h2 className="text-3xl md:text-4xl font-semibold mb-3.5">Why work with me?</h2>
<p className="text-lg text-charcoal-light">I&apos;m not a huge agency. You&apos;ll work directly with a senior technologist who understands your business—no account managers, no junior staff, no runaround.</p>
<p className="text-lg text-charcoal-light">You&apos;ll work directly with me—no account managers, no runaround. I&apos;m building my practice and keeping things personal and affordable.</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
Expand All @@ -222,9 +227,9 @@ export default function Home() {
<p className="text-charcoal-light text-[15px]">I answer emails. I show up to calls. You&apos;ll never wonder where your project stands.</p>
</div>
<div className="p-4">
<div className="w-16 h-16 bg-sky-light rounded-2xl flex items-center justify-center text-2xl mb-5">🔧</div>
<h3 className="text-xl font-semibold mb-2.5">Built to Last</h3>
<p className="text-charcoal-light text-[15px]">No fragile systems that break when I&apos;m not around. Everything I deliver is maintainable and documented.</p>
<div className="w-16 h-16 bg-sky-light rounded-2xl flex items-center justify-center text-2xl mb-5">💰</div>
<h3 className="text-xl font-semibold mb-2.5">Fair Pricing</h3>
<p className="text-charcoal-light text-[15px]">I&apos;m building my portfolio, so my rates are accessible. You get quality work without the agency markup.</p>
</div>
</div>
</div>
Expand Down
Loading