Initial commit: breakpilot-lehrer - Lehrer KI Platform
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Boenisch
383
website/components/LandingContent.tsx
Normal file
383
website/components/LandingContent.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
'use client'
|
||||
|
||||
import { useLanguage } from '@/lib/LanguageContext'
|
||||
import { WebsiteContent } from '@/lib/content-types'
|
||||
import Link from 'next/link'
|
||||
import PricingSection from './PricingSection'
|
||||
|
||||
interface LandingContentProps {
|
||||
content: WebsiteContent
|
||||
}
|
||||
|
||||
export default function LandingContent({ content }: LandingContentProps) {
|
||||
const { t, isRTL } = useLanguage()
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="pt-28 pb-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
|
||||
<div className={`max-w-5xl mx-auto text-center ${isRTL ? 'rtl' : ''}`}>
|
||||
<div className="inline-flex items-center px-4 py-2 rounded-full bg-primary-100 text-primary-700 text-sm font-medium mb-8">
|
||||
{t('hero_badge')}
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 tracking-tight leading-tight">
|
||||
{t('hero_title')}{' '}
|
||||
<span className="gradient-text">{t('hero_highlight1')}</span>,<br />
|
||||
<span className="gradient-text">{t('hero_highlight2')}</span>
|
||||
</h1>
|
||||
<p className="mt-8 text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
|
||||
{t('hero_subtitle')}
|
||||
</p>
|
||||
<div className={`mt-10 flex flex-col sm:flex-row gap-4 justify-center ${isRTL ? 'sm:flex-row-reverse' : ''}`}>
|
||||
<a
|
||||
href="#pricing"
|
||||
className={`inline-flex items-center justify-center px-8 py-4 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all btn-press shadow-lg shadow-primary-500/30 ${isRTL ? 'flex-row-reverse' : ''}`}
|
||||
>
|
||||
{t('hero_cta_primary')}
|
||||
<svg className={`w-5 h-5 ${isRTL ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#features"
|
||||
className="inline-flex items-center justify-center px-8 py-4 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-50 transition-all border border-slate-200"
|
||||
>
|
||||
{t('hero_cta_secondary')}
|
||||
</a>
|
||||
</div>
|
||||
<p className="mt-6 text-sm text-slate-500">
|
||||
{t('hero_cta_hint')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Social Proof */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 border-y border-slate-100">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<p className="text-center text-slate-500 text-sm mb-8">
|
||||
Vertraut von Lehrkraeften an ueber 50 Schulen
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-60 grayscale">
|
||||
<div className="text-center text-xl font-semibold text-slate-400">Gymnasium A</div>
|
||||
<div className="text-center text-xl font-semibold text-slate-400">Realschule B</div>
|
||||
<div className="text-center text-xl font-semibold text-slate-400">Gesamtschule C</div>
|
||||
<div className="text-center text-xl font-semibold text-slate-400">Berufsschule D</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
|
||||
{t('features_title')}
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
{t('features_subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* AI Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
✏️
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_ai_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_ai_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Templates Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
📄
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_templates_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_templates_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Analytics Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
📊
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_analytics_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_analytics_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* GDPR Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
🔒
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_gdpr_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_gdpr_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Team Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
👥
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_team_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_team_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Mobile Feature */}
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
|
||||
<div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
|
||||
📱
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('feature_mobile_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('feature_mobile_desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it Works */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-slate-50">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
|
||||
{t('how_title')}
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-slate-600">
|
||||
{t('how_subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`grid grid-cols-1 md:grid-cols-3 gap-8 ${isRTL ? 'direction-rtl' : ''}`}>
|
||||
{/* Step 1 */}
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
|
||||
1
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('how_step1_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('how_step1_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
|
||||
2
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('how_step2_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('how_step2_desc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
|
||||
3
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 mb-3">
|
||||
{t('how_step3_title')}
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
{t('how_step3_desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonial */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-br from-primary-600 to-primary-700 rounded-3xl p-12 text-white text-center">
|
||||
<svg className="w-12 h-12 mx-auto mb-6 opacity-50" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
||||
</svg>
|
||||
<blockquote className="text-2xl font-medium leading-relaxed mb-8">
|
||||
{content.testimonial.quote}
|
||||
</blockquote>
|
||||
<div className={`flex items-center justify-center ${isRTL ? 'flex-row-reverse' : ''}`}>
|
||||
<div className={`w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-xl ${isRTL ? 'ml-4' : 'mr-4'}`}>
|
||||
👩🏫
|
||||
</div>
|
||||
<div className={isRTL ? 'text-right' : 'text-left'}>
|
||||
<div className="font-semibold">{content.testimonial.author}</div>
|
||||
<div className="text-primary-200 text-sm">{content.testimonial.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<PricingSection />
|
||||
|
||||
{/* Foerderantrag Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-indigo-700 text-white">
|
||||
<div className={`max-w-6xl mx-auto ${isRTL ? 'rtl' : ''}`}>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold">
|
||||
{t('fa_section_title')}
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-blue-100 max-w-3xl mx-auto">
|
||||
{t('fa_section_subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">{t('fa_preset_basic_name')}</h3>
|
||||
<p className="text-blue-100 text-sm mb-3">{t('fa_preset_basic_desc')}</p>
|
||||
<p className="text-sm font-medium text-blue-200">{t('fa_preset_basic_budget')}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">{t('fa_preset_cluster_name')}</h3>
|
||||
<p className="text-blue-100 text-sm mb-3">{t('fa_preset_cluster_desc')}</p>
|
||||
<p className="text-sm font-medium text-blue-200">{t('fa_preset_cluster_budget')}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg mb-1">{t('fa_preset_custom_name')}</h3>
|
||||
<p className="text-blue-100 text-sm mb-3">{t('fa_preset_custom_desc')}</p>
|
||||
<p className="text-sm font-medium text-blue-200">{t('fa_preset_custom_budget')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/foerderantrag"
|
||||
className={`inline-flex items-center justify-center px-8 py-4 rounded-xl bg-white text-blue-700 font-semibold hover:bg-blue-50 transition-all shadow-lg ${isRTL ? 'flex-row-reverse' : ''}`}
|
||||
>
|
||||
{t('fa_section_cta')}
|
||||
<svg className={`w-5 h-5 ${isRTL ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trust Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600">{t('trust_gdpr')}</div>
|
||||
<div className="mt-2 text-slate-600">{t('trust_gdpr_label')}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600">{t('trust_trial')}</div>
|
||||
<div className="mt-2 text-slate-600">{t('trust_trial_label')}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary-600">{t('trust_made')}</div>
|
||||
<div className="mt-2 text-slate-600">{t('trust_made_label')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
|
||||
{t('faq_title')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{content.faq.slice(0, 4).map((item, index) => (
|
||||
<div key={index} className={`bg-white rounded-xl p-6 border border-slate-200 ${isRTL ? 'text-right' : ''}`}>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">
|
||||
{item.question}
|
||||
</h3>
|
||||
<div className="text-slate-600 space-y-2">
|
||||
{item.answer.map((paragraph, pIndex) => (
|
||||
<p key={pIndex}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-8">
|
||||
<a
|
||||
href="/faq"
|
||||
className={`text-primary-600 hover:text-primary-700 font-medium inline-flex items-center ${isRTL ? 'flex-row-reverse' : ''}`}
|
||||
>
|
||||
{t('faq_show_all')}
|
||||
<span className={isRTL ? 'mr-1' : 'ml-1'}>{isRTL ? '←' : '→'}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-6">
|
||||
{t('cta_title')}
|
||||
</h2>
|
||||
<p className="text-xl text-slate-300 mb-10">
|
||||
{t('cta_subtitle')}
|
||||
</p>
|
||||
<a
|
||||
href="#pricing"
|
||||
className={`inline-flex items-center justify-center px-10 py-4 rounded-xl bg-white text-slate-900 font-semibold hover:bg-slate-100 transition-all btn-press shadow-lg ${isRTL ? 'flex-row-reverse' : ''}`}
|
||||
>
|
||||
{t('cta_button')}
|
||||
<svg className={`w-5 h-5 ${isRTL ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user