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) {
return (
<div className="border-accent-border bg-accent-bg-soft 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-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 rounded-full border">
<svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
<path
d="M5 13l4 4L19 7"
@@ -200,7 +200,7 @@ export function ContactForm() {
<button
type="submit"
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"}
</button>
@@ -211,7 +211,7 @@ export function ContactForm() {
}
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({
label,
src/app/_components/mobile-nav.tsx
+6 -4
View File
@@ -26,9 +26,11 @@ export function MobileNav() {
onClick={() => setIsOpen(!isOpen)}
aria-label={isOpen ? "Close menu" : "Open menu"}
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
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
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"
} overflow-hidden`}
>
@@ -55,7 +57,7 @@ export function MobileNav() {
key={link.href}
href={link.href}
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}
</a>
src/app/_components/theme-toggle.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function ThemeToggle() {
type="button"
onClick={toggle}
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 ? (
<SunIcon className="h-4 w-4" />
src/app/page.tsx
+8 -8
View File
@@ -76,7 +76,7 @@ function Header() {
return (
<header className="sticky top-0 z-50">
<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 />
<nav className="text-text-secondary hidden items-center gap-6 text-sm font-medium md:flex">
<a href="#services" className="hover:text-text transition">
@@ -96,7 +96,7 @@ function Header() {
<ThemeToggle />
<a
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
</a>
@@ -166,13 +166,13 @@ function Hero() {
<div className="mt-9 flex flex-wrap items-center gap-4">
<a
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
</a>
<a
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
</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."
/>
<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) => (
<div
key={s.title}
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}
</div>
<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."
/>
</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) => (
<div key={p.title} className="bg-surface p-7">
<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"
>
<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="mb-8 text-center">
<div className="text-accent font-mono text-sm font-semibold tracking-widest uppercase">