added header footer font changed about section contact section founder section and stuffs

frontend-react/src/components/FontLoader.jsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+
+const FONTS = [
+  "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap",
+]
+
+export default function FontLoader() {
+  useEffect(() => {
+    FONTS.forEach((href) => {
+      if (document.querySelector(`link[href="${href}"]`)) return
+      const link = document.createElement("link")
+      link.rel = "stylesheet"
+      link.href = href
+      document.head.appendChild(link)
+    })
+  }, [])
+
+  return null
+}

frontend-react/src/components/Footer.jsx

@@ -0,0 +1,37 @@
+import { ExternalLink } from "lucide-react"
+import GithubIcon from "./GithubIcon"
+import { FOUNDER, LINKS } from "../constants"
+
+export default function Footer() {
+  return (
+    <footer className="site-footer">
+      <div className="site-footer__inner">
+        <div className="site-footer__brand">
+          <span className="site-logo__mark site-logo__mark--sm">CV</span>
+          <div>
+            <p className="site-footer__name">ClearVoice</p>
+            <p className="site-footer__tagline">Evidence-backed health claim verification</p>
+          </div>
+        </div>
+
+        <div className="site-footer__links">
+          <a href={LINKS.github} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
+            <GithubIcon size={15} />
+            Repository
+          </a>
+          <a href={LINKS.profile} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
+            {FOUNDER.name}
+          </a>
+          <a href={LINKS.demo} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
+            Demo
+            <ExternalLink size={13} />
+          </a>
+        </div>
+
+        <p className="site-footer__copy">
+          Built by {FOUNDER.name} · PubMed-powered · {new Date().getFullYear()}
+        </p>
+      </div>
+    </footer>
+  )
+}

frontend-react/src/components/GithubIcon.jsx

@@ -0,0 +1,14 @@
+export default function GithubIcon({ size = 16, className }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  )
+}

frontend-react/src/components/Header.jsx

@@ -0,0 +1,55 @@
+import { ExternalLink, Menu, X } from "lucide-react"
+import GithubIcon from "./GithubIcon"
+import { useState } from "react"
+import { LINKS, NAV_ITEMS } from "../constants"
+
+export default function Header({ onNavigate }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  function handleNav(id) {
+    onNavigate(id)
+    setMenuOpen(false)
+  }
+
+  return (
+    <header className="site-header">
+      <div className="site-header__inner">
+        <button type="button" className="site-logo" onClick={() => handleNav("verify")}>
+          <span className="site-logo__mark">CV</span>
+          <span className="site-logo__text">
+            <strong>ClearVoice</strong>
+            <small>Medical fact-checker</small>
+          </span>
+        </button>
+
+        <nav className={`site-nav ${menuOpen ? "site-nav--open" : ""}`}>
+          {NAV_ITEMS.map(({ id, label }) => (
+            <button key={id} type="button" className="btn btn-ghost btn-sm" onClick={() => handleNav(id)}>
+              {label}
+            </button>
+          ))}
+          <a href={LINKS.github} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
+            <GithubIcon size={15} />
+            GitHub
+          </a>
+          <a href={LINKS.api} target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-sm">
+            API
+            <ExternalLink size={13} />
+          </a>
+          <a href={LINKS.demo} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm">
+            Live demo
+          </a>
+        </nav>
+
+        <button
+          type="button"
+          className="site-menu-toggle"
+          aria-label={menuOpen ? "Close menu" : "Open menu"}
+          onClick={() => setMenuOpen((v) => !v)}
+        >
+          {menuOpen ? <X size={20} /> : <Menu size={20} />}
+        </button>
+      </div>
+    </header>
+  )
+}

frontend-react/src/components/ResultsPanel.jsx

