import { useState } from "react"; import { CheckCircle2, Phone, ShieldCheck, ClipboardCheck, Truck, HardHat, FileText, BadgeCheck, ChevronRight, Lock, Star, MessageCircle, PlayCircle, Building2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; // Brand palette const brand = { red: "#FF0000", gray: "#e0e0e0", dark: "#111111", }; export default function SafetyComplianceTrackerMock() { const [form, setForm] = useState({ name: "", company: "", email: "", phone: "", message: "" }); const onChange = (e) => setForm({ ...form, [e.target.name]: e.target.value }); return (

{/* Announcement bar */}

New: OSHA/DOT deadline assistants now in beta — never miss a compliance date again.

{/* Header */}

Safety Compliance Tracker

DOT • OSHA • Fleet • Training

{/* Hero */}

Compliance, organized.

Ditch spreadsheets. Never miss a compliance deadline again.

One secure platform to manage DOT & OSHA requirements, fleet maintenance, training records, and audits — with reminders, dashboards, and built‑in checklists.

SOC‑ready security

U.S.‑based support

{/* Product mock screenshot */}

dashboard.sctportal.com

{["Open DOT Tasks","Expiring Med Cards","Vehicle Inspections","Incidents YTD"].map((k,i)=> ( {k}

{[7,12,38,2][i]}

Auto‑reminders

))}

Dashboard chart placeholder

{/* Social proof */}

Trusted by safety‑first teams

{["Acme Logistics","North Star Hauling","Pioneer Energy","Atlas Fleet","Canyon Materials","Summit Services"].map((n,i)=> (

{n}

))}

{/* Feature buckets */}

Everything you need for compliance

Organized into clear modules so your team can move fast and stay audit‑ready.

Compliance & Audits Personnel & Training Fleet & Maintenance

{/* Solutions stripes */}

{[ {title: "For Fleet Operators", points: ["Keep vehicles road‑ready","Track DVIRs & PM","Instant audit exports"], icon: }, {title: "For Safety Managers", points: ["All compliance in one place","Proactive reminders","Role‑based access"], icon: }, {title: "For Executives", points: ["Single‑pane dashboards","Trend reports","Lower risk & cost"], icon: }, ].map((s, i)=> ( {s.icon}{s.title}

))}

{/* Testimonial */}

“SCT centralized our DOT, OSHA, and fleet maintenance — we cut audit prep from weeks to hours and haven’t missed a renewal since.”

— Taylor R., Safety Director at Pioneer Energy

{/* Lead capture */}

See SCT in action

Request a personalized walkthrough. We’ll tailor the demo to your compliance needs and data.

30‑minute live demo
Sample dashboards & exports
No obligation — no credit card

<div className="flex items-center justify-between">
              <div className="text-xs text-neutral-600 flex items-center gap-2"><Lock className="size-4"/> We’ll never share your info.</div>
              <Button className="text-white" style={{backgroundColor: brand.red}}>Request demo</Button>
            </div>
          </form>
        </div>
      </section>

{/* Pricing */}
      <section id="pricing" className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-3xl font-extrabold tracking-tight">Simple pricing</h3>
          <p className="mt-2 text-neutral-700 max-w-2xl">Transparent tiers with everything you need. Custom plans available for large fleets and multi‑site organizations.</p>
          <div className="mt-8 grid md:grid-cols-3 gap-6">
            {[
              {name: "Starter", price: "$99", per: "/mo", features: ["Up to 25 employees","Basic dashboards","Email reminders"]},
              {name: "Professional", price: "$299", per: "/mo", features: ["Up to 100 employees","All modules","API access","Priority support"], highlight: true},
              {name: "Enterprise", price: "Let's talk", per: "", features: ["Unlimited employees","SSO & advanced security","Custom integrations","Dedicated CSM"]},
            ].map((tier, i)=> (
              <Card key={i} className={tier.highlight?"border-2" :""} style={tier.highlight?{borderColor: brand.red}:undefined}>
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    <span>{tier.name}</span>
                    {tier.highlight && <span className="text-xs font-semibold px-2 py-1 rounded-full" style={{background: brand.gray}}>Most popular</span>}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-end gap-1">
                    <div className="text-4xl font-extrabold">{tier.price}</div>
                    <div className="text-neutral-500 mb-1">{tier.per}</div>
                  </div>
                  <ul className="mt-4 grid gap-2 text-sm text-neutral-700">
                    {tier.features.map((f,j)=> (
                      <li key={j} className="flex items-center gap-2"><CheckCircle2 className="size-4 text-green-600"/>{f}</li>
                    ))}
                  </ul>
                  <Button className="mt-6 w-full text-white" style={{backgroundColor: brand.red}}>Choose {tier.name}</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Resources */}
      <section id="resources" className="py-16 bg-neutral-50 border-y">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-2xl font-extrabold tracking-tight">Free resources</h3>
          <div className="mt-6 grid md:grid-cols-3 gap-6">
            {[
              {title: "DOT Compliance Checklist (PDF)", desc: "A practical, printable checklist to stay audit‑ready."},
              {title: "OSHA Incident Reporting Guide", desc: "Know what to file and when."},
              {title: "Fleet PM Template (Excel)", desc: "Keep every vehicle on schedule."},
            ].map((r, i)=> (
              <Card key={i}>
                <CardHeader>
                  <CardTitle className="text-base">{r.title}</CardTitle>
                </CardHeader>
                <CardContent className="text-sm text-neutral-700">
                  <p>{r.desc}</p>
                  <Button variant="outline" className="mt-4">Download</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* FAQ */}
      <section id="faqs" className="py-16">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-2xl font-extrabold tracking-tight">Frequently asked questions</h3>
          <div className="mt-6 grid gap-4">
            <FaqItem q="How long does onboarding take?" a="Most teams are live in 1–2 weeks. We import your existing spreadsheets and set up reminders for you."/>
            <FaqItem q="Can SCT handle multiple locations or divisions?" a="Yes. Use role‑based access, tags, and dashboards to segment by site or division."/>
            <FaqItem q="Do you offer support?" a="Absolutely. Email and phone support are included; enterprise customers get a dedicated CSM."/>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid md:grid-cols-4 gap-8">
          <div>
            <div className="font-extrabold">Safety Compliance Tracker</div>
            <p className="text-sm text-neutral-600 mt-2">End‑to‑end compliance software for DOT, OSHA, fleet, and training.</p>
            <div className="mt-4 text-sm text-neutral-700"> 
              <div className="flex items-center gap-2"><Phone className="size-4"/> 214‑329‑1760</div>
            </div>
          </div>
          <div>
            <div className="font-semibold">Product</div>
            <ul className="mt-3 space-y-2 text-sm text-neutral-700">
              <li><a href="#features">Features</a></li>
              <li><a href="#solutions">Solutions</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div>
            <div className="font-semibold">Company</div>
            <ul className="mt-3 space-y-2 text-sm text-neutral-700">
              <li><a>About</a></li>
              <li><a>Careers</a></li>
              <li><a>Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="font-semibold">Resources</div>
            <ul className="mt-3 space-y-2 text-sm text-neutral-700">
              <li><a href="#resources">Guides</a></li>
              <li><a href="#faqs">FAQ</a></li>
              <li><a>Security</a></li>
            </ul>
          </div>
        </div>
        <div className="border-t" style={{borderColor: brand.gray}}>
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-neutral-600">
            <div>© {new Date().getFullYear()} Safety Compliance Tracker LLC. All rights reserved.</div>
            <div className="flex items-center gap-4">
              <a>Privacy</a>
              <a>Terms</a>
              <a className="flex items-center gap-1"><MessageCircle className="size-4"/> Support</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

function FeatureItem({ text }: { text: string }) {
  return (
    <div className="flex items-start gap-2">
      <CheckCircle2 className="size-4 text-green-600 mt-0.5"/>
      <span>{text}</span>
    </div>
  );
}

function FaqItem({ q, a }: { q: string, a: string }){
  const [open, setOpen] = useState(false);
  return (
    <div className="border rounded-xl overflow-hidden">
      <button onClick={()=>setOpen(!open)} className="w-full text-left px-4 sm:px-6 py-4 flex items-center justify-between">
        <span className="font-semibold">{q}</span>
        <ChevronRight className={`size-5 transition-transform ${open?"rotate-90":""}`}/>
      </button>
      {open && <div className="px-4 sm:px-6 pb-6 text-neutral-700 text-sm">{a}</div>}
    </div>
  );
}
</div>
</div>
</div>
	</div>
		</div>
	</div>
</div>
</div>		</div>

</article>

</div>

</main>

</div>

</div></div></div></footer></div>