To be honest, I do not quite remember everyting I changed here today ¯\_(ツ)_/¯ But it is all good, I tell ya.

Author: abr4xas

.gitignore

@@ -5,4 +5,5 @@ out
 .env.local
 .env*.local
 *.log
-.DS_Store
+.DS_Store
+.agent

app/globals.css

@@ -144,6 +144,14 @@
     }
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .animate-scroll,
+    .animate-scroll-reverse {
+        animation: none !important;
+        overflow-x: auto;
+    }
+}
+
 @layer base {
     * {
         @apply border-border outline-ring/50;

app/layout.tsx

@@ -1,7 +1,6 @@
 import type React from "react";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import { Analytics } from "@vercel/analytics/next";
 import { Providers } from "@/components/theme-provider";
 import "./globals.css";
 
@@ -98,7 +97,6 @@ export default function RootLayout({
                         }}
                     />
                     {children}
-                    <Analytics />
                 </Providers>
             </body>
         </html>

app/notas/[slug]/page.tsx

@@ -8,6 +8,9 @@ import { notFound } from "next/navigation";
 import { PostHeader } from "@/components/blog/post-header";
 import { Metadata } from "next";
 import { Post } from "@/interfaces/post";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 type ParamsType = {
     params: Promise<{
@@ -36,6 +39,8 @@ export default async function PostPage({
     }
 
     const content = await markdownToHtml(post.content || "");
+    const wordCount = post.content?.split(/\s+/).length || 0;
+    const readingTime = Math.ceil(wordCount / 200);
 
     // JSON-LD for better SEO
     const jsonLd = {
@@ -66,7 +71,7 @@ export default async function PostPage({
             {/* Premium Hero Section */}
             <section className="relative pt-32 pb-12 md:pt-40 md:pb-20 w-full backdrop-blur-3xl overflow-hidden">
                 {/* Background grid pattern - Fixed Syntax */}
-                <div className="absolute inset-0 bg-[linear-gradient(to_right,#1a1a2e_1px,transparent_1px),linear-gradient(to_bottom,#1a1a2e_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#4a4a5e_1px,transparent_1px),linear-gradient(to_bottom,#4a4a5e_1px,transparent_1px)] bg-size-[4rem_4rem] opacity-50 [mask-image:linear-gradient(to_bottom,black_40%,transparent_100%)] -z-10" />
+                <div className="absolute inset-0 bg-[linear-gradient(to_right,#1a1a2e_1px,transparent_1px),linear-gradient(to_bottom,#1a1a2e_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#4a4a5e_1px,transparent_1px),linear-gradient(to_bottom,#4a4a5e_1px,transparent_1px)] bg-size-[4rem_4rem] opacity-50 mask-[linear-gradient(to_bottom,black_40%,transparent_100%)] -z-10" />
 
                 {/* Glow effects */}
                 <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/40 rounded-full blur-3xl animate-pulse -z-10" />
@@ -76,12 +81,23 @@ export default async function PostPage({
                 />
 
                 <Container>
-                    <div className="max-w-4xl mx-auto text-center">
+                    <div className="max-w-4xl mx-auto">
+                        <Link href="/notas" className="inline-flex">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="group mb-8 text-muted-foreground hover:text-primary transition-colors"
+                            >
+                                <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1" />
+                                Volver a notas
+                            </Button>
+                        </Link>
                         <PostHeader
                             title={post.title}
                             coverImage={post.coverImage}
                             date={post.date}
                             author={post.author}
+                            readingTime={`${readingTime} min`}
                         />
                     </div>
                 </Container>

app/page.tsx

@@ -1,12 +1,30 @@
 import { HeroSection } from "@/components/hero-section";
-import { AboutSection } from "@/components/about-section";
-import { MembersSection } from "@/components/members-section";
-import { GallerySection } from "@/components/gallery-section";
-import { LatestPostsSection } from "@/components/latest-posts-section";
-import { EventsSection } from "@/components/events-section";
-import { ContactSection } from "@/components/contact-section";
-import { Footer } from "@/components/footer";
 import { Navbar } from "@/components/navbar";
+import dynamic from "next/dynamic";
+
+const AboutSection = dynamic(() =>
+    import("@/components/about-section").then((mod) => mod.AboutSection),
+);
+const MembersSection = dynamic(() =>
+    import("@/components/members-section").then((mod) => mod.MembersSection),
+);
+const GallerySection = dynamic(() =>
+    import("@/components/gallery-section").then((mod) => mod.GallerySection),
+);
+const LatestPostsSection = dynamic(() =>
+    import("@/components/latest-posts-section").then(
+        (mod) => mod.LatestPostsSection,
+    ),
+);
+const EventsSection = dynamic(() =>
+    import("@/components/events-section").then((mod) => mod.EventsSection),
+);
+const ContactSection = dynamic(() =>
+    import("@/components/contact-section").then((mod) => mod.ContactSection),
+);
+const Footer = dynamic(() =>
+    import("@/components/footer").then((mod) => mod.Footer),
+);
 
 export default function Home() {
     return (

components/blog/blog-card.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import { type Post } from "@/interfaces/post";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -16,67 +17,76 @@ export function BlogCard({ post, className }: Props) {
     return (
         <Card
             className={cn(
-                "group flex flex-col h-full overflow-hidden border-border/50 bg-card transition-all hover:shadow-lg hover:border-border",
-                className
+                "group flex flex-col h-full overflow-hidden border-primary/10 bg-muted/30 backdrop-blur-md transition-all duration-500 hover:shadow-2xl hover:shadow-primary/5 hover:border-primary/30 hover:-translate-y-1 py-0 gap-0",
+                className,
             )}
         >
-            {/* Image Container - Switched from CardHeader to plain div to guarantee 0 padding */}
-            <div className="w-full relative">
+            {/* Image Container */}
+            <div className="w-full relative overflow-hidden">
                 <Link
                     href={`/notas/${post.slug}`}
-                    className="block overflow-hidden active:scale-95 transition-transform duration-200"
+                    className="block active:scale-95 transition-transform duration-200"
                 >
-                    <div className="relative aspect-video w-full overflow-hidden bg-muted">
-                        {/* bg-muted acts as placeholder if transparency exists */}
-                        <img
+                    <div className="relative aspect-video w-full overflow-hidden bg-muted/20">
+                        <Image
                             src={post.coverImage}
                             alt={`Cover for ${post.title}`}
-                            className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                            fill
+                            className="object-cover transition-transform duration-700 ease-out group-hover:scale-110"
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                         />
+                        <div className="absolute inset-0 bg-linear-to-t from-background/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     </div>
                 </Link>
             </div>
 
-            <CardContent className="flex-1 p-6">
-                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-3">
-                    <Calendar className="w-4 h-4" />
+            <CardContent className="flex-1 p-6 space-y-3">
+                <div className="flex items-center gap-2 text-xs font-medium text-primary/80 uppercase tracking-wider">
+                    <Calendar className="w-3.5 h-3.5" />
                     <DateFormatter dateString={post.date} />
                 </div>
                 <Link
                     href={`/notas/${post.slug}`}
-                    className="block group-hover:text-primary transition-colors"
+                    className="block group/title"
                 >
-                    <h3 className="text-xl font-bold leading-tight mb-2 line-clamp-2">
+                    <h3 className="text-xl font-bold leading-tight group-hover/title:text-primary transition-colors duration-300 line-clamp-2">
                         {post.title}
                     </h3>
                 </Link>
-                <p className="text-muted-foreground text-sm line-clamp-3 leading-relaxed">
+                <p className="text-muted-foreground text-sm line-clamp-3 leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity duration-300">
                     {post.excerpt}
                 </p>
             </CardContent>
+
             <CardFooter className="p-6 pt-0 flex items-center justify-between mt-auto">
-                <div className="flex items-center gap-2">
-                    <Avatar className="w-8 h-8 border">
+                <div className="flex items-center gap-3">
+                    <Avatar className="w-9 h-9 border-2 border-primary/10 transition-transform duration-300 group-hover:scale-110">
                         <AvatarImage
                             src={post.author.picture}
                             alt={post.author.name}
                         />
-                        <AvatarFallback>{post.author.name[0]}</AvatarFallback>
+                        <AvatarFallback className="bg-primary/5 text-primary">
+                            {post.author.name[0]}
+                        </AvatarFallback>
                     </Avatar>
-                    <span className="text-sm font-medium opacity-80">
-                        {post.author.name}
-                    </span>
+                    <div className="flex flex-col">
+                        <span className="text-sm font-semibold leading-none mb-1">
+                            {post.author.name}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground uppercase tracking-tighter">
+                            Autor
+                        </span>
+                    </div>
                 </div>
 
                 <Button
                     variant="ghost"
                     size="sm"
-                    className="gap-1 px-4 hover:bg-primary hover:text-white transition-all duration-300 group/btn"
+                    className="h-9 w-9 p-0 rounded-full hover:bg-primary hover:text-white transition-all duration-300 group/btn"
                     asChild
                 >
-                    <Link href={`/notas/${post.slug}`}>
-                        Leer más{" "}
-                        <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover/btn:translate-x-1" />
+                    <Link href={`/notas/${post.slug}`} aria-label="Leer más">
+                        <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/btn:translate-x-0.5" />
                     </Link>
                 </Button>
             </CardFooter>

components/blog/post-body.tsx

@@ -4,8 +4,11 @@ type Props = {
 
 export function PostBody({ content }: Props) {
     return (
-        <div className="max-w-3xl mx-auto prose prose-lg prose-slate dark:prose-invert prose-headings:font-bold prose-a:text-primary prose-img:rounded-xl [&>:first-child]:mt-0">
-            <div dangerouslySetInnerHTML={{ __html: content }} />
+        <div className="max-w-3xl mx-auto prose prose-sky dark:prose-invert prose-lg md:prose-xl selection:bg-primary/30 selection:text-foreground">
+            <div
+                className="prose-headings:tracking-tight prose-headings:font-bold prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-3xl prose-img:shadow-2xl prose-blockquote:border-l-primary prose-blockquote:bg-muted/50 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-lg"
+                dangerouslySetInnerHTML={{ __html: content }}
+            />
         </div>
     );
 }

components/blog/post-header.tsx

@@ -1,31 +1,48 @@
-import { Avatar } from "./avatar";
 import { DateFormatter } from "./date-formatter";
 import { PostTitle } from "./post-title";
 import { type Author } from "@/interfaces/author";
+import Image from "next/image";
 
 type Props = {
     title: string;
     coverImage: string;
     date: string;
     author: Author;
+    readingTime?: string;
 };
 
-export function PostHeader({ title, coverImage, date, author }: Props) {
+export function PostHeader({
+    title,
+    coverImage,
+    date,
+    author,
+    readingTime,
+}: Props) {
     return (
-        <div className="space-y-6">
+        <div className="flex flex-col items-center">
             <PostTitle>{title}</PostTitle>
 
-            <div className="flex items-center gap-2 text-muted-foreground animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
-                <img
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border px-4 py-2 rounded-full animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
+                <Image
                     src={author.picture}
                     alt={author.name}
+                    width={40}
+                    height={40}
                     className="w-10 h-10 rounded-full border border-border"
                 />
                 <div className="flex flex-col text-sm text-left leading-tight">
                     <span className="font-semibold text-foreground">
                         {author.name}
                     </span>
-                    <DateFormatter dateString={date} />
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                        <DateFormatter dateString={date} />
+                        {readingTime && (
+                            <>
+                                <span>•</span>
+                                <span>{readingTime} de lectura</span>
+                            </>
+                        )}
+                    </div>
                 </div>
             </div>
         </div>

components/blog/post-pagination.tsx

@@ -12,14 +12,14 @@ export function PostPagination({ allPosts }: Props) {
     const searchParams = useSearchParams();
     const pageParam = searchParams.get("page");
     const page = pageParam ? parseInt(pageParam) : 1;
-    const pageSize = 6;
+    const pageSize = 12;
 
     const totalPages = Math.ceil(allPosts.length / pageSize);
     const currentPage = page > 0 && page <= totalPages ? page : 1;
 
     const posts = allPosts.slice(
         (currentPage - 1) * pageSize,
-        currentPage * pageSize
+        currentPage * pageSize,
     );
 
     return (

components/blog/post-title.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 export function PostTitle({ children }: Props) {
     return (
-        <h1 className="text-4xl font-bold tracking-tighter leading-tight md:leading-none mb-4 text-center md:text-left">
+        <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight leading-tight mb-8 text-center balance">
             {children}
         </h1>
     );