@@ -0,0 +1,183 @@
+import {
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Zap,
+  Layers,
+  FileText,
+  Lightbulb,
+  BookOpen,
+} from "lucide-react"
+import VerdictBadge from "./VerdictBadge"
+
+function StanceDot({ stance }) {
+  const cls =
+    stance === "SUPPORTS"
+      ? "stance-dot--supports"
+      : stance === "CONTRADICTS"
+        ? "stance-dot--contradicts"
+        : "stance-dot--neutral"
+  return <span className={`stance-dot ${cls}`} aria-hidden="true" />
+}
+
+export default function ResultsPanel({ result, expandedPapers, onTogglePaper }) {
+  if (!result) return null
+
+  return (
+    <div className="results">
+      <div className="results-card">
+        <div className="results-card__header">
+          <VerdictBadge verdict={result.verdict} />
+          <div className="results-stats">
+            <div className="results-stat">
+              <span className="results-stat__value">{Math.round(result.confidence * 100)}%</span>
+              <span className="results-stat__label">Confidence</span>
+            </div>
+            <div className="results-stat">
+              <span className="results-stat__value">{result.evidence_strength || "—"}</span>
+              <span className="results-stat__label">Evidence</span>
+            </div>
+          </div>
+        </div>
+
+        {result.cached && (
+          <p className="results-cache">
+            <Zap size={13} />
+            Served from cache
+          </p>
+        )}
+
+        {result.decomposition?.is_complex && (
+          <div className="results-block results-block--accent">
+            <div className="results-block__heading">
+              <Layers size={15} />
+              Complex claim — {result.decomposition.sub_claims.length} sub-claims analyzed
+            </div>
+            <ul className="results-list">
+              {result.decomposition.sub_claims.map((sc, i) => (
+                <li key={i}>{sc}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {result.plain_english && (
+          <div className="results-block">
+            <div className="results-block__heading">
+              <FileText size={15} />
+              In plain English
+            </div>
+            <p className="results-block__text">{result.plain_english}</p>
+          </div>
+        )}
+
+        {result.takeaway && (
+          <div className="results-takeaway">
+            <Lightbulb size={15} />
+            <p><strong>Takeaway.</strong> {result.takeaway}</p>
+          </div>
+        )}
+      </div>
+
+      <details className="results-card results-details">
+        <summary className="results-details__summary">
+          <BookOpen size={15} />
+          Technical explanation
+        </summary>
+        <p className="results-block__text">{result.explanation}</p>
+
+        {result.citations?.length > 0 && (
+          <div className="citations">
+            <p className="citations__title">Citations</p>
+            {result.citations.map((c, i) => (
+              <div key={i} className="citation-row">
+                {c.pmid && /^\d+$/.test(c.pmid) ? (
+                  <a
+                    href={`https://pubmed.ncbi.nlm.nih.gov/${c.pmid}/`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="citation-link"
+                  >
+                    {c.title}
+                    <ExternalLink size={12} />
+                  </a>
+                ) : (
+                  <span className="citation-text">{c.title}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </details>
+
+      {result.judge && result.judge.overall_quality !== "UNKNOWN" && (
+        <div className="results-card">
+          <div className="results-card__row">
+            <div className="results-block__heading">Evidence quality</div>
+            <span className={`quality-badge quality-badge--${result.judge.overall_quality.toLowerCase()}`}>
+              {result.judge.overall_quality}
+            </span>
+          </div>
+          <p className="results-block__text results-block__text--muted">
+            {result.judge.quality_explanation}
+          </p>
+
+          <div className="papers-list">
+            {result.judge.papers.map((jp, i) => {
+              const paper = result.papers?.[i]
+              return (
+                <div key={i} className="paper-item">
+                  <button
+                    type="button"
+                    className="paper-item__toggle"
+                    onClick={() => onTogglePaper(i)}
+                  >
+                    <div className="paper-item__title">
+                      <StanceDot stance={jp.stance} />
+                      <span>{paper?.title} ({paper?.year})</span>
+                    </div>
+                    {expandedPapers[i] ? (
+                      <ChevronUp size={16} className="paper-item__chevron" />
+                    ) : (
+                      <ChevronDown size={16} className="paper-item__chevron" />
+                    )}
+                  </button>
+
+                  {expandedPapers[i] && paper && (
+                    <div className="paper-item__body">
+                      <div className="paper-metrics">
+                        <div className="paper-metric">
+                          <span>Study type</span>
+                          <strong>{jp.study_type}</strong>
+                        </div>
+                        <div className="paper-metric">
+                          <span>Quality</span>
+                          <strong>{jp.quality_score}/5</strong>
+                        </div>
+                        <div className="paper-metric">
+                          <span>Similarity</span>
+                          <strong>{paper.similarity}</strong>
+                        </div>
+                      </div>
+                      <p className="paper-item__summary">{jp.one_line_summary}</p>
+                      <p className="paper-item__journal">{paper.journal}</p>
+                      <a
+                        href={`https://pubmed.ncbi.nlm.nih.gov/${paper.pmid}/`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="citation-link citation-link--sm"
+                      >
+                        View on PubMed
+                        <ExternalLink size={10} />
+                      </a>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend-react/src/components/VerdictBadge.jsx

@@ -0,0 +1,41 @@
+import { CheckCircle, XCircle, AlertTriangle, HelpCircle } from "lucide-react"
+
+const VERDICT_CONFIG = {
+  TRUE: {
+    Icon: CheckCircle,
+    label: "True",
+    className: "verdict--success",
+  },
+  FALSE: {
+    Icon: XCircle,
+    label: "False",
+    className: "verdict--danger",
+  },
+  MISLEADING: {
+    Icon: AlertTriangle,
+    label: "Misleading",
+    className: "verdict--warning",
+  },
+  "INSUFFICIENT EVIDENCE": {
+    Icon: HelpCircle,
+    label: "Insufficient evidence",
+    className: "verdict--neutral",
+  },
+  ERROR: {
+    Icon: XCircle,
+    label: "Error",
+    className: "verdict--neutral",
+  },
+}
+
+export default function VerdictBadge({ verdict }) {
+  const config = VERDICT_CONFIG[verdict] || VERDICT_CONFIG.ERROR
+  const { Icon, label, className } = config
+
+  return (
+    <div className={`verdict-badge ${className}`}>
+      <Icon size={18} strokeWidth={2} />
+      <span>{label}</span>
+    </div>
+  )
+}

frontend-react/src/components/VerifyForm.jsx

@@ -0,0 +1,91 @@
+import { Loader2, ArrowRight, RotateCcw } from "lucide-react"
+import { SAMPLE_CLAIMS } from "../constants"
+
+export default function VerifyForm({ claim, loading, onClaimChange, onVerify, onClear }) {
+  return (
+    <section id="verify" className="hero-section">
+      <div className="hero-section__content">
+        <p className="hero-section__eyebrow">PubMed-backed verification</p>
+        <h1 className="hero-section__title">
+          Check health claims against real research
+        </h1>
+        <p className="hero-section__desc">
+          Enter any health claim. ClearVoice searches live peer-reviewed studies,
+          scores evidence quality, and returns a transparent verdict.
+        </p>
+      </div>
+
+      <div className="verify-card">
+        <label htmlFor="claim-input" className="verify-card__label">
+          Health claim
+        </label>
+        <textarea
+          id="claim-input"
+          value={claim}
+          onChange={(e) => onClaimChange(e.target.value)}
+          placeholder="e.g. Vitamin C prevents colds..."
+          className="verify-card__input"
+          rows={3}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault()
+              onVerify()
+            }
+          }}
+        />
+
+        <div className="sample-claims">
+          <span className="sample-claims__label">Try an example</span>
+          <div className="sample-claims__list">
+            {SAMPLE_CLAIMS.map((sample) => (
+              <button
+                key={sample}
+                type="button"
+                className="btn btn-chip"
+                disabled={loading}
+                onClick={() => onClaimChange(sample)}
+              >
+                {sample}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="verify-card__actions">
+          <p className="verify-card__hint">Enter to submit · Shift+Enter for new line</p>
+          <div className="verify-card__buttons">
+            {(claim.trim() || loading) && (
+              <button
+                type="button"
+                className="btn btn-ghost"
+                disabled={loading}
+                onClick={onClear}
+              >
+                <RotateCcw size={16} />
+                Clear
+              </button>
+            )}
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={loading || !claim.trim()}
+              onClick={onVerify}
+            >
+              {loading ? (
+                <>
+                  <Loader2 size={16} className="spin" />
+                  Analyzing
+                </>
+              ) : (
+                <>
+                  Verify claim
+                  <ArrowRight size={16} />
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

frontend-react/src/sections/AboutSection.jsx

@@ -0,0 +1,61 @@
+import { Search, BookOpen, Scale, MessageSquare } from "lucide-react"
+
+const STEPS = [
+  {
+    icon: Search,
+    title: "Live PubMed search",
+    text: "Your claim is searched against real-time peer-reviewed literature — not a stale offline database.",
+  },
+  {
+    icon: Scale,
+    title: "Multi-agent evaluation",
+    text: "Retrieval, quality judging, and contradiction detection work together to weigh the evidence.",
+  },
+  {
+    icon: MessageSquare,
+    title: "Transparent verdict",
+    text: "You get a clear verdict, confidence score, study breakdown, and plain-English explanation.",
+  },
+]
+
+export default function AboutSection() {
+  return (
+    <section id="about" className="section">
+      <div className="section__header">
+        <p className="section__eyebrow">How it works</p>
+        <h2 className="section__title">Science-first verification</h2>
+        <p className="section__desc">
+          ClearVoice evaluates health claims using live medical research. Every response cites
+          actual studies with quality scores and stance analysis.
+        </p>
+      </div>
+
+      <div className="steps-grid">
+        {STEPS.map(({ icon: Icon, title, text }) => (
+          <article key={title} className="step-card">
+            <div className="step-card__icon">
+              <Icon size={20} strokeWidth={1.5} />
+            </div>
+            <h3>{title}</h3>
+            <p>{text}</p>
+          </article>
+        ))}
+      </div>
+
+      <div className="feature-strip">
+        <div className="feature-strip__item">
+          <BookOpen size={16} />
+          <span>PubMedBERT semantic search</span>
+        </div>
+        <div className="feature-strip__item">
+          <Scale size={16} />
+          <span>Evidence quality scoring</span>
+        </div>
+        <div className="feature-strip__item">
+          <MessageSquare size={16} />
+          <span>Plain-English summaries</span>
+        </div>
+      </div>
+    </section>
+  )
+}

frontend-react/src/sections/ContactSection.jsx

@@ -0,0 +1,61 @@
+import { ExternalLink, Mail, Zap } from "lucide-react"
+import GithubIcon from "../components/GithubIcon"
+import { FOUNDER, LINKS } from "../constants"
+
+const CONTACTS = [
+  {
+    icon: GithubIcon,
+    label: "GitHub",
+    value: "MananBabbar07/ClearVoice",
+    href: LINKS.github,
+    desc: "Report issues, contribute, or explore the source code.",
+  },
+  {
+    icon: Zap,
+    label: "API",
+    value: "Hugging Face Spaces",
+    href: LINKS.api,
+    desc: "Direct access to the verification endpoint for integrations.",
+  },
+  {
+    icon: ExternalLink,
+    label: "Live demo",
+    value: "clear-voice-five.vercel.app",
+    href: LINKS.demo,
+    desc: "Try the deployed version of ClearVoice in your browser.",
+  },
+  {
+    icon: Mail,
+    label: "Reach out",
+    value: FOUNDER.name,
+    href: FOUNDER.github,
+    desc: "Open a GitHub issue or connect via profile for questions and feedback.",
+  },
+]
+
+export default function ContactSection() {
+  return (
+    <section id="contact" className="section section--last">
+      <div className="section__header">
+        <p className="section__eyebrow">Contact</p>
+        <h2 className="section__title">Get in touch</h2>
+        <p className="section__desc">
+          Questions, feedback, or collaboration — pick whichever channel works best for you.
+        </p>
+      </div>
+
+      <div className="contact-grid">
+        {CONTACTS.map(({ icon: Icon, label, value, href, desc }) => (
+          <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="contact-card">
+            <div className="contact-card__icon">
+              <Icon size={18} strokeWidth={1.5} />
+            </div>
+            <p className="contact-card__label">{label}</p>
+            <p className="contact-card__value">{value}</p>
+            <p className="contact-card__desc">{desc}</p>
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}

frontend-react/src/sections/FoundersSection.jsx

@@ -0,0 +1,40 @@
+import { ExternalLink } from "lucide-react"
+import GithubIcon from "../components/GithubIcon"
+import { FOUNDER, LINKS } from "../constants"
+
+export default function FoundersSection() {
+  return (
+    <section id="founders" className="section">
+      <div className="section__header">
+        <p className="section__eyebrow">Founder</p>
+        <h2 className="section__title">Built with intent</h2>
+        <p className="section__desc">
+          ClearVoice started as a project to fight medical misinformation with open, traceable evidence.
+        </p>
+      </div>
+
+      <article className="founder-card">
+        <div className="founder-card__avatar">{FOUNDER.name.split(" ").map((n) => n[0]).join("")}</div>
+        <div className="founder-card__body">
+          <div className="founder-card__top">
+            <div>
+              <h3>{FOUNDER.name}</h3>
+              <p className="founder-card__role">{FOUNDER.role}</p>
+            </div>
+            <div className="founder-card__actions">
+              <a href={FOUNDER.github} target="_blank" rel="noopener noreferrer" className="btn btn-outline btn-sm">
+                <GithubIcon size={15} />
+                GitHub
+              </a>
+              <a href={LINKS.github} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm">
+                View project
+                <ExternalLink size={13} />
+              </a>
+            </div>
+          </div>
+          <p className="founder-card__bio">{FOUNDER.bio}</p>
+        </div>
+      </article>
+    </section>
+  )
+}