tenant admin startseite schicker gestaltet und super-admin und tenant admin (filament) aufgesplittet.
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
This commit is contained in:
Codex Agent
@@ -3,6 +3,10 @@ import { Head, Link } from '@inertiajs/react';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MarketingLayout from '@/layouts/mainWebsite';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
posts: {
|
||||
@@ -44,37 +48,42 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
if (!posts.links || posts.links.length <= 3) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-12 text-center">
|
||||
<div className="flex justify-center space-x-2">
|
||||
{posts.links.map((link, index) => {
|
||||
const href = resolvePaginationHref(link.url);
|
||||
<div className="mt-12">
|
||||
<Card className="p-6">
|
||||
<div className="flex justify-center">
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{posts.links.map((link, index) => {
|
||||
const href = resolvePaginationHref(link.url);
|
||||
|
||||
const baseClasses = `px-3 py-2 rounded ${
|
||||
link.active
|
||||
? 'bg-[#FFB6C1] text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`;
|
||||
if (!href) {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant={link.active ? "default" : "outline"}
|
||||
disabled
|
||||
className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!href) {
|
||||
return (
|
||||
<span
|
||||
key={index}
|
||||
className={`${baseClasses} cursor-default`}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
href={href}
|
||||
className={baseClasses}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
asChild
|
||||
variant={link.active ? "default" : "outline"}
|
||||
className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
|
||||
>
|
||||
<Link
|
||||
href={href}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -83,54 +92,91 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
<MarketingLayout title={t('blog.title')}>
|
||||
<Head title={t('blog.title')} />
|
||||
{/* Hero Section */}
|
||||
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
|
||||
<div className="container mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('blog.hero_title')}</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('blog.hero_description')}</p>
|
||||
<Link href="#posts" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
|
||||
{t('blog.hero_cta')}
|
||||
</Link>
|
||||
<section className="bg-aurora-enhanced py-20 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="bg-white/10 backdrop-blur-sm border-white/20 shadow-xl">
|
||||
<CardContent className="p-8 md:p-12 text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 font-display text-gray-900 dark:text-gray-100">{t('blog.hero_title')}</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing text-gray-800 dark:text-gray-200">{t('blog.hero_description')}</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-white text-[#FFB6C1] hover:bg-gray-100 px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing"
|
||||
>
|
||||
<Link href="#posts">
|
||||
{t('blog.hero_cta')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Posts Section */}
|
||||
<section id="posts" className="py-20 px-4 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="text-3xl font-bold text-center mb-12 font-display text-gray-900 dark:text-gray-100">{t('blog.posts_title')}</h2>
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold font-display text-gray-900 dark:text-gray-100 mb-4">{t('blog.posts_title')}</h2>
|
||||
<Separator className="w-24 mx-auto" />
|
||||
</div>
|
||||
|
||||
{posts.data.length > 0 ? (
|
||||
<>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{posts.data.map((post) => (
|
||||
<div key={post.id} className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
|
||||
<Card key={post.id} className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="w-full h-48 object-cover rounded mb-4"
|
||||
/>
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold mb-2 font-sans-marketing text-gray-900 dark:text-gray-100">
|
||||
<Link href={`${localizedPath(`/blog/${post.slug}`)}`} className="hover:text-[#FFB6C1]">
|
||||
{post.title?.[locale] || post.title?.de || post.title || 'No Title'}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mb-4 text-gray-700 dark:text-gray-300 font-serif-custom">{post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4 font-sans-marketing">
|
||||
{t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')} | {t('blog.published_at')} {post.published_at}
|
||||
</p>
|
||||
<Link
|
||||
href={`${localizedPath(`/blog/${post.slug}`)}`}
|
||||
className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
|
||||
>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<CardTitle className="text-xl font-semibold mb-3 font-sans-marketing">
|
||||
<Link
|
||||
href={`${localizedPath(`/blog/${post.slug}`)}`}
|
||||
className="hover:text-[#FFB6C1] transition-colors"
|
||||
>
|
||||
{post.title?.[locale] || post.title?.de || post.title || 'No Title'}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
|
||||
<p className="text-gray-700 dark:text-gray-300 font-serif-custom mb-4 leading-relaxed">
|
||||
{post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4">
|
||||
<Badge variant="secondary" className="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
|
||||
{t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')}
|
||||
</Badge>
|
||||
<Separator orientation="vertical" className="hidden sm:block h-4" />
|
||||
<Badge variant="outline" className="text-gray-500">
|
||||
{t('blog.published_at')} {new Date(post.published_at).toLocaleDateString('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Button asChild variant="ghost" className="p-0 h-auto text-[#FFB6C1] hover:text-[#FF69B4] hover:bg-transparent">
|
||||
<Link href={`${localizedPath(`/blog/${post.slug}`)}`} className="font-semibold">
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
{renderPagination()}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
|
||||
<Card className="p-8 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,6 +3,10 @@ import { Head, Link } from '@inertiajs/react';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import MarketingLayout from '@/layouts/mainWebsite';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
post: {
|
||||
@@ -25,39 +29,82 @@ const BlogShow: React.FC<Props> = ({ post }) => {
|
||||
return (
|
||||
<MarketingLayout title={`${post.title} ${t('title_suffix')}`}>
|
||||
<Head title={`${post.title} ${t('title_suffix')}`} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
|
||||
<div className="container mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
|
||||
<p className="text-lg mb-8">
|
||||
{t('by_author')} {post.author?.name || t('team')} | {t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE')}
|
||||
</p>
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="mx-auto rounded-lg shadow-lg max-w-2xl"
|
||||
/>
|
||||
)}
|
||||
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] py-20 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white shadow-xl">
|
||||
<CardContent className="p-8 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">{post.title}</h1>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8 text-lg">
|
||||
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
||||
{t('by_author')} {post.author?.name || t('team')}
|
||||
</Badge>
|
||||
<Separator orientation="vertical" className="hidden sm:block h-6 bg-white/30" />
|
||||
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
||||
{t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{post.featured_image && (
|
||||
<div className="mt-8">
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="mx-auto rounded-lg shadow-lg max-w-2xl w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Post Content */}
|
||||
<section className="py-20 px-4 bg-white">
|
||||
<div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
|
||||
<div dangerouslySetInnerHTML={{ __html: post.content_html }} />
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-8 md:p-12">
|
||||
<div
|
||||
className="prose prose-lg prose-slate max-w-none
|
||||
prose-headings:text-slate-900 prose-headings:font-semibold
|
||||
prose-p:text-slate-700 prose-p:leading-relaxed
|
||||
prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
|
||||
prose-strong:text-slate-900 prose-strong:font-semibold
|
||||
prose-code:text-slate-900 prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
|
||||
prose-pre:bg-slate-900 prose-pre:text-slate-100
|
||||
prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-6 prose-blockquote:italic
|
||||
prose-ul:text-slate-700 prose-ol:text-slate-700
|
||||
prose-li:text-slate-700"
|
||||
dangerouslySetInnerHTML={{ __html: post.content_html }}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Back to Blog */}
|
||||
<section className="py-10 px-4 bg-gray-50">
|
||||
<div className="container mx-auto text-center">
|
||||
<Link
|
||||
href={localizedPath('/blog')}
|
||||
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
|
||||
>
|
||||
{t('back_to_blog')}
|
||||
</Link>
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-8 text-center">
|
||||
<Separator className="mb-6" />
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white px-8 py-3 rounded-full font-semibold transition-colors"
|
||||
>
|
||||
<Link href={localizedPath('/blog')}>
|
||||
{t('back_to_blog')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
|
||||
@@ -106,12 +106,15 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
|
||||
{/* Mobile Carousel for Endcustomer Packages */}
|
||||
<div className="block md:hidden">
|
||||
<Carousel className="w-full max-w-md mx-auto">
|
||||
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
||||
<CarouselContent className="-ml-1">
|
||||
{endcustomerPackages.map((pkg) => (
|
||||
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
||||
onTouchStart={(e) => console.log('Touch start on carousel item:', e.touches.length)}
|
||||
onTouchMove={(e) => console.log('Touch move on carousel item:', e.touches.length)}
|
||||
onTouchEnd={(e) => console.log('Touch end on carousel item')}
|
||||
>
|
||||
<div className="text-center mb-4">
|
||||
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
|
||||
@@ -329,12 +332,15 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
|
||||
{/* Mobile Carousel for Reseller Packages */}
|
||||
<div className="block md:hidden">
|
||||
<Carousel className="w-full max-w-md mx-auto">
|
||||
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
||||
<CarouselContent className="-ml-1">
|
||||
{resellerPackages.map((pkg) => (
|
||||
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
||||
onTouchStart={(e) => console.log('Touch start on reseller carousel item:', e.touches.length)}
|
||||
onTouchMove={(e) => console.log('Touch move on reseller carousel item:', e.touches.length)}
|
||||
onTouchEnd={(e) => console.log('Touch end on reseller carousel item')}
|
||||
>
|
||||
<div className="text-center mb-4">
|
||||
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
|
||||
|
||||
Reference in New Issue
Block a user