kghf

data/contacts.json

@@ -0,0 +1 @@
+[]

package.json

@@ -1,3 +1,15 @@
+{
+  "name": "safesight-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start:server": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5"
+  }
+}
 {
   "name": "tanstack_start_ts",
   "private": true,

server.js

@@ -0,0 +1,49 @@
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const cors = require('cors');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+const dataDir = path.join(__dirname, 'data');
+if (!fs.existsSync(dataDir)) fs.mkdirSync(dataDir, { recursive: true });
+
+const contactsFile = path.join(dataDir, 'contacts.json');
+if (!fs.existsSync(contactsFile)) fs.writeFileSync(contactsFile, '[]');
+
+app.get('/data/contacts', (req, res) => {
+  try {
+    const raw = fs.readFileSync(contactsFile, 'utf8');
+    const json = JSON.parse(raw || '[]');
+    res.json(json);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: 'failed to read contacts' });
+  }
+});
+
+app.post('/data/contacts', (req, res) => {
+  try {
+    const body = req.body || {};
+    const entry = {
+      name: body.name || '',
+      email: body.email || '',
+      subject: body.subject || '',
+      message: body.message || '',
+      createdAt: new Date().toISOString(),
+    };
+    const raw = fs.readFileSync(contactsFile, 'utf8');
+    const arr = JSON.parse(raw || '[]');
+    arr.unshift(entry);
+    fs.writeFileSync(contactsFile, JSON.stringify(arr, null, 2));
+    res.status(201).json(entry);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: 'failed to save contact' });
+  }
+});
+
+const port = process.env.PORT || 5173;
+app.listen(port, () => console.log(`Data server listening on http://localhost:${port}`));

src/routes/admin/contacts.tsx

