diff --git a/src/app/Root.tsx b/src/app/Root.tsx index b81320f..c8419ca 100644 --- a/src/app/Root.tsx +++ b/src/app/Root.tsx @@ -1,13 +1,16 @@ -import { Outlet } from "react-router"; +import { Outlet, useLocation } from "react-router"; import Header from "./components/Header"; export default function Root() { + const location = useLocation(); + const isLanding = location.pathname === "/"; + return ( -
-
-
+
+ {!isLanding &&
} +
); -} \ No newline at end of file +} diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index 90f196f..f03c9d0 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -1,12 +1,17 @@ import { Moon, Sun, LogOut, LayoutGrid } from "lucide-react"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useNavigate } from "react-router"; import VeritasLogo from "./VeritasLogo"; export default function Header() { - const [isDark, setIsDark] = useState(true); + const [isDark, setIsDark] = useState(() => localStorage.getItem("veritasai_theme") !== "light"); const navigate = useNavigate(); + useEffect(() => { + document.documentElement.classList.toggle("dark", isDark); + localStorage.setItem("veritasai_theme", isDark ? "dark" : "light"); + }, [isDark]); + const handleLogout = () => { localStorage.removeItem("veritasai_authenticated"); localStorage.removeItem("veritasai_user"); @@ -17,54 +22,34 @@ export default function Header() { const user = JSON.parse(localStorage.getItem("veritasai_user") || "{}"); return ( -
- {/* Brand */} -
- -
-
-

Dashboard

- {user.name &&

Welcome, {user.name}

} +
+
+
+ +
+
+

Workspace

+ {user.name &&

Welcome, {user.name}

} +
-
- {/* Status & Theme Toggle */} -
- - - {/* Live Status Indicator */} -
-
-
-
+
+
+ + System active
- System Active + + +
- - {/* Theme Toggle */} - - - {/* Logout Button */} -
); -} \ No newline at end of file +} diff --git a/src/app/components/Landing.tsx b/src/app/components/Landing.tsx index e188ec3..b37dca9 100644 --- a/src/app/components/Landing.tsx +++ b/src/app/components/Landing.tsx @@ -1,756 +1,136 @@ import { motion } from "motion/react"; -import { useEffect, useRef } from "react"; -import { Shield, FileText, Image, Video, Link as LinkIcon, ArrowRight, CheckCircle, AlertTriangle, TrendingUp, Users, DollarSign, Upload, Scan, BarChart3, Share2, Clock } from "lucide-react"; +import { ArrowRight, Check, ChevronRight, FileText, Image, Link as LinkIcon, Shield, Terminal, Video } from "lucide-react"; +import { useEffect, useState } from "react"; import { Link as RouterLink } from "react-router"; -export default function Landing() { - const analyticsRef = useRef(null); +const features = [ + { icon: FileText, title: "Text analysis", copy: "Trace claims, detect misleading narratives, and understand confidence." }, + { icon: Image, title: "Image detection", copy: "Inspect visual content for synthetic or manipulated media." }, + { icon: Video, title: "Video verification", copy: "Surface deepfake signals across moving and synthetic media." }, + { icon: LinkIcon, title: "URL intelligence", copy: "Check source reputation and credibility before you trust a link." }, +]; - useEffect(() => { - const section = analyticsRef.current; - if (!section) { - return; - } +const terminalLines = [ + ["$ veritas verify --url example.com", "Analyzing source…", "✓ credibility signals mapped"], + ["$ veritas inspect --image upload.jpg", "Scanning visual artifacts…", "✓ no synthetic pattern detected"], + ["$ veritas analyze --text claim.txt", "Cross-checking evidence…", "✓ confidence: 94.2%"], +]; - const timer = window.setTimeout(() => { - section.scrollIntoView({ behavior: "auto", block: "start" }); - }, 0); +export default function Landing() { + const [terminalIndex, setTerminalIndex] = useState(0); + const [visible, setVisible] = useState(0); - return () => window.clearTimeout(timer); + useEffect(() => { + const id = window.setInterval(() => { + setVisible(0); + setTerminalIndex((current) => (current + 1) % terminalLines.length); + }, 4200); + return () => window.clearInterval(id); }, []); - const features = [ - { - icon: FileText, - title: "Text Analysis", - description: "Detect misinformation in articles and news content", - }, - { - icon: Image, - title: "Image Detection", - description: "Identify AI-generated and manipulated images", - }, - { - icon: Video, - title: "Video Verification", - description: "Expose deepfakes and synthetic media", - }, - { - icon: LinkIcon, - title: "URL Checker", - description: "Verify domain reputation and source credibility", - }, - ]; - - const benefits = [ - "Real-time AI-powered analysis", - "Multi-modal detection capabilities", - "Detailed confidence scores", - "Comprehensive explanations", - ]; + useEffect(() => { + setVisible(1); + const id = window.setTimeout(() => setVisible(2), 650); + return () => window.clearTimeout(id); + }, [terminalIndex]); return ( -
- {/* Animated background */} -
-
-
-
- - {/* Header */} -
-
-
-
- -
-

- VeritasAI -

-
-
- - Sign In - - - Get Started - +
+
+
+ +
- - {/* Hero Section */} -
- -
- Multi-Modal Misinformation Detection -
-

- Combat Misinformation -
- with AI-Powered Analysis -

-

- Advanced detection system for identifying fake news, deepfakes, and manipulated media across multiple formats -

-
- - Start Detecting Now - - -
- - - {/* Benefits */} - - {benefits.map((benefit, index) => ( -
- - {benefit} -
- ))} - -
- - {/* Impact Statistics Section */} -
- -
-
- - The Global Threat of Misinformation -
-

- The Real Impact of Deepfakes & Misinformation -

-

- Synthetic media and AI-generated content pose unprecedented risks to individuals, businesses, and democracies worldwide -

-
- - {/* Statistics Grid */} -
- - -
900%
-

Increase in deepfakes

-

Since 2019 (Deeptrace, 2023)

- - - - -
$78B
-

Annual fraud losses

-

AI-enabled scams (FBI IC3, 2024)

- - - - -
73%
-

Can't identify deepfakes

-

Of surveyed adults (MIT, 2023)

- - - - -
- - {/* Impact Categories */} -
- -

- - Personal Security Threats -

-
    -
  • -
    - Identity theft: Deepfake voice cloning used in $35M+ fraud cases (Europol, 2024) -
    • -
  • -
    - Reputation damage: 68% of victims experience severe psychological harm (Pew Research, 2023) -
    • -
  • -
    - Non-consensual media: 143,000 deepfake videos identified online in 2023 alone -
    • -
- - - -

- - Business & Economic Impact -

-
    -
  • -
    - CEO fraud: Average loss of $1.8M per deepfake voice scam (Gartner, 2023) -
    • -
  • -
    - Stock manipulation: Fake news causes $400B+ in market volatility annually (IMF, 2024) -
    • -
  • -
    - Brand impersonation: 83% increase in synthetic media brand attacks (World Economic Forum, 2024) -
    • -
- - - -

- - Democratic & Social Impact -

-
    -
  • -
    - Election interference: Deepfakes detected in 47 countries during 2024 elections (Oxford Internet Institute) -
    • -
  • -
    - Eroded trust: 59% doubt authenticity of all online content (Edelman Trust Barometer, 2024) -
    • -
  • -
    - Social polarization: AI-generated disinformation increases division by 34% (Stanford Research, 2023) -
    • -
- -
- - {/* Call to Action Banner */} - - -

The Threat is Real. The Solution is Here.

-

- With deepfake technology becoming more accessible and sophisticated, detection tools are no longer optional—they're essential for personal safety, business security, and societal integrity. -

- - Protect Yourself with VeritasAI - - - - - {/* Sources Footer */} - -

- Data Sources: Deeptrace Research, FBI Internet Crime Complaint Center (IC3), MIT Media Lab, Sensity AI, Europol Cybercrime Centre, - Pew Research Center, Gartner Security & Risk Management, International Monetary Fund (IMF), World Economic Forum, - Oxford Internet Institute, Edelman Trust Barometer, Stanford Internet Observatory (2023-2024) -

- - -
- - {/* Features */} -
-
-

Powerful Detection Features

-

Everything you need to verify content authenticity

-
-
- {features.map((feature, index) => { - const Icon = feature.icon; - return ( - -
- -
-

{feature.title}

-

{feature.description}

- - ); - })} +
+ Capabilities + Sign in + Get started
-
- - {/* How It Works Section */} -
- -
-
- - Simple 4-Step Process + + +
+
+ +
+ + Multimodal verification engine
-

- How VeritasAI Works -

-

- Our advanced AI-powered system analyzes content across multiple dimensions to detect misinformation, deepfakes, and manipulated media with precision +

+ Trust the signal.
+ Question the noise. +

+

+ VeritasAI helps you verify text, images, video, and sources with clear AI-powered analysis instead of guesswork.

-
- - {/* Process Steps */} -
- -
-
- -
-
-
- STEP 1 -
-

Upload Content

-

- Submit text, images, videos, or URLs for analysis through our intuitive interface -

-
-
-
- - - -
-
- -
-
-
- STEP 2 -
-

AI Analysis

-

- Multi-layered AI models scan for manipulation patterns, inconsistencies, and authenticity markers -

-
-
-
- - - -
-
- -
-
-
- STEP 3 -
-

Get Results

-

- Receive detailed reports with confidence scores, visual gauges, and comprehensive explanations -

-
-
-
- - - -
-
- -
-
-
- STEP 4 -
-

Share & Protect

-

- Share verified results on social media and help combat the spread of misinformation -

-
-
- -
- - {/* Detection Methods Details */} -
- {/* Text Analysis */} - -
-
- -
-
-

Text Analysis

-

Natural Language Processing

-
-
-
-
- -
-

Sentiment Analysis

-

Detects emotionally manipulative language and sensationalism

-
-
-
- -
-

Source Verification

-

Cross-references claims with credible databases

-
-
-
- -
-

Pattern Recognition

-

Identifies known misinformation tactics and propaganda techniques

-
-
-
- -
-

Fact-Checking

-

Validates statistical claims and quoted information

-
-
-
- - - {/* Image Detection */} - -
-
- -
-
-

Image Detection

-

Computer Vision Analysis

-
-
-
-
- -
-

AI-Generated Detection

-

Identifies synthetic images from GANs, Stable Diffusion, DALL-E

-
-
-
- -
-

Manipulation Analysis

-

Detects photoshopping, cloning, splicing, and retouching

-
-
-
- -
-

Metadata Verification

-

Examines EXIF data, timestamps, and editing history

-
-
-
- -
-

Heat Map Visualization

-

Shows manipulated regions with visual overlays

-
-
-
- - - {/* Video Detection */} - -
-
-
-
-

Video Detection

-

Deepfake & Synthetic Media

-
-
-
-
- -
-

Facial Recognition Analysis

-

Detects face-swap deepfakes and lip-sync inconsistencies

-
-
-
- -
-

Audio-Visual Sync

-

Verifies alignment between audio waveforms and mouth movements

-
-
-
- -
-

Frame-by-Frame Analysis

-

Examines temporal inconsistencies and artifacts across frames

-
-
-
- -
-

Neural Network Detection

-

Identifies AI-generated video signatures and compression patterns

-
-
-
- - - {/* URL Checker */} - -
-
- -
-
-

URL Checker

-

Source Credibility Verification

-
-
-
-
- -
-

Domain Reputation

-

Checks registration age, hosting history, and blacklist status

-
-
-
- -
-

SSL & Security

-

Verifies encryption certificates and secure connections

-
-
-
- -
-

Content Analysis

-

Scans for clickbait, content farms, and misinformation patterns

-
-
-
- -
-

Redirect Detection

-

Identifies suspicious redirects and phishing attempts

-
-
-
- -
- - {/* Technology Stack */} - -
-

Powered by Advanced AI Technology

-

Cutting-edge machine learning models working in harmony

+
+ + Start verifying + + Explore capabilities
-
-
-
- -
-
Real-Time Processing
-

Analysis completed in seconds

-
-
-
- -
-
95%+ Accuracy
-

Industry-leading detection rates

-
-
-
- -
-
Multi-Layer Scanning
-

Comprehensive deep analysis

+
+ {['Text', 'Image', 'Video', 'URL'].map((item) => {item} verification)} +
+ + + +
+
+
+
veritas-cli
-
-
- -
-
Continuous Learning
-

Models updated with latest threats

+
+
VeritasAI verification shell v1.0
+
{terminalLines[terminalIndex][0]}
+ = 1 ? 1 : 0 }} className="text-slate-400">{terminalLines[terminalIndex][1]} + = 2 ? 1 : 0, x: visible >= 2 ? 0 : -5 }} className="text-emerald-300">{terminalLines[terminalIndex][2]} +
{'> '}awaiting next verification▋
- -
+ - {/* CTA */} -
- -

Ready to Get Started?

-

- Join VeritasAI today and start protecting yourself from misinformation -

- - Create Free Account - - - -
+
+ +

One workspace

+

Verification tools that stay out of your way.

+ +
+ {features.map(({ icon: Icon, title, copy }, index) => ( + +
+

{title}

+

{copy}

+ + ))} +
+
- {/* Footer */} -
-
-

© 2026 VeritasAI. All rights reserved. Multi-Modal Misinformation Detection System.

-
+
+
+ {[['94%', 'confidence-first'], ['4', 'verification modes'], ['1', 'focused workspace']].map(([value, label]) => ( +
{value}
{label}
+ ))} +
+
+ +
+

Make verification a habit

+

Before you share it, verify it.

+

A calmer, clearer way to navigate synthetic media and misinformation.

+ Create your workspace +
+
+ +
); -} \ No newline at end of file +} diff --git a/src/main.tsx b/src/main.tsx index 623bcad..609dafd 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,9 @@ import App from "./app/App.tsx"; import "./styles/index.css"; import { initFirebaseAnalytics } from "./app/lib/firebase"; +const savedTheme = localStorage.getItem("veritasai_theme"); +document.documentElement.classList.toggle("dark", savedTheme !== "light"); + // Vite emits this event when a lazy-loaded chunk belongs to an older // deployment and is no longer available. Reload once so the browser gets // the current index.html and its current asset manifest. diff --git a/src/styles/theme.css b/src/styles/theme.css index b9fda97..0ab7312 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -2,80 +2,78 @@ :root { --font-size: 16px; - --background: #ffffff; - --foreground: oklch(0.145 0 0); - --card: #ffffff; - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: #030213; - --primary-foreground: oklch(1 0 0); - --secondary: oklch(0.95 0.0058 264.53); - --secondary-foreground: #030213; - --muted: #ececf0; - --muted-foreground: #717182; - --accent: #e9ebef; - --accent-foreground: #030213; - --destructive: #d4183d; + --background: #f4f7fb; + --foreground: #142033; + --card: rgba(255,255,255,.78); + --card-foreground: #142033; + --popover: #ffffff; + --popover-foreground: #142033; + --primary: #315f8f; + --primary-foreground: #ffffff; + --secondary: #e8eff7; + --secondary-foreground: #294664; + --muted: #edf2f7; + --muted-foreground: #65758b; + --accent: #dcebf5; + --accent-foreground: #244766; + --destructive: #c94c5b; --destructive-foreground: #ffffff; - --border: rgba(0, 0, 0, 0.1); - --input: transparent; - --input-background: #f3f3f5; - --switch-background: #cbced4; + --border: rgba(72,101,130,.14); + --input: rgba(255,255,255,.92); + --input-background: #ffffff; + --switch-background: #c8d4df; --font-weight-medium: 500; --font-weight-normal: 400; - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --radius: 0.625rem; - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: #030213; - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --ring: #5e8bb5; + --chart-1: #5e8bb5; + --chart-2: #6fa89a; + --chart-3: #8a7fb4; + --chart-4: #c78f65; + --chart-5: #6d9bb8; + --radius: .85rem; + --sidebar: rgba(248,250,253,.9); + --sidebar-foreground: #142033; + --sidebar-primary: #315f8f; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: #e7eef6; + --sidebar-accent-foreground: #244766; + --sidebar-border: rgba(72,101,130,.13); + --sidebar-ring: #5e8bb5; } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.145 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.145 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.985 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.396 0.141 25.723); - --destructive-foreground: oklch(0.637 0.237 25.331); - --border: oklch(0.269 0 0); - --input: oklch(0.269 0 0); - --ring: oklch(0.439 0 0); - --font-weight-medium: 500; - --font-weight-normal: 400; - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(0.269 0 0); - --sidebar-ring: oklch(0.439 0 0); + --background: #070b12; + --foreground: #e8eef7; + --card: rgba(13,19,29,.82); + --card-foreground: #e8eef7; + --popover: #0d131d; + --popover-foreground: #e8eef7; + --primary: #73b7e8; + --primary-foreground: #07101a; + --secondary: #121c29; + --secondary-foreground: #dbe8f5; + --muted: #111a26; + --muted-foreground: #8a9bb0; + --accent: #14273a; + --accent-foreground: #b8d9f1; + --destructive: #e27a86; + --destructive-foreground: #16080a; + --border: rgba(148,177,207,.13); + --input: rgba(15,23,34,.9); + --ring: #73b7e8; + --chart-1: #73b7e8; + --chart-2: #7fc4b4; + --chart-3: #a89cda; + --chart-4: #d6a47e; + --chart-5: #7ca8c7; + --sidebar: rgba(9,14,22,.94); + --sidebar-foreground: #e8eef7; + --sidebar-primary: #73b7e8; + --sidebar-primary-foreground: #07101a; + --sidebar-accent: #121c29; + --sidebar-accent-foreground: #dbe8f5; + --sidebar-border: rgba(148,177,207,.12); + --sidebar-ring: #73b7e8; } @theme inline { @@ -120,62 +118,21 @@ } @layer base { - * { - @apply border-border outline-ring/50; - } - - body { - @apply bg-background text-foreground; - } - - /** - * Default typography styles for HTML elements (h1-h4, p, label, button, input). - * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them. - */ - - html { - font-size: var(--font-size); - } - - h1 { - font-size: var(--text-2xl); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - h2 { - font-size: var(--text-xl); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - h3 { - font-size: var(--text-lg); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - h4 { - font-size: var(--text-base); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - label { - font-size: var(--text-base); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } + * { @apply border-border outline-ring/50; } + html { font-size: var(--font-size); scroll-behavior: smooth; } + body { @apply bg-background text-foreground; min-width: 320px; } + button, input, textarea, select { font: inherit; } +} - button { - font-size: var(--text-base); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } +@layer components { + .app-surface { background: var(--background); color: var(--foreground); } + .ui-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(15,35,55,.06); } + .dark .ui-card { box-shadow: 0 18px 60px rgba(0,0,0,.24); } + .tech-grid { background-image: linear-gradient(to right, color-mix(in srgb, var(--foreground) 5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 5%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 88%); } + .terminal-window { background: #09101a; border: 1px solid rgba(130,180,220,.18); box-shadow: 0 28px 80px rgba(0,0,0,.25); } + .terminal-glow { box-shadow: 0 0 80px rgba(75,156,215,.12); } +} - input { - font-size: var(--text-base); - font-weight: var(--font-weight-normal); - line-height: 1.5; - } +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }