375 lines
22 KiB
TypeScript
375 lines
22 KiB
TypeScript
import {BsMoonStars, BsStars} from 'react-icons/bs';
|
|
import {
|
|
FaBrain,
|
|
FaChartBar,
|
|
FaCloud,
|
|
FaFlask,
|
|
FaHeart,
|
|
FaHeartbeat,
|
|
FaMicrochip,
|
|
FaPlug,
|
|
FaRunning,
|
|
FaShieldAlt,
|
|
FaUniversity,
|
|
FaUserMd,
|
|
FaUsers,
|
|
} from 'react-icons/fa';
|
|
import {HiSparkles} from 'react-icons/hi';
|
|
import logotext from "../assets/logotext.svg";
|
|
|
|
export default function ChipOverview() {
|
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
|
{/* Floating Background Elements */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-20 left-0 text-purple-200 opacity-30">
|
|
<FaCloud size={40}/>
|
|
</div>
|
|
<div className="absolute top-60 right-5 text-purple-300 opacity-20">
|
|
<BsStars size={30}/>
|
|
</div>
|
|
<div className="absolute bottom-10 left-32 text-purple-200 opacity-25">
|
|
<BsMoonStars size={35}/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div className="text-center mb-12 sm:mb-16 relative z-10">
|
|
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
|
|
<div className="flex items-center justify-around">
|
|
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
|
|
</div>
|
|
<p className="text-lg sm:text-xl dreamy-text">Bahnbrechende Traumtechnologie</p>
|
|
</div>
|
|
<div
|
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
|
style={{animationDelay: '0.2s'}}>
|
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
|
<HiSparkles className="text-yellow-400 mb-2 sm:mb-0 sm:mr-2" size={20}/>
|
|
<h2 className="dream-title text-xl sm:text-2xl">Der erste aufklebbare Sensor-Chip für vollständige
|
|
Traumerfassung</h2>
|
|
<HiSparkles className="text-yellow-400 mt-2 sm:mt-0 sm:ml-2 hidden sm:block" size={20}/>
|
|
</div>
|
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
|
Unser innovativer Chip vereint drei revolutionäre Technologien in einem einzigen, aufklebbaren
|
|
Sensorsystem
|
|
mit KI-gestützter Inhaltsanalyse
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Features Grid - Dreamy Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
{/* EEG-Sensoren */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30 dark:bg-gradient-to-br dark:from-purple-900/30 dark:to-pink-900/30 dark:border-purple-700/30"
|
|
style={{animationDelay: '0.5s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
|
|
<FaBrain className="text-purple-600 dark:text-purple-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
EEG-Sensoren
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
Erfassung von Hirnströmen zur Traumdetektion mit über 85% Genauigkeit
|
|
</p>
|
|
</div>
|
|
|
|
{/* Herzfrequenz-Sensoren */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30 dark:bg-gradient-to-br dark:from-blue-900/30 dark:to-indigo-900/30 dark:border-blue-700/30"
|
|
style={{animationDelay: '1s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
|
|
<FaHeartbeat className="text-blue-600 dark:text-blue-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
Herzfrequenz-Sensoren
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
Präzise Pulsmessung und kontinuierliche Herzratenvariabilität-Überwachung während des Schlafs
|
|
</p>
|
|
</div>
|
|
|
|
{/* Bewegungssensoren */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30 dark:bg-gradient-to-br dark:from-violet-900/30 dark:to-purple-900/30 dark:border-violet-700/30"
|
|
style={{animationDelay: '1.5s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
|
|
<FaRunning className="text-violet-600 dark:text-violet-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
Bewegungssensoren
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
6-Achsen-Bewegungssensor für Körperbewegungsanalyse und automatische Schlafphasenerkennung
|
|
</p>
|
|
</div>
|
|
|
|
{/* KI-Algorithmen */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30 dark:bg-gradient-to-br dark:from-emerald-900/30 dark:to-teal-900/30 dark:border-emerald-700/30"
|
|
style={{animationDelay: '2s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-emerald-500/20 rounded-full">
|
|
<FaChartBar className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
KI-Algorithmen
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
Fortschrittliche Algorithmen interpretieren Trauminhalte mit einer Genauigkeit von über 85%
|
|
</p>
|
|
</div>
|
|
|
|
{/* Adhäsiv-Technologie */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30 dark:bg-gradient-to-br dark:from-amber-900/30 dark:to-orange-900/30 dark:border-amber-700/30"
|
|
style={{animationDelay: '2.5s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-amber-500/20 rounded-full">
|
|
<FaShieldAlt className="text-amber-600 dark:text-amber-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
Adhäsiv-Technologie
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
Biokompatible Materialien für hautfreundliche Haftung und schmerzfreie Entfernung
|
|
</p>
|
|
</div>
|
|
|
|
{/* Drahtlose Energieversorgung */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30 dark:bg-gradient-to-br dark:from-rose-900/30 dark:to-pink-900/30 dark:border-rose-700/30"
|
|
style={{animationDelay: '3s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-rose-500/20 rounded-full">
|
|
<FaPlug className="text-rose-600 dark:text-rose-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
|
|
Drahtlose Energieversorgung
|
|
</h3>
|
|
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
|
Thermoelektrische Generatoren nutzen Körperwärme für kontinuierlichen Betrieb ohne Batteriewechsel
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technical Specifications Section */}
|
|
<div
|
|
className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-blue-500/30 to-purple-400/30 dark:from-blue-800/30 dark:to-purple-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
|
|
style={{animationDelay: '3.2s'}}>
|
|
<div className="text-center">
|
|
<FaMicrochip className="text-blue-500 dark:text-blue-400 mx-auto mb-4" size={32}/>
|
|
<h2 className="dream-title text-2xl sm:text-3xl">Technische Spezifikationen</h2>
|
|
<p className="text-base sm:text-lg mt-2 mb-6" style={{color: 'var(--text)'}}>
|
|
Basierend auf aktueller Forschung
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 mt-6 sm:mt-8">
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaBrain className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">EEG-Sensormodul</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>Ultra-low-power Design mit nur 0,8 mW Verbrauch</li>
|
|
<li>Drahtlose Datenübertragung via Bluetooth 5.0</li>
|
|
<li>Miniaturisierte Bauweise: 9,2 Gramm Gesamtgewicht</li>
|
|
<li>Bewegungsartefakt-Kompensation</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaHeartbeat className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Herzfrequenz-Monitoring</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>Photoplethysmographie (PPG) Technologie</li>
|
|
<li>Kontinuierliche Herzratenvariabilität-Überwachung</li>
|
|
<li>Mittlere absolute Abweichung unter 2 bpm</li>
|
|
<li>Präzise Pulsmessung während des Schlafs</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaRunning className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Bewegungssensorik</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>6-Achsen-Bewegungssensor mit ±16 g Bereich</li>
|
|
<li>Automatische Schlafphasenerkennung</li>
|
|
<li>74,6% Genauigkeit bei Schlafstadienklassifizierung</li>
|
|
<li>Bewegungsanalyse für präzise Traumdetektion</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Research Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
{/* KI-basierte Traumanalyse */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 floating backdrop-blur-md bg-gradient-to-br from-indigo-100/50 to-blue-100/50 border border-indigo-200/30 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-blue-900/30 dark:border-indigo-700/30"
|
|
style={{animationDelay: '3.5s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-indigo-500/20 rounded-full">
|
|
<FaFlask className="text-indigo-600 dark:text-indigo-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-center dreamy-text">
|
|
Aktuelle Forschungsgrundlagen
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-semibold mb-2 text-sm sm:text-base">EEG-basierte Traumdetektion:</h4>
|
|
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
|
|
Die neueste Forschung zeigt, dass EEG-Signale zur automatischen Traumdetektion mit über 85%
|
|
Genauigkeit verwendet werden können.
|
|
Eine 2025 veröffentlichte Studie demonstriert, dass bereits 8-10 EEG-Kanäle für eine
|
|
effektive Traumerkennung ausreichen.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2 text-sm sm:text-base">Multimodale Traumanalyse:</h4>
|
|
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
|
|
Das innovative DreamNet-Framework erreicht 99,0% Genauigkeit bei der Kombination von
|
|
EEG-Daten mit physiologischen Signalen.
|
|
Diese Technologie ermöglicht sowohl semantische als auch emotionale Traumanalyse mit 95,2%
|
|
F1-Score.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KI-Algorithmen */}
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 floating backdrop-blur-md bg-gradient-to-br from-teal-100/50 to-green-100/50 border border-teal-200/30 dark:bg-gradient-to-br dark:from-teal-900/30 dark:to-green-900/30 dark:border-teal-700/30"
|
|
style={{animationDelay: '4s'}}>
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 sm:p-4 bg-teal-500/20 rounded-full">
|
|
<FaBrain className="text-teal-600 dark:text-teal-400" size={28}/>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-center dreamy-text">
|
|
KI-basierte Traumanalyse
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-semibold mb-2 text-sm sm:text-base">EEG-Musteranalyse:</h4>
|
|
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
|
|
Forschungsergebnisse von 2025 zeigen, dass Common Spatial Patterns (CSP) mit k-nearest
|
|
neighbors (KNN) die höchste Genauigkeit bei der Traumdetektion erreichen.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2 text-sm sm:text-base">Spektrale Traumanalyse:</h4>
|
|
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
|
|
Aktuelle Studien belegen, dass Beta-Frequenzaktivität (15-30 Hz) während des REM-Schlafs als
|
|
neuraler Fingerabdruck der Gedächtnisreaktivierung fungiert.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-2 text-sm sm:text-base">Trauminhalt-Dekodierung:</h4>
|
|
<p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
|
|
Das DreamNet-Framework verwendet Transformer-basierte Architektur mit multimodaler
|
|
Aufmerksamkeit zur Dekodierung von Traumthemen und emotionalen Zuständen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Applications Section */}
|
|
<div
|
|
className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-green-500/30 to-teal-400/30 dark:from-green-800/30 dark:to-teal-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
|
|
style={{animationDelay: '4.2s'}}>
|
|
<div className="text-center">
|
|
<FaHeart className="text-green-500 dark:text-green-400 mx-auto mb-4" size={32}/>
|
|
<h2 className="dream-title text-2xl sm:text-3xl">Anwendungsbereiche und Zielgruppen</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 mt-6 sm:mt-8">
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaUserMd className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Medizinische
|
|
Anwendungen</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>Schlafdiagnostik und Traumstörungsbehandlung</li>
|
|
<li>Neurologische Forschung zu Bewusstseinszuständen</li>
|
|
<li>Postoperative Überwachung in klinischen Umgebungen</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-teal-400 to-teal-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaUniversity className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Forschung und
|
|
Entwicklung</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>Neurowissenschaftliche Studien zu Traummechanismen</li>
|
|
<li>Brain-Computer-Interface Entwicklung</li>
|
|
<li>Psychologische Forschung zu Unterbewusstsein</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-center">
|
|
<div
|
|
className="bg-gradient-to-br from-green-400 to-green-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
|
|
<FaUsers className="text-white" size={24}/>
|
|
</div>
|
|
<h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Verbraucheranwendungen</h4>
|
|
<ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
|
|
<li>Persönliche Schlafoptimierung und Traumtagebuch</li>
|
|
<li>Wellness-Monitoring für bessere Schlafqualität</li>
|
|
<li>Biofeedback-Systeme für Entspannung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dreamy CTA Section */}
|
|
<div className="relative mt-12 sm:mt-16">
|
|
<div
|
|
className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-12 text-center floating bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden"
|
|
style={{animationDelay: '4.5s'}}>
|
|
<div className="relative z-10">
|
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
|
|
<FaMicrochip className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24}/>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Technische Vorteile</h2>
|
|
<FaMicrochip className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24}/>
|
|
</div>
|
|
<p className="text-base sm:text-lg md:text-xl text-purple-100 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto">
|
|
Wissenschaftlich fundierte Sensorfusion, benutzerfreundliche Installation und maximaler
|
|
Datenschutz
|
|
in einem revolutionären Traumerfassungssystem
|
|
</p>
|
|
{/*<div className="flex justify-center w-full">*/}
|
|
{/* <NavLink*/}
|
|
{/* to='/'*/}
|
|
{/* className="dreamy-button inline-flex items-center justify-center text-center mx-auto text-sm sm:text-base px-6 py-3 rounded-full font-medium shadow-lg"*/}
|
|
{/* style={{minWidth: '200px'}}*/}
|
|
{/* >*/}
|
|
{/* <FaWifi className="mr-2 sm:mr-3" size={18}/>*/}
|
|
{/* Mehr über die Technologie*/}
|
|
{/* <HiSparkles className="ml-2 sm:ml-3" size={18}/>*/}
|
|
{/* </NavLink>*/}
|
|
{/*</div>*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
}
|