Contact Page: Glass-Panel Comms Form and Social Links

The Contact page (/contact) is titled “Open Comms Channel” in the template, with the subtitle “Establish a direct link to the dev console.” It uses a grid lg:grid-cols-3 layout where the contact form takes up two-thirds of the space and a social links sidebar occupies the right third. Every element leans into the terminal/comms aesthetic: input labels read “Sender ID” and “Return Frequency”, the submit button says “Transmit Signal”, and the form panel header shows TERMINAL // COMMS_UPLINK.

Layout overview

The page wrapper is py-12 max-w-6xl mx-auto min-h-[80vh] flex flex-col justify-center. On mobile the form and social links stack vertically. On lg: screens they sit side by side in a 2:1 column ratio. The form panel enters with initial={{ opacity: 0, x: -20 }} → animate={{ opacity: 1, x: 0 }}. The social sidebar enters with initial={{ opacity: 0, x: 20 }} → animate={{ opacity: 1, x: 0 }}. Both use the default AnimatePresence ease and duration: 0.5.

Form panel

The form panel is a glass-panel rounded-3xl p-8 border-aurora-teal/30 relative overflow-hidden lg:col-span-2. It has:

Terminal header bar — A flex row with Terminal icon, the label TERMINAL // COMMS_UPLINK in font-mono text-sm text-aurora-turquoise, and three window-control dots (cosmic-magenta/50, aurora-teal/50, aurora-green animate-pulse).
Form fields — Name and email in a grid md:grid-cols-2 gap-6 row, textarea below, submit button at the bottom.

Input field styling

All <input> and <textarea> elements share the same style tokens:

bg-space-900/50
border border-white/10
rounded-lg px-4 py-3
text-white font-mono text-sm
focus:outline-none
focus:border-aurora-turquoise
focus:ring-1 focus:ring-aurora-turquoise
transition-all

The focus state replaces border-white/10 with a solid aurora-turquoise border and adds a single-pixel ring-aurora-turquoise glow ring.

Textarea

The textarea uses rows={5} and adds resize-none to prevent users from resizing it — this keeps the layout predictable. All other style tokens are identical to the text inputs.

Submit button states

The submit button is a motion.button with whileHover={{ scale: 1.02 }} and whileTap={{ scale: 0.98 }}. It has three visual states driven by a status state variable ("idle" | "sending" | "sent"):

State	Style	Content
`idle`	`bg-gradient-to-r from-aurora-teal to-cosmic-violet text-white hover:shadow-[0_0_20px_rgba(20,184,166,0.4)]`	”Transmit Signal” + `Send` icon
`sending`	same gradient, `disabled`	”Encrypting & Sending…” with `animate-pulse`
`sent`	`bg-aurora-green text-space-900`	”Transmission Successful”

The template simulates form submission with setTimeout(() => setStatus("sent"), 2000). This is a placeholder — replace it with a real form handler before deploying. See the Wiring up submission section below.

The sidebar is a glass-panel rounded-3xl p-8 border-cosmic-violet/30 h-full flex flex-col. It contains:

“Known Frequencies” header — text-xl font-display font-bold text-white
Three social link cards — each is an <a> with flex items-center space-x-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 and a hover border color specific to the platform
Email row — below a border-t border-white/10 mt-8 pt-8 divider; uses Mail icon and font-mono text-sm text-slate-400

Platform	Hover border	Icon hover color
GitHub	`hover:border-aurora-turquoise/50`	`group-hover:text-aurora-turquoise`
LinkedIn	`hover:border-cosmic-violet/50`	`group-hover:text-cosmic-violet`
Twitter / X	`hover:border-cosmic-magenta/50`	`group-hover:text-cosmic-magenta`

Color tokens used

