added detailed layout and interactive elements to ChipOverview, incorporated floating backgrounds, hero section, features grid, specifications, research, applications, and CTA; updated Navbar to link to ChipOverview for improved navigation
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
@@ -14,7 +14,7 @@ export default function Navbar() {
|
||||
<NavLink to="/home" className="transition-transform hover:scale-110">
|
||||
<FaHome className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||
</NavLink>
|
||||
<NavLink to="/" className="transition-transform hover:scale-110">
|
||||
<NavLink to="/chip" className="transition-transform hover:scale-110">
|
||||
<FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||
</NavLink>
|
||||
<div className="w-16 md:w-20"></div>
|
||||
|
||||
@@ -1,3 +1,376 @@
|
||||
import {BsMoonStars, BsStars} from 'react-icons/bs';
|
||||
import {
|
||||
FaBrain,
|
||||
FaChartBar,
|
||||
FaCloud,
|
||||
FaFlask,
|
||||
FaHeart,
|
||||
FaHeartbeat,
|
||||
FaMicrochip,
|
||||
FaPlug,
|
||||
FaRunning,
|
||||
FaShieldAlt,
|
||||
FaUniversity,
|
||||
FaUserMd,
|
||||
FaUsers,
|
||||
FaWifi
|
||||
} from 'react-icons/fa';
|
||||
import {HiSparkles} from 'react-icons/hi';
|
||||
import logotext from "../assets/logotext.svg";
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
export default function ChipOverview() {
|
||||
return <></>
|
||||
}
|
||||
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='/home'
|
||||
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>)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user