soconnor/hadlock.tech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine homepage copy and visual language

Browse Source
This commit is contained in:
soconnor
2026-08-18 00:16:05 -04:00
parent 4f48b498c1
commit d8353f1554
4 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/contact-form.tsx
+4 -4
View File
@@ -94,8 +94,8 @@ export function ContactForm() {
if (isSuccess) { if (isSuccess) {
return ( return (
<div className="border-accent-border bg-accent-bg-soft border p-10 text-center"> <div className="border-accent-border bg-accent-bg-soft rounded-xl border p-10 text-center">
<div className="border-accent-border bg-accent-bg text-accent mx-auto flex h-12 w-12 items-center justify-center border"> <div className="border-accent-border bg-accent-bg text-accent mx-auto flex h-12 w-12 items-center justify-center rounded-full border">
<svg viewBox="0 0 24 24" fill="none" className="h-6 w-6"> <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
<path <path
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
@@ -200,7 +200,7 @@ export function ContactForm() {
<button <button
type="submit" type="submit"
disabled={isPending} disabled={isPending}
className="bg-accent text-on-accent hover:bg-accent-hover px-7 py-3.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60" className="bg-accent text-on-accent hover:bg-accent-hover rounded-md px-7 py-3.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60"
> >
{isPending ? "Sending..." : "Send message"} {isPending ? "Sending..." : "Send message"}
</button> </button>
@@ -211,7 +211,7 @@ export function ContactForm() {
} }
const inputClass = const inputClass =
"w-full border border-border bg-surface/40 px-4 py-3 text-sm text-text placeholder:text-faint transition focus:border-accent/60 focus:bg-surface/60 focus:ring-2 focus:ring-accent/20 focus:outline-none"; "w-full rounded-md border border-border bg-surface/40 px-4 py-3 text-sm text-text placeholder:text-faint transition focus:border-accent/60 focus:bg-surface/60 focus:ring-2 focus:ring-accent/20 focus:outline-none";
function Field({ function Field({
label, label,
src/app/_components/mobile-nav.tsx
+6 -4
View File
@@ -26,9 +26,11 @@ export function MobileNav() {
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
aria-label={isOpen ? "Close menu" : "Open menu"} aria-label={isOpen ? "Close menu" : "Open menu"}
aria-expanded={isOpen} aria-expanded={isOpen}
className="border-border bg-surface/50 text-text-secondary hover:text-text relative flex h-9 w-9 items-center justify-center border backdrop-blur-md transition md:hidden" className="border-border bg-surface/50 text-text-secondary hover:text-text relative flex h-9 w-9 items-center justify-center rounded-full border backdrop-blur-md transition md:hidden"
> >
<MenuIcon className={`h-4 w-4 transition-opacity ${isOpen ? "opacity-0" : "opacity-100"}`} /> <MenuIcon
className={`h-4 w-4 transition-opacity ${isOpen ? "opacity-0" : "opacity-100"}`}
/>
<XIcon <XIcon
className={`absolute inset-0 m-auto h-4 w-4 transition-opacity ${isOpen ? "opacity-100" : "opacity-0"}`} className={`absolute inset-0 m-auto h-4 w-4 transition-opacity ${isOpen ? "opacity-100" : "opacity-0"}`}
/> />
@@ -45,7 +47,7 @@ export function MobileNav() {
)} )}
<div <div
className={`border-border bg-bg/95 absolute inset-x-0 top-full border-b backdrop-blur-md transition-all duration-300 md:hidden ${ className={`border-border bg-bg/95 absolute inset-x-0 top-full rounded-b-xl border-b backdrop-blur-md transition-all duration-300 md:hidden ${
isOpen ? "max-h-[calc(100vh-4rem)] opacity-100" : "max-h-0 opacity-0" isOpen ? "max-h-[calc(100vh-4rem)] opacity-100" : "max-h-0 opacity-0"
} overflow-hidden`} } overflow-hidden`}
> >
@@ -55,7 +57,7 @@ export function MobileNav() {
key={link.href} key={link.href}
href={link.href} href={link.href}
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
className="text-text-secondary hover:text-text hover:bg-surface/60 rounded px-3 py-2.5 text-sm font-medium transition" className="text-text-secondary hover:text-text hover:bg-surface/60 rounded-md px-3 py-2.5 text-sm font-medium transition"
> >
{link.label} {link.label}
</a> </a>
src/app/_components/theme-toggle.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function ThemeToggle() {
type="button" type="button"
onClick={toggle} onClick={toggle}
aria-label={isLight ? "Switch to dark mode" : "Switch to light mode"} aria-label={isLight ? "Switch to dark mode" : "Switch to light mode"}
className="border-border bg-surface/50 text-text-secondary hover:text-text flex h-9 w-9 items-center justify-center border backdrop-blur-md transition" className="border-border bg-surface/50 text-text-secondary hover:text-text flex h-9 w-9 items-center justify-center rounded-full border backdrop-blur-md transition"
> >
{isLight ? ( {isLight ? (
<SunIcon className="h-4 w-4" /> <SunIcon className="h-4 w-4" />
src/app/page.tsx
+8 -8
View File
@@ -76,7 +76,7 @@ function Header() {
return ( return (
<header className="sticky top-0 z-50"> <header className="sticky top-0 z-50">
<div className="mx-auto max-w-6xl px-4 pt-2"> <div className="mx-auto max-w-6xl px-4 pt-2">
<div className="border-border bg-bg relative flex h-14 items-center justify-between border px-4 shadow-lg"> <div className="border-border bg-bg relative flex h-14 items-center justify-between rounded-xl border px-4 shadow-lg">
<Wordmark /> <Wordmark />
<nav className="text-text-secondary hidden items-center gap-6 text-sm font-medium md:flex"> <nav className="text-text-secondary hidden items-center gap-6 text-sm font-medium md:flex">
<a href="#services" className="hover:text-text transition"> <a href="#services" className="hover:text-text transition">
@@ -96,7 +96,7 @@ function Header() {
<ThemeToggle /> <ThemeToggle />
<a <a
href="#contact" href="#contact"
className="bg-text text-bg px-4 py-2 text-sm font-semibold transition hover:opacity-80" className="bg-text text-bg rounded-md px-4 py-2 text-sm font-semibold transition hover:opacity-80"
> >
Get in touch Get in touch
</a> </a>
@@ -166,13 +166,13 @@ function Hero() {
<div className="mt-9 flex flex-wrap items-center gap-4"> <div className="mt-9 flex flex-wrap items-center gap-4">
<a <a
href="#contact" href="#contact"
className="bg-accent text-on-accent hover:bg-accent-hover px-6 py-3 text-sm font-semibold transition" className="bg-accent text-on-accent hover:bg-accent-hover rounded-md px-6 py-3 text-sm font-semibold transition"
> >
Start a conversation Start a conversation
</a> </a>
<a <a
href="#services" href="#services"
className="border-border-strong bg-surface/50 text-text hover:border-border-strong hover:bg-surface border px-6 py-3 text-sm font-semibold backdrop-blur-sm transition" className="border-border-strong bg-surface/50 text-text hover:border-border-strong hover:bg-surface rounded-md border px-6 py-3 text-sm font-semibold backdrop-blur-sm transition"
> >
See what we do See what we do
</a> </a>
@@ -204,13 +204,13 @@ function Services() {
description="Most businesses rely on separate vendors for networking, hosting, software, and commerce. Hadlock brings them together, so there is one place to call and no problem gets lost between providers." description="Most businesses rely on separate vendors for networking, hosting, software, and commerce. Hadlock brings them together, so there is one place to call and no problem gets lost between providers."
/> />
<div className="border-border bg-border mt-14 grid grid-cols-1 gap-px overflow-hidden border sm:grid-cols-2 lg:grid-cols-3"> <div className="border-border bg-border mt-14 grid grid-cols-1 gap-px overflow-hidden rounded-xl border sm:grid-cols-2 lg:grid-cols-3">
{services.map((s) => ( {services.map((s) => (
<div <div
key={s.title} key={s.title}
className="group bg-surface hover:bg-surface-hover relative p-7 transition" className="group bg-surface hover:bg-surface-hover relative p-7 transition"
> >
<div className="border-accent-border bg-accent-bg text-accent mb-4 inline-flex items-center border px-2.5 py-1 text-xs font-medium"> <div className="border-accent-border bg-accent-bg text-accent mb-4 inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium">
{s.tag} {s.tag}
</div> </div>
<h3 className="text-text text-lg font-semibold">{s.title}</h3> <h3 className="text-text text-lg font-semibold">{s.title}</h3>
@@ -255,7 +255,7 @@ function Approach() {
description="The same person designs the system, runs it, and responds when something goes wrong. That means less coordination, faster decisions, and technology shaped around how the business actually operates." description="The same person designs the system, runs it, and responds when something goes wrong. That means less coordination, faster decisions, and technology shaped around how the business actually operates."
/> />
</div> </div>
<div className="border-border bg-border grid gap-px overflow-hidden border"> <div className="border-border bg-border grid gap-px overflow-hidden rounded-xl border">
{points.map((p) => ( {points.map((p) => (
<div key={p.title} className="bg-surface p-7"> <div key={p.title} className="bg-surface p-7">
<h3 className="text-text text-base font-semibold">{p.title}</h3> <h3 className="text-text text-base font-semibold">{p.title}</h3>
@@ -695,7 +695,7 @@ function Contact() {
className="bg-surface/50 border-border-faint scroll-mt-20 border-t" className="bg-surface/50 border-border-faint scroll-mt-20 border-t"
> >
<div className="mx-auto max-w-3xl px-6 py-24"> <div className="mx-auto max-w-3xl px-6 py-24">
<div className="bg-surface border-border relative overflow-hidden border p-8 md:p-12"> <div className="bg-surface border-border relative overflow-hidden rounded-xl border p-8 md:p-12">
<div className="absolute inset-0 -z-10 bg-[radial-gradient(50%_60%_at_50%_0%,var(--accent-glow),transparent_70%)]" /> <div className="absolute inset-0 -z-10 bg-[radial-gradient(50%_60%_at_50%_0%,var(--accent-glow),transparent_70%)]" />
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<div className="text-accent font-mono text-sm font-semibold tracking-widest uppercase"> <div className="text-accent font-mono text-sm font-semibold tracking-widest uppercase">