Element	Token / class
Page heading gradient	`from-aurora-turquoise to-cosmic-violet`
Form panel border	`border-aurora-teal/30`
Terminal label	`text-aurora-turquoise font-mono`
Window dot (green)	`bg-aurora-green animate-pulse`
Input default border	`border-white/10`
Input focus border	`focus:border-aurora-turquoise`
Input focus ring	`focus:ring-aurora-turquoise`
Submit idle gradient	`from-aurora-teal to-cosmic-violet`
Submit sent background	`bg-aurora-green text-space-900`
Sidebar border	`border-cosmic-violet/30`
Email icon	`text-aurora-teal`

Wiring up form submission

The template’s onSubmit handler is a stub that simulates a 2-second delay. Replace it with a real integration:

// 1. Sign up at formspree.io and get your endpoint
// 2. Replace the onSubmit handler:

const handleSubmit = async (e) => {
  e.preventDefault();
  setStatus("sending");

  const data = new FormData(e.target);
  const res = await fetch("https://formspree.io/f/YOUR_FORM_ID", {
    method: "POST",
    body: data,
    headers: { Accept: "application/json" },
  });

  if (res.ok) {
    setStatus("sent");
  } else {
    setStatus("idle"); // handle error state as needed
  }
};

Customization guide

Update your social links

Find the three <a> elements in the sidebar. Replace href="#" with your real profile URLs and update the <div> text for your handle:

<a
  href="https://github.com/yourusername"
  className="flex items-center space-x-4 p-4 rounded-xl
             bg-white/5 hover:bg-white/10 border border-white/5
             hover:border-aurora-turquoise/50 transition-all group"
>
  <Github className="text-slate-400 group-hover:text-aurora-turquoise
                     transition-colors" size={24} />
  <div>
    <div className="text-white font-medium">GitHub</div>
    <div className="text-xs text-slate-500 font-mono">
      github.com/yourusername {/* ← change this */}
    </div>
  </div>
</a>

Update your email address

The email row is at the bottom of the sidebar, below the border-t. Change the font-mono text-sm text-slate-400 span text:

<div className="flex items-center space-x-3 text-slate-400">
  <Mail size={20} className="text-aurora-teal" />
  <span className="font-mono text-sm">
    you@yourdomain.com {/* ← change this */}
  </span>
</div>

Relabel the form fields

The input labels use text-xs font-mono text-slate-400 uppercase tracking-wider. Change the <label> text to plain English if you prefer a less technical tone:

<label className="text-xs font-mono text-slate-400 uppercase tracking-wider">
  Your Name {/* ← was "Sender ID (Name)" */}
</label>

Add a success message

After status reaches "sent", consider adding a full-form success state that replaces the form content with a thank-you message:

{status === "sent" ? (
  <div className="flex flex-col items-center justify-center py-16 space-y-4">
    <CircleCheck size={48} className="text-aurora-green" />
    <p className="text-xl font-display text-white">Message received!</p>
    <p className="text-slate-400 font-mono text-sm">
      I'll be in touch within 24 hours.
    </p>
  </div>
) : (
  <form onSubmit={handleSubmit} className="space-y-6">
    {/* ... form fields ... */}
  </form>
)}

Never expose API keys or email service credentials in client-side code. Services like Formspree and Netlify Forms handle submission server-side — you only need a public form ID in the request URL. If using EmailJS, use only your public key (not the private one) in the browser bundle.

Layout

Pages

Contact Page: Glass-Panel Comms Form and Social Links

Layout overview

Form panel

Input field styling

Textarea

Submit button states

Color tokens used

Wiring up form submission

Customization guide

Build docs developers (and LLMs) love

Layout

Pages

Documentation Index

​Layout overview

​Form panel

​Input field styling

​Textarea

​Submit button states

​Social links sidebar

​Social link hover colors

​Color tokens used

​Wiring up form submission

​Customization guide

Build docs developers (and LLMs) love

Layout overview

Form panel

Input field styling

Textarea

Submit button states

Social links sidebar

Social link hover colors

Color tokens used

Wiring up form submission

Customization guide