-
-
- Deploy now
-
-
- Read our docs
-
+ return (
+
+ {/* Header */}
+
+
+ {/* Main Content */}
+
+
+ {/* Hero Section */}
+
+ {/* Logo/Title */}
+
+ {t('home.title')}
+
+
+ {/* Tagline */}
+
+ {t('home.tagline')}
+
+
+ {/* Feature Highlights */}
+
+ {[
+ {
+ title: t('home.features.sustainable.title'),
+ description: t('home.features.sustainable.description')
+ },
+ {
+ title: t('home.features.community.title'),
+ description: t('home.features.community.description')
+ },
+ {
+ title: t('home.features.rewards.title'),
+ description: t('home.features.rewards.description')
+ }
+ ].map((feature, index) => (
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+ ))}
+
+
+ {/* Community Stats */}
+
+
+
10k+
+
{t('home.stats.members')}
+
+
+
50k+
+
{t('home.stats.products')}
+
+
+
100
+
{t('home.stats.communities')}
+
+
+
+ {/* CTA Buttons */}
+
+
+
+
+
-
+
+ {/* Footer */}
+
+
+
+
+ {/* Decorative Elements */}
+
);
}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..3ede887
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import useAuthStore from '../store/authStore'
+import Header from '../components/nav/Header'
+import Footer from '../components/Footer'
+import {
+ UserCircleIcon,
+ EnvelopeIcon,
+ PhoneIcon,
+ MapPinIcon,
+ PencilIcon,
+ CheckCircleIcon
+} from '@heroicons/react/24/outline'
+
+export default function ProfilePage() {
+ const router = useRouter()
+ const user = useAuthStore(state => state.user)
+
+ // Redirect if not logged in
+ useEffect(() => {
+ if (!user) {
+ router.push('/login')
+ }
+ }, [user, router])
+
+ // Don't render if no user
+ if (!user) {
+ return (
+
+ )
+ }
+
+ // Mock user data for display
+ const profileData = {
+ firstName: 'Admin',
+ lastName: 'User',
+ email: user.email || 'office@profit-planet.com',
+ phone: '+49 123 456 789',
+ address: 'Musterstraße 123, 12345 Berlin',
+ joinDate: 'Oktober 2024',
+ memberStatus: 'Gold Member',
+ profileComplete: 95
+ }
+
+ return (
+
+
+
+
+
+ {/* Page Header */}
+
+
Profile Settings
+
+ Manage your account information and preferences
+
+
+
+ {/* Profile Completion */}
+
+
+
Profile Completion
+ {profileData.profileComplete}%
+
+
+
+ Complete your profile to unlock all features
+
+
+
+
+ {/* Profile Information */}
+
+ {/* Basic Information */}
+
+
+
Basic Information
+
+
+
+
+
+
+
+
+
+ {profileData.firstName}
+
+
+
+
+
+
+ {profileData.lastName}
+
+
+
+
+
+
+
+
+ {profileData.email}
+
+
+
+
+
+
+
+
+
{profileData.phone}
+
+
+
+
+
+
+
+ {profileData.address}
+
+
+
+
+
+ {/* Account Settings */}
+
+
Account Settings
+
+
+
+
+
Email Notifications
+
Receive updates about orders and promotions
+
+
+
+
+
+
+
SMS Notifications
+
Get text messages for important updates
+
+
+
+
+
+
+
Two-Factor Authentication
+
Add extra security to your account
+
+
+
+
+
+
+
+ {/* Sidebar */}
+
+ {/* Account Status */}
+
+
Account Status
+
+
+
+ Member Since
+ {profileData.joinDate}
+
+
+
+ Status
+
+ {profileData.memberStatus}
+
+
+
+
+ Profile
+ Verified
+
+
+
+
+ {/* Quick Actions */}
+
+
Quick Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/register/components/RegisterForm.tsx b/src/app/register/components/RegisterForm.tsx
new file mode 100644
index 0000000..758eb22
--- /dev/null
+++ b/src/app/register/components/RegisterForm.tsx
@@ -0,0 +1,633 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
+
+interface RegisterFormProps {
+ mode: 'personal' | 'company'
+ setMode: (mode: 'personal' | 'company') => void
+ refToken: string | null
+ onRegistered: () => void
+}
+
+interface PersonalFormData {
+ firstName: string
+ lastName: string
+ email: string
+ confirmEmail: string
+ password: string
+ confirmPassword: string
+ phoneNumber: string
+}
+
+interface CompanyFormData {
+ companyName: string
+ companyEmail: string
+ confirmCompanyEmail: string
+ companyPhone: string
+ contactPersonName: string
+ contactPersonPhone: string
+ password: string
+ confirmPassword: string
+}
+
+export default function RegisterForm({
+ mode,
+ setMode,
+ refToken,
+ onRegistered
+}: RegisterFormProps) {
+ // Personal form state
+ const [personalForm, setPersonalForm] = useState
({
+ firstName: '',
+ lastName: '',
+ email: '',
+ confirmEmail: '',
+ password: '',
+ confirmPassword: '',
+ phoneNumber: ''
+ })
+
+ // Company form state
+ const [companyForm, setCompanyForm] = useState({
+ companyName: '',
+ companyEmail: '',
+ confirmCompanyEmail: '',
+ companyPhone: '',
+ contactPersonName: '',
+ contactPersonPhone: '',
+ password: '',
+ confirmPassword: ''
+ })
+
+ // UI state
+ const [showPersonalPassword, setShowPersonalPassword] = useState(false)
+ const [showCompanyPassword, setShowCompanyPassword] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+ const [formFade, setFormFade] = useState('fade-in')
+
+ // Animate form when mode changes
+ useEffect(() => {
+ setFormFade('fade-out')
+ const timeout = setTimeout(() => {
+ setFormFade('fade-in')
+ }, 180)
+ return () => clearTimeout(timeout)
+ }, [mode])
+
+ // Add fade CSS
+ useEffect(() => {
+ const style = document.createElement('style')
+ style.innerHTML = `
+ .fade-in {
+ opacity: 1;
+ transform: translateY(0);
+ transition: opacity 180ms, transform 180ms;
+ }
+ .fade-out {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 180ms, transform 180ms;
+ }
+ `
+ document.head.appendChild(style)
+ return () => {
+ document.head.removeChild(style)
+ }
+ }, [])
+
+ // Reset forms when switching modes
+ useEffect(() => {
+ setError('')
+ }, [mode])
+
+ // Validation helpers
+ const validatePersonalForm = (): boolean => {
+ if (!personalForm.firstName.trim() || !personalForm.lastName.trim() ||
+ !personalForm.email.trim() || !personalForm.confirmEmail.trim() ||
+ !personalForm.password.trim() || !personalForm.confirmPassword.trim()) {
+ setError('Alle Felder sind erforderlich')
+ return false
+ }
+
+ if (personalForm.email !== personalForm.confirmEmail) {
+ setError('E-Mail-Adressen stimmen nicht überein')
+ return false
+ }
+
+ if (personalForm.password !== personalForm.confirmPassword) {
+ setError('Passwörter stimmen nicht überein')
+ return false
+ }
+
+ if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(personalForm.password)) {
+ setError('Passwort muss mindestens 8 Zeichen lang sein und Groß-, Kleinbuchstaben, Ziffern und Sonderzeichen enthalten')
+ return false
+ }
+
+ setError('')
+ return true
+ }
+
+ const validateCompanyForm = (): boolean => {
+ if (!companyForm.companyName.trim() || !companyForm.companyEmail.trim() ||
+ !companyForm.confirmCompanyEmail.trim() || !companyForm.contactPersonName.trim() ||
+ !companyForm.password.trim() || !companyForm.confirmPassword.trim()) {
+ setError('Alle Felder sind erforderlich')
+ return false
+ }
+
+ if (companyForm.companyEmail !== companyForm.confirmCompanyEmail) {
+ setError('E-Mail-Adressen stimmen nicht überein')
+ return false
+ }
+
+ if (companyForm.password !== companyForm.confirmPassword) {
+ setError('Passwörter stimmen nicht überein')
+ return false
+ }
+
+ if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(companyForm.password)) {
+ setError('Passwort muss mindestens 8 Zeichen lang sein und Groß-, Kleinbuchstaben, Ziffern und Sonderzeichen enthalten')
+ return false
+ }
+
+ setError('')
+ return true
+ }
+
+ // Submit handlers
+ const handlePersonalSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (loading) return
+
+ if (!validatePersonalForm()) return
+
+ setLoading(true)
+
+ try {
+ // TODO: Implement API call
+ console.log('Personal registration:', { ...personalForm, refToken })
+
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 1000))
+
+ // For now, just call onRegistered
+ onRegistered()
+ } catch (error) {
+ setError('Registrierung fehlgeschlagen. Bitte versuche es erneut.')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleCompanySubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (loading) return
+
+ if (!validateCompanyForm()) return
+
+ setLoading(true)
+
+ try {
+ // TODO: Implement API call
+ console.log('Company registration:', { ...companyForm, refToken })
+
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 1000))
+
+ // For now, just call onRegistered
+ onRegistered()
+ } catch (error) {
+ setError('Registrierung fehlgeschlagen. Bitte versuche es erneut.')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ // Input change handlers
+ const handlePersonalChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target
+ setPersonalForm(prev => ({ ...prev, [name]: value }))
+ }
+
+ const handleCompanyChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target
+ setCompanyForm(prev => ({ ...prev, [name]: value }))
+ }
+
+ // Password strength indicator
+ const getPasswordStrength = (password: string) => {
+ let strength = 0
+ if (password.length >= 8) strength++
+ if (/[a-z]/.test(password)) strength++
+ if (/[A-Z]/.test(password)) strength++
+ if (/\d/.test(password)) strength++
+ if (/[\W_]/.test(password)) strength++
+ return strength
+ }
+
+ const renderPasswordStrength = (password: string) => {
+ const strength = getPasswordStrength(password)
+ const rules = [
+ { test: password.length >= 8, text: 'Mindestens 8 Zeichen' },
+ { test: /[a-z]/.test(password), text: 'Kleinbuchstaben (a-z)' },
+ { test: /[A-Z]/.test(password), text: 'Großbuchstaben (A-Z)' },
+ { test: /\d/.test(password), text: 'Ziffern (0-9)' },
+ { test: /[\W_]/.test(password), text: 'Sonderzeichen (!@#$...)' }
+ ]
+
+ return (
+
+
Passwort-Anforderungen:
+
+ {rules.map((rule, index) => (
+ -
+ {rule.test ? '✓' : '○'}
+ {rule.text}
+
+ ))}
+
+
+ {/* Header */}
+
+
+ Registrierung für Profit Planet
+
+ {refToken && (
+
+ Du wurdest eingeladen!
+
+ )}
+
+
+ {/* Mode Toggle */}
+
+
+
+
+
+
+
+ {/* Error Message */}
+ {error && (
+
+ )}
+
+ {/* Forms */}
+
+ {mode === 'personal' ? (
+
+ ) : (
+
+ )}
+
+
+ {/* Login Link */}
+
+
+
+
+ Aktive Sitzung erkannt
+
+
+ Du bist bereits angemeldet. Um dich zu registrieren, musst du dich zuerst abmelden.
+
+
+
+
+
+
+
+
+
+
+
+ Registrierung für Profit Planet
+
+ {refToken && (
+
+ Du wurdest eingeladen! Referral-Token: {refToken}
+
+ )}
+
+ {/* Mode Toggle */}
+
+
+
+
+
+
+
+
+
+ Registrierungsmodus: {mode === 'personal' ? 'Privatperson' : 'Unternehmen'}
+
+
+
+
+
+
+
+
+
+
+
Shop wird geladen...
+
+
+ {/* Header Section */}
+
+
+
+
Profit Planet Shop
+
+ Entdecke nachhaltige und innovative Produkte, die sowohl deinem Geldbeutel als auch dem Planeten helfen
+
+
+
+
+
+ {/* Products Section - Tailwind UI Plus "Product Grid" */}
+
+