hi

Author: TripleU613

src/pages/About.jsx

@@ -102,8 +102,8 @@ export default function About() {
   );
 
   return (
-    <Reveal as="div" className="space-y-20" amount={0.1}>
-      <section className="relative isolate overflow-hidden px-6 pb-20 pt-16 text-center">
+    <Reveal as="div" className="space-y-16 sm:space-y-20" amount={0.1}>
+      <section className="relative isolate overflow-hidden px-4 pb-14 pt-16 text-center sm:px-6 sm:pb-20">
         <div className="pointer-events-none absolute inset-0 -z-10 opacity-60">
           <img src="/img/phonegrid.png" alt="" className="h-full w-full object-cover opacity-15" />
           <div className="absolute inset-0 bg-gradient-to-b from-slate-950/10 to-slate-950" />
@@ -112,7 +112,7 @@ export default function About() {
           <p className="section-label text-xs uppercase text-sky-200">About JTech</p>
           <h1 className="text-4xl font-semibold text-white sm:text-6xl">Built by and for the Jewish tech community</h1>
           <p className="text-lg text-slate-300">
-            The original About page celebrated this idea. We rebuilt it here with the same stories and sections—just with better typography and glassmorphism.
+            We keep the stories and statistics grounded in what actually ships: vetted guidance, verified rollouts, and real families protected every week.
           </p>
         </div>
         <div className="mt-12 flex flex-wrap justify-center gap-6 text-center text-slate-300">
@@ -129,19 +129,19 @@ export default function About() {
         </p>
       </section>
 
-      <section className="mx-auto max-w-6xl px-6">
+      <section className="mx-auto max-w-6xl px-4 sm:px-6">
         <SectionHeading label="Mission" title="Everything kosher mobile in one trusted playbook" align="center" />
-        <div className="mt-8 space-y-5 rounded-3xl border border-white/10 bg-slate-900/70 p-8">
+        <div className="mt-8 space-y-5 rounded-3xl border border-white/10 bg-slate-900/70 p-6 sm:p-8">
           {missionParagraphs.map((paragraph) => (
             <p key={paragraph} className="text-base text-slate-200">
               {paragraph}
             </p>
           ))}
         </div>
       </section>
-      <section className="mx-auto max-w-6xl px-6">
+      <section className="mx-auto max-w-6xl px-4 sm:px-6">
         <SectionHeading label="Past 30 days" title="Forum activity snapshot" align="center" />
-        <div className="mt-8 grid gap-6 md:grid-cols-3">
+        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           <GlassCard className="text-center">
             <p className="text-xs uppercase tracking-[0.35em] text-slate-400">New verified members</p>
             <p className="mt-4 text-3xl font-semibold text-white">{formatNumber(forumStats.newMembers30)}</p>
@@ -160,16 +160,16 @@ export default function About() {
         </div>
       </section>
 
-      <section className="mx-auto max-w-6xl px-6">
+      <section className="mx-auto max-w-6xl px-4 sm:px-6">
         <SectionHeading
           label="What we offer"
           title="Everything you need to launch and support kosher devices"
           align="center"
         />
-        <div className="mt-10 grid gap-6 md:grid-cols-3">
+        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {offerings.map((item) => (
             <GlassCard key={item.title}>
-              <div className="flex items-center gap-3">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                 <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-sky-300">
                   <i className={`fa-solid ${item.icon} text-xl`}></i>
                 </span>
@@ -185,19 +185,19 @@ export default function About() {
         </div>
       </section>
 
-      <section className="mx-auto max-w-6xl px-6">
+      <section className="mx-auto max-w-6xl px-4 sm:px-6">
         <SectionHeading label="Principles" title="How we keep the signal trustworthy" />
-        <div className="mt-8 grid gap-6 md:grid-cols-3">
+        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {values.map((value) => (
             <GlassCard key={value.title} title={value.title} description={value.body} />
           ))}
         </div>
       </section>
 
-      <section className="mx-auto max-w-6xl px-6">
-        <div className="rounded-4xl border border-white/10 bg-slate-900/70 p-8">
+      <section className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="rounded-4xl border border-white/10 bg-slate-900/70 p-6 sm:p-8">
           <SectionHeading label="Team" title="Who keeps JTech running" />
-          <div className="mt-6 grid gap-4 md:grid-cols-2">
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
             <div>
               <h3 className="text-lg font-semibold text-white">Moderators & mechanchim</h3>
               <p className="mt-2 text-sm text-slate-300">
@@ -214,14 +214,14 @@ export default function About() {
         </div>
       </section>
 
-      <section className="mx-auto max-w-6xl px-6 pb-20">
-        <div className="glass-panel flex flex-col items-center gap-6 rounded-4xl border border-white/10 bg-gradient-to-r from-sky-500/20 to-indigo-500/20 px-8 py-12 text-center">
+      <section className="mx-auto max-w-6xl px-4 pb-16 sm:px-6 sm:pb-20">
+        <div className="glass-panel flex flex-col items-center gap-6 rounded-4xl border border-white/10 bg-gradient-to-r from-sky-500/20 to-indigo-500/20 px-6 py-10 text-center sm:px-8 sm:py-12">
           <p className="section-label text-xs uppercase text-sky-200">Get involved</p>
           <h2 className="text-3xl font-semibold text-white">Publish, mentor, or just ask a question</h2>
           <p className="text-base text-slate-200">
-            The About page always closed with an invitation to the forum. That still stands—bring your insight and help the next family ship a safe phone.
+            The About page always closed with an invitation to the forum. That still stands-bring your insight and help the next family ship a safe phone.
           </p>
-          <div className="flex flex-wrap justify-center gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:justify-center">
             <a
               href="https://forums.jtechforums.org"
               target="_blank"

src/pages/Apps.jsx

@@ -40,6 +40,7 @@ export default function Apps() {
   const [showSubmissionForm, setShowSubmissionForm] = useState(false);
   const [catalogReady, setCatalogReady] = useState(false);
   const [catalogLoading, setCatalogLoading] = useState(true);
+  const [supportsTouch, setSupportsTouch] = useState(false);
 
   const isAdmin = Boolean(profile?.isAdmin || user?.email === ADMIN_EMAIL);
 
@@ -69,6 +70,18 @@ export default function Apps() {
     };
   }, [user?.email, isAdmin]);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const detectTouch = () => {
+      const coarse = window.matchMedia?.('(pointer: coarse)')?.matches;
+      setSupportsTouch(Boolean(coarse || 'ontouchstart' in window));
+    };
+
+    detectTouch();
+    window.addEventListener('resize', detectTouch);
+    return () => window.removeEventListener('resize', detectTouch);
+  }, []);
+
   const approvedAppCards = useMemo(
     () =>
       approvedApps.map((app) => ({
@@ -207,7 +220,7 @@ export default function Apps() {
 
   const renderSubmissionSection = () => {
     if (loading) {
-      return <p className="text-sm text-slate-300">Checking your account…</p>;
+      return <p className="text-sm text-slate-300">Checking your account...</p>;
     }
     if (!user) {
       return (
@@ -260,15 +273,15 @@ export default function Apps() {
           </div>
           <button
             type="button"
-            className="rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white"
+            className="w-full rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white sm:w-auto"
             onClick={() => setShowSubmissionForm((prev) => !prev)}
           >
             {showSubmissionForm ? 'Hide form' : 'Open submission'}
           </button>
         </div>
 
         <div className="rounded-3xl border border-white/10 bg-black/20 p-5">
-          <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <p className="text-sm font-semibold text-white">Need to upload an APK?</p>
               <p className="text-xs text-slate-400">
@@ -278,7 +291,7 @@ export default function Apps() {
             <button
               type="button"
               onClick={() => setShowSubmissionForm((prev) => !prev)}
-              className="inline-flex items-center gap-2 rounded-full border border-white/20 px-4 py-2 text-xs font-semibold text-white"
+              className="inline-flex items-center justify-center gap-2 rounded-full border border-white/20 px-4 py-2 text-xs font-semibold text-white"
             >
               <span>{showSubmissionForm ? 'Collapse' : 'Expand form'}</span>
               <i className={`fa-solid ${showSubmissionForm ? 'fa-chevron-up' : 'fa-chevron-down'} text-xs`} />
@@ -294,18 +307,37 @@ export default function Apps() {
                 exit={{ opacity: 0, height: 0 }}
                 transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
               >
-              <div className="grid gap-4 md:grid-cols-2">
-                <InputField label="App name" name="name" value={formValues.name} onChange={handleFormChange} required />
+              <div className="grid gap-4 sm:grid-cols-2">
+                <InputField
+                  label="App name"
+                  name="name"
+                  value={formValues.name}
+                  onChange={handleFormChange}
+                  required
+                  autoComplete="off"
+                  autoCapitalize="words"
+                  enterKeyHint="next"
+                />
                 <InputField
                   label="JTech username"
                   name="username"
                   value={formValues.username}
                   onChange={handleFormChange}
                   placeholder="@you"
                   required
+                  autoComplete="username"
+                  enterKeyHint="next"
                 />
               </div>
-              <InputField label="Header info" name="header" value={formValues.header} onChange={handleFormChange} required />
+              <InputField
+                label="Header info"
+                name="header"
+                value={formValues.header}
+                onChange={handleFormChange}
+                required
+                autoComplete="off"
+                enterKeyHint="next"
+              />
               <div>
                 <label className="text-sm font-semibold text-white" htmlFor="description">
                   More info

src/pages/Contact.jsx

@@ -7,6 +7,7 @@ const RECAPTCHA_SITE_KEY = import.meta.env.VITE_RECAPTCHA_SITE_KEY || '';
 export default function Contact() {
   const [status, setStatus] = useState('idle');
   const [message, setMessage] = useState('');
+  const [supportsTouch, setSupportsTouch] = useState(false);
 
   useEffect(() => {
     if (!RECAPTCHA_SITE_KEY) return;
@@ -19,6 +20,20 @@ export default function Contact() {
     document.body.appendChild(script);
   }, []);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const detectTouch = () => {
+      const coarseQuery = window.matchMedia?.('(pointer: coarse)');
+      const pointerCoarse = coarseQuery ? coarseQuery.matches : false;
+      const hasTouchEvents = 'ontouchstart' in window;
+      setSupportsTouch(pointerCoarse || hasTouchEvents);
+    };
+
+    detectTouch();
+    window.addEventListener('resize', detectTouch);
+    return () => window.removeEventListener('resize', detectTouch);
+  }, []);
+
   const waitForRecaptcha = () =>
     new Promise((resolve, reject) => {
       if (!RECAPTCHA_SITE_KEY) {
@@ -95,15 +110,22 @@ export default function Contact() {
     }
   }
 
+  const submitLabel = status === 'loading' ? 'Sending…' : supportsTouch ? 'Tap to send' : 'Send message';
+
   return (
-    <Reveal as="div" className="mx-auto max-w-4xl px-6 py-16" amount={0.15}>
+    <Reveal as="div" className="mx-auto max-w-4xl px-4 py-12 sm:px-6 sm:py-16" amount={0.15}>
       <div className="text-center">
         <p className="section-label text-xs uppercase text-sky-200">Contact</p>
         <h1 className="mt-4 text-5xl font-semibold text-white">Talk to JTech</h1>
         <p className="mt-3 text-base text-slate-300">Ask for guidance, request a walkthrough, or introduce a new deployment.</p>
       </div>
 
-      <form onSubmit={handleSubmit} className="mt-12 glass-panel rounded-3xl border border-white/10 p-8">
+      <form
+        onSubmit={handleSubmit}
+        className="mt-12 glass-panel rounded-3xl border border-white/10 p-6 sm:p-8"
+        autoComplete="on"
+        noValidate={false}
+      >
         <input type="text" name="_honey" tabIndex="-1" autoComplete="off" className="hidden" />
         <div className="grid gap-6 md:grid-cols-2">
           <fieldset>
@@ -114,7 +136,11 @@ export default function Contact() {
               id="name"
               name="name"
               required
-              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white focus:border-sky-400 focus:outline-none"
+              autoComplete="name"
+              autoCapitalize="words"
+              inputMode="text"
+              enterKeyHint="next"
+              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white focus:border-sky-400 focus:outline-none"
               placeholder="Your name"
             />
           </fieldset>
@@ -127,7 +153,10 @@ export default function Contact() {
               name="phone"
               type="tel"
               required
-              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white focus:border-sky-400 focus:outline-none"
+              autoComplete="tel"
+              inputMode="tel"
+              enterKeyHint="next"
+              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white focus:border-sky-400 focus:outline-none"
               placeholder="(123) 456-7890"
             />
           </fieldset>
@@ -140,7 +169,10 @@ export default function Contact() {
               name="email"
               type="email"
               required
-              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white focus:border-sky-400 focus:outline-none"
+              autoComplete="email"
+              inputMode="email"
+              enterKeyHint="next"
+              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white focus:border-sky-400 focus:outline-none"
               placeholder="you@email.com"
             />
           </fieldset>
@@ -153,7 +185,9 @@ export default function Contact() {
               name="message"
               rows="5"
               required
-              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white focus:border-sky-400 focus:outline-none"
+              inputMode="text"
+              enterKeyHint="send"
+              className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white focus:border-sky-400 focus:outline-none"
               placeholder="Share context, goals, timelines..."
             ></textarea>
           </fieldset>
@@ -164,11 +198,11 @@ export default function Contact() {
           disabled={status === 'loading'}
           className="w-full rounded-full bg-sky-500 px-6 py-3 text-base font-semibold text-slate-950 transition hover:bg-sky-400 disabled:cursor-wait"
         >
-          {status === 'loading' ? 'Sending...' : 'Send message'}
+          {submitLabel}
         </button>
 
         {message && (
-          <div className="mt-6 flex items-center justify-center">
+          <div className="mt-6 flex items-center justify-center" aria-live="polite">
             <div
               className={`flex items-center gap-3 rounded-2xl px-5 py-3 text-sm font-semibold ${
                 status === 'error'

src/pages/EGate.jsx

@@ -34,24 +34,6 @@ const featureList = [
   },
 ];
 
-const faqs = [
-  {
-    question: 'What is JTech Forums?',
-    answer:
-      "It's a community built to serve the Jewish Orthodox tech space—guides, kosher phone help, coding help, and product support live together so no one is left guessing.",
-  },
-  {
-    question: 'What kind of help can I find?',
-    answer:
-      'Members post walkthroughs, app bundles, troubleshooting tips, and curated guides. Ask a question, share a win, or get expert help when you’re stuck.',
-  },
-  {
-    question: 'How do I reach moderators or admins?',
-    answer:
-      'Sign into the forum, open the Users tab, and DM any moderator/administrator. They can escalate eGate issues, approve guides, or loop in support.',
-  },
-];
-
 const slowVideoPlayback = (event) => {
   if (event?.currentTarget) {
     event.currentTarget.playbackRate = 0.8;
@@ -86,7 +68,6 @@ export default function EGate() {
       </section>
 
       <Highlights />
-      <FaqSection />
       <Cta />
     </Reveal>
   );
@@ -351,29 +332,6 @@ function ProgressiveGraphic() {
   );
 }
 
-function FaqSection() {
-  return (
-    <Reveal as="section" className="bg-slate-950/80 py-20" amount={0.15}>
-      <div className="mx-auto max-w-5xl px-6">
-        <h2 className="text-center text-4xl font-semibold text-white sm:text-5xl">Frequently asked questions</h2>
-        <div className="mt-12 space-y-4">
-          {faqs.map((faq) => (
-            <details key={faq.question} className="group rounded-3xl border border-white/10 bg-slate-900/60 p-6 text-white">
-              <summary className="flex cursor-pointer items-center justify-between text-lg font-semibold">
-                {faq.question}
-                <span className="text-sky-300 transition group-open:rotate-45">
-                  <i className="fa-solid fa-plus"></i>
-                </span>
-              </summary>
-              <p className="mt-3 text-sm text-slate-300">{faq.answer}</p>
-            </details>
-          ))}
-        </div>
-      </div>
-    </Reveal>
-  );
-}
-
 function Cta() {
   return (
     <Reveal as="section" className="bg-black py-24" amount={0.15}>