@@ -0,0 +1,83 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+export const Route = createFileRoute("/admin")({
+  head: () => ({
+    meta: [
+      { title: "Admin — Contact Submissions" },
+      { name: "robots", content: "noindex" },
+    ],
+  }),
+  component: AdminContactsPage,
+});
+
+function AdminContactsPage() {
+  const [items, setItems] = useState<Array<any>>([]);
+
+  async function load() {
+    try {
+      const res = await fetch('/data/contacts');
+      if (!res.ok) throw new Error('failed to fetch');
+      const json = await res.json();
+      setItems(json || []);
+    } catch (err) {
+      console.error(err);
+      // fallback to localStorage
+      try {
+        const key = 'safesight:contact_submissions';
+        const existing = JSON.parse(localStorage.getItem(key) || '[]');
+        setItems(existing);
+      } catch (e) {
+        setItems([]);
+      }
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <section className="bg-navy py-8">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+          <h1 className="text-2xl font-bold text-navy-foreground">Admin: Contact Submissions</h1>
+          <p className="mt-2 text-sm text-navy-foreground/80">No password required. Anyone with this page URL may view submissions.</p>
+        </div>
+      </section>
+
+      <section className="bg-background py-10">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-lg font-semibold text-foreground">Submissions ({items.length})</h2>
+            <button onClick={load} className="text-sm text-accent hover:underline">Refresh</button>
+          </div>
+
+          <div className="space-y-4">
+            {items.length === 0 ? (
+              <Card className="border-0 bg-card shadow-sm">
+                <CardContent className="p-6">No submissions yet.</CardContent>
+              </Card>
+            ) : (
+              items.map((it, i) => (
+                <Card key={i} className="border-0 bg-card shadow-sm">
+                  <CardContent className="p-6">
+                    <div className="flex justify-between">
+                      <div>
+                        <p className="font-medium text-foreground">{it.subject}</p>
+                        <p className="mt-1 text-sm text-muted-foreground">From: {it.name} — {it.email}</p>
+                      </div>
+                      <div className="text-sm text-muted-foreground">{it.createdAt ? new Date(it.createdAt).toLocaleString() : "—"}</div>
+                    </div>
+                    <div className="mt-4 text-sm text-foreground whitespace-pre-wrap">{it.message}</div>
+                  </CardContent>
+                </Card>
+              ))
+            )}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/routes/contact.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -54,6 +55,48 @@ const faqs = [
 ];
 
 function ContactPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [errors, setErrors] = useState<{ [k: string]: string }>({});
+  const [success, setSuccess] = useState<string | null>(null);
+
+  function validate() {
+    const e: { [k: string]: string } = {};
+    if (!name.trim()) e.name = "Name is required.";
+    if (!email.trim()) e.email = "Email is required.";
+    else if (!/^\S+@\S+\.\S+$/.test(email)) e.email = "Enter a valid email.";
+    if (!subject.trim()) e.subject = "Subject is required.";
+    if (!message.trim()) e.message = "Message is required.";
+    return e;
+  }
+
+  async function saveSubmission() {
+    const payload = { name, email, subject, message };
+    try {
+      const res = await fetch('/data/contacts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) throw new Error('server error');
+      return true;
+    } catch (err) {
+      // fallback to localStorage if server unavailable
+      try {
+        const key = 'safesight:contact_submissions';
+        const existing = JSON.parse(localStorage.getItem(key) || '[]');
+        existing.unshift({ ...payload, createdAt: new Date().toISOString() });
+        localStorage.setItem(key, JSON.stringify(existing));
+        return false;
+      } catch (e) {
+        console.error('Failed to save submission', e);
+        return false;
+      }
+    }
+  }
+
   return (
     <div className="flex min-h-screen flex-col">
       {/* Hero */}
@@ -108,11 +151,29 @@ function ContactPage() {
               <Card className="border-0 bg-card shadow-sm">
                 <CardContent className="p-6 sm:p-8">
                   <h2 className="text-xl font-semibold text-foreground">Send us a message</h2>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    Warning: Submissions are visible to anyone with the admin link. Do not include passwords, SSNs, or other sensitive personal data.
+                  </p>
+                  {/* Admin page is intentionally unlinked; access at /admin only. */}
+
                   <form
                     className="mt-6 space-y-4"
                     onSubmit={(e) => {
                       e.preventDefault();
-                      alert("Thanks for reaching out! We'll get back to you soon.");
+                      setSuccess(null);
+                      const v = validate();
+                      setErrors(v);
+                      if (Object.keys(v).length === 0) {
+                        const ok = await saveSubmission();
+                        setSuccess("Thanks for reaching out! We'll get back to you soon.");
+                        setName("");
+                        setEmail("");
+                        setSubject("");
+                        setMessage("");
+                        if (!ok) {
+                          // optional: inform user that submission is stored locally
+                        }
+                      }
                     }}
                   >
                     <div className="grid gap-4 sm:grid-cols-2">
@@ -120,20 +181,23 @@ function ContactPage() {
                         <label htmlFor="name" className="block text-sm font-medium text-foreground">
                           Name
                         </label>
-                        <Input id="name" placeholder="Your name" className="mt-1" />
+                        <Input id="name" placeholder="Your name" className="mt-1" value={name} onChange={(e) => setName(e.currentTarget.value)} required />
+                        {errors.name ? <p className="mt-1 text-xs text-destructive">{errors.name}</p> : null}
                       </div>
                       <div>
                         <label htmlFor="email" className="block text-sm font-medium text-foreground">
                           Email
                         </label>
-                        <Input id="email" type="email" placeholder="you@example.com" className="mt-1" />
+                        <Input id="email" type="email" placeholder="you@example.com" className="mt-1" value={email} onChange={(e) => setEmail(e.currentTarget.value)} required />
+                        {errors.email ? <p className="mt-1 text-xs text-destructive">{errors.email}</p> : null}
                       </div>
                     </div>
                     <div>
                       <label htmlFor="subject" className="block text-sm font-medium text-foreground">
                         Subject
                       </label>
-                      <Input id="subject" placeholder="What's this about?" className="mt-1" />
+                      <Input id="subject" placeholder="What's this about?" className="mt-1" value={subject} onChange={(e) => setSubject(e.currentTarget.value)} required />
+                      {errors.subject ? <p className="mt-1 text-xs text-destructive">{errors.subject}</p> : null}
                     </div>
                     <div>
                       <label htmlFor="message" className="block text-sm font-medium text-foreground">
@@ -143,11 +207,18 @@ function ContactPage() {
                         id="message"
                         placeholder="Tell us how we can help..."
                         className="mt-1 min-h-[120px]"
+                        value={message}
+                        onChange={(e) => setMessage(e.currentTarget.value)}
+                        required
                       />
+                      {errors.message ? <p className="mt-1 text-xs text-destructive">{errors.message}</p> : null}
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <Button type="submit" className="bg-primary text-primary-foreground hover:bg-primary/90">
+                        Send Message
+                      </Button>
+                      {success ? <p className="text-sm text-success">{success}</p> : null}
                     </div>
-                    <Button type="submit" className="bg-primary text-primary-foreground hover:bg-primary/90">
-                      Send Message
-                    </Button>
                   </form>
                 </CardContent>
               </Card>

src/routes/why-safesight.tsx

@@ -30,13 +30,13 @@ export const Route = createFileRoute("/why-safesight")({
 });
 
 const comparisonFeatures = [
-  { feature: "Real-time gaze tracking", safesight: true, other: false },
-  { feature: "On-device processing (no cloud)", safesight: true, other: false },
-  { feature: "Instant audio + visual alerts", safesight: true, other: false },
-  { feature: "Focus score after every trip", safesight: true, other: false },
-  { feature: "Drowsiness detection", safesight: true, other: false },
-  { feature: "Privacy-first design", safesight: true, other: false },
-  { feature: "Affordable subscription", safesight: true, other: false },
+  { feature: "Real-time gaze tracking", safesight: true, other: "no" },
+  { feature: "On-device processing (no cloud)", safesight: true, other: "some" },
+  { feature: "Instant audio + visual alerts", safesight: true, other: "some" },
+  { feature: "Focus score after every trip", safesight: true, other: "no" },
+  { feature: "Drowsiness detection", safesight: true, other: "some" },
+  { feature: "Privacy-first design", safesight: true, other: "some" },
+  { feature: "Affordable subscription option", safesight: true, other: "some" },
 ];
 
 const benefits = [
@@ -148,10 +148,13 @@ function WhySafeSightPage() {
                       )}
                     </td>
                     <td className="px-6 py-4 text-center">
-                      {row.other ? (
-                        <CheckCircle2 className="mx-auto h-5 w-5 text-muted-foreground" />
-                      ) : (
-                        <XCircle className="mx-auto h-5 w-5 text-muted-foreground" />
+                      {row.other === "yes" && <CheckCircle2 className="mx-auto h-5 w-5 text-muted-foreground" />}
+                      {row.other === "no" && <XCircle className="mx-auto h-5 w-5 text-muted-foreground" />}
+                      {row.other === "some" && (
+                        <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+                          <AlertTriangle className="h-4 w-4" />
+                          <span>Varies</span>
+                        </div>
                       )}
                     </td>
                   </tr>