refactor: sanierung

apps/web/app/blog/page.tsx

@@ -9,14 +9,11 @@ import { SectionHeader } from "../../src/components/SectionHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
 import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
-import { Share2 } from "lucide-react";
-import { ShareModal } from "../../src/components/ShareModal";
 import { useAnalytics } from "../../src/components/analytics/useAnalytics";
 
 export default function BlogPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [activeTags, setActiveTags] = useState<string[]>([]);
-  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
   const { trackEvent } = useAnalytics();
 
   // Memoize allPosts
@@ -116,42 +113,18 @@ export default function BlogPage() {
       {/* Sticky Filter Bar */}
       <div className="sticky top-0 z-40 bg-slate-50/80 backdrop-blur-xl border-y border-slate-200/50 py-4 shadow-sm transition-all duration-300">
         <div className="narrow-container">
-          <div className="flex flex-col md:flex-row items-center gap-4">
-            <Reveal width="100%" className="flex-1">
-              <BlogCommandBar
-                searchQuery={searchQuery}
-                onSearchChange={setSearchQuery}
-                tags={allTags}
-                activeTags={activeTags}
-                onTagToggle={handleTagToggle}
-              />
-            </Reveal>
-            <div className="flex-shrink-0 flex items-center gap-2">
-              <button
-                onClick={() => {
-                  setIsShareModalOpen(true);
-                  trackEvent("blog_index_share_opened", {
-                    url: window.location.href,
-                  });
-                }}
-                className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-slate-200 rounded-2xl text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-sm font-bold shadow-sm"
-                aria-label="Blog teilen"
-              >
-                <Share2 className="w-4 h-4" />
-                <span className="hidden sm:inline">Index teilen</span>
-              </button>
-            </div>
-          </div>
+          <Reveal width="100%">
+            <BlogCommandBar
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              tags={allTags}
+              activeTags={activeTags}
+              onTagToggle={handleTagToggle}
+            />
+          </Reveal>
         </div>
       </div>
 
-      <ShareModal
-        isOpen={isShareModalOpen}
-        onClose={() => setIsShareModalOpen(false)}
-        url={typeof window !== "undefined" ? window.location.href : ""}
-        title="Mintel Knowledge Base - Alle Artikel"
-      />
-
       <Section
         className="pb-32 pt-12"
         containerVariant="narrow"
@@ -176,7 +149,7 @@ export default function BlogPage() {
                 </button>
               </div>
             ) : (
-              <div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
+              <div className="grid grid-cols-1 gap-6 w-full">
                 {postsToShow.map((post, i) => (
                   <Reveal
                     key={post.slug}

apps/web/src/components/Section.tsx

@@ -31,6 +31,7 @@ export const Section: React.FC<SectionProps> = ({
   illustration,
   effects,
 }) => {
+  const hasSidebar = !!(number || title || illustration);
   const bgClass = {
     white: "bg-white",
     gray: "bg-slate-50/50",
@@ -81,9 +82,9 @@ export const Section: React.FC<SectionProps> = ({
       {effects}
 
       <div className={cn("relative z-10", containerClass)}>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
-          {/* Sidebar: Number & Title (Only if provided) */}
-          {(number || title || illustration) && (
+        {hasSidebar ? (
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
+            {/* Sidebar: Number & Title */}
             <div className="md:col-span-3">
               <div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
                 <div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
@@ -91,7 +92,6 @@ export const Section: React.FC<SectionProps> = ({
                     <Reveal delay={delay}>
                       <span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
                         {number}
-                        {/* Subtle binary overlay on number */}
                         <span
                           className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
                           aria-hidden="true"
@@ -106,7 +106,6 @@ export const Section: React.FC<SectionProps> = ({
                   {title && (
                     <Reveal delay={delay + 0.1}>
                       <div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
-                        {/* Animated dot indicator */}
                         <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
                         <Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
                           {title}
@@ -124,19 +123,13 @@ export const Section: React.FC<SectionProps> = ({
                 )}
               </div>
             </div>
-          )}
 
-          {/* Main Content */}
-          <div
-            className={cn(
-              number || title || illustration
-                ? "md:col-span-9"
-                : "md:col-span-12",
-            )}
-          >
-            {children}
+            {/* Main Content */}
+            <div className="md:col-span-9">{children}</div>
           </div>
-        </div>
+        ) : (
+          <div className="w-full">{children}</div>
+        )}
       </div>
     </section>
   );