Initial commit

src/components/sections/blog/BlogArticle.tsx

@@ -0,0 +1,91 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type BlogArticleProps = {
+  category: string;
+  title: string;
+  excerpt?: string;
+  content: string;
+  imageSrc: string;
+  authorName: string;
+  authorImageSrc: string;
+  date: string;
+  readingTime?: string;
+  backButton?: { text: string; href: string };
+};
+
+const BlogArticle = ({
+  category,
+  title,
+  excerpt,
+  content,
+  imageSrc,
+  authorName,
+  authorImageSrc,
+  date,
+  readingTime,
+  backButton = { text: "Back to Blog", href: "/blog" },
+}: BlogArticleProps) => {
+  return (
+    <article aria-label="Blog article" className="py-20">
+      <div className="flex flex-col gap-10">
+        <ScrollReveal variant="fade-blur">
+          <div className="flex flex-col gap-3 w-content-width md:max-w-4xl mx-auto">
+            <div className="flex items-center gap-2 px-3 py-1 mb-1 text-sm text-foreground/75 card rounded w-fit">
+              <a
+                href={backButton.href}
+                className="hover:text-foreground transition-colors"
+              >
+                {backButton.text}
+              </a>
+              <span>/</span>
+              <span className="text-foreground">{category}</span>
+            </div>
+
+            <h1 className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance">
+              {title}
+            </h1>
+
+            {excerpt && (
+              <p className="text-lg md:text-xl leading-snug text-balance">
+                {excerpt}
+              </p>
+            )}
+
+            <div className="flex items-center gap-3 mt-2 md:mt-3">
+              <ImageOrVideo
+                imageSrc={authorImageSrc}
+                className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+              />
+              <div className="flex flex-col min-w-0">
+                <span className="text-base text-foreground font-semibold leading-snug truncate">{authorName}</span>
+                <span className="text-base text-foreground/75 leading-snug truncate">
+                  {date}
+                  {readingTime && ` · ${readingTime}`}
+                </span>
+              </div>
+            </div>
+          </div>
+        </ScrollReveal>
+
+        <ScrollReveal variant="fade-blur">
+          <div className="w-content-width md:max-w-4xl mx-auto aspect-video card rounded overflow-hidden p-2 xl:p-3 2xl:p-4">
+            <ImageOrVideo
+              imageSrc={imageSrc}
+              className="size-full object-cover"
+            />
+          </div>
+        </ScrollReveal>
+
+        <ScrollReveal variant="fade-blur">
+          <div
+            className="w-content-width md:max-w-4xl mx-auto flex flex-col gap-6 [&>h1]:text-4xl [&>h1]:font-semibold [&>h1]:mt-4 [&>h2]:text-3xl [&>h2]:font-semibold [&>h2]:mt-4 [&>h3]:text-2xl [&>h3]:font-semibold [&>h3]:mt-2 [&>h4]:text-xl [&>h4]:font-semibold [&>h4]:mt-2 [&>p]:text-base [&>p]:leading-relaxed [&>p]:text-foreground/85 [&_strong]:font-semibold [&_em]:italic [&_u]:underline [&>ul]:flex [&>ul]:flex-col [&>ul]:gap-2 [&>ul]:list-disc [&>ul]:pl-6 [&>ul]:text-base [&>ul]:leading-relaxed [&>ul]:text-foreground/85 [&>ol]:flex [&>ol]:flex-col [&>ol]:gap-2 [&>ol]:list-decimal [&>ol]:pl-6 [&>ol]:text-base [&>ol]:leading-relaxed [&>ol]:text-foreground/85"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        </ScrollReveal>
+      </div>
+    </article>
+  );
+};
+
+export default BlogArticle;

src/components/sections/blog/BlogMediaCards.tsx

@@ -0,0 +1,160 @@
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import useBlogPosts from "@/hooks/useBlogPosts";
+
+type BlogItem = {
+  category: string;
+  title: string;
+  excerpt: string;
+  authorName: string;
+  authorImageSrc: string;
+  date: string;
+  imageSrc: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+const BlogCardItem = ({ item }: { item: BlogItem }) => {
+  const handleClick = useButtonClick(item.href, item.onClick);
+
+  return (
+    <article
+      className="card group flex flex-col justify-between gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 rounded cursor-pointer"
+      onClick={handleClick}
+    >
+      <div className="flex flex-1 flex-col justify-between gap-2 p-3 xl:p-3.5 2xl:p-4">
+        <div className="flex flex-col gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{item.category}</p>
+          </div>
+
+          <h3 className="text-2xl font-semibold leading-snug text-balance">{item.title}</h3>
+          <p className="text-base leading-snug text-balance">{item.excerpt}</p>
+        </div>
+
+        <div className="flex items-center gap-3 mt-2 md:mt-3">
+          <ImageOrVideo
+            imageSrc={item.authorImageSrc}
+            className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+          />
+          <div className="flex flex-col min-w-0">
+            <span className="text-base text-foreground font-semibold leading-snug truncate">{item.authorName}</span>
+            <span className="text-base text-foreground/75 leading-snug truncate">{item.date}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5">
+        <ImageOrVideo
+          imageSrc={item.imageSrc}
+          className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
+          <button
+            className="primary-button flex items-center justify-center size-12 rounded-full opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300 cursor-pointer"
+            onClick={handleClick}
+          >
+            <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+type BlogMediaCardsProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items?: BlogItem[];
+};
+
+const BlogMediaCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items: itemsProp,
+}: BlogMediaCardsProps) => {
+  const { posts, isLoading } = useBlogPosts();
+  const isFromApi = posts.length > 0;
+  const items = isFromApi
+    ? posts.map((p) => ({
+        category: p.category,
+        title: p.title,
+        excerpt: p.excerpt,
+        authorName: p.authorName,
+        authorImageSrc: p.authorAvatar,
+        date: p.date,
+        imageSrc: p.imageSrc,
+        onClick: p.onBlogClick ?? (p.slug ? () => { window.location.href = `/blog/${p.slug}`; } : undefined),
+      }))
+    : itemsProp;
+
+  if (isLoading && !itemsProp) {
+    return (
+      <section aria-label="Blog section" className="py-20">
+        <div className="w-content-width mx-auto flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <section aria-label="Blog section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{tag}</p>
+          </div>
+
+          <TextAnimation
+            text={title}
+            variant="fade"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="fade-blur">
+          <GridOrCarousel>
+            {items.map((item, index) => (
+              <BlogCardItem key={index} item={item} />
+            ))}
+          </GridOrCarousel>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default BlogMediaCards;

src/components/sections/blog/BlogSimpleCards.tsx

@@ -0,0 +1,159 @@
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import useBlogPosts from "@/hooks/useBlogPosts";
+
+type BlogItem = {
+  category: string;
+  title: string;
+  excerpt: string;
+  authorName: string;
+  authorImageSrc: string;
+  date: string;
+  imageSrc: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+const BlogCardItem = ({ item }: { item: BlogItem }) => {
+  const handleClick = useButtonClick(item.href, item.onClick);
+
+  return (
+    <article
+      className="card group flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 rounded cursor-pointer"
+      onClick={handleClick}
+    >
+      <div className="relative aspect-4/3 rounded overflow-hidden button-secondary shadow shadow-foreground/5">
+        <ImageOrVideo
+          imageSrc={item.imageSrc}
+          className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
+          <button
+            className="primary-button flex items-center justify-center size-12 rounded-full opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300 cursor-pointer"
+            onClick={handleClick}
+          >
+            <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col justify-between gap-2 p-3 xl:p-3.5 2xl:p-4">
+        <div className="flex flex-col gap-2">
+          <div className="px-3 py-1 mb-1 text-sm primary-button text-primary-cta-text rounded w-fit">
+            <p>{item.category}</p>
+          </div>
+          <h3 className="text-2xl font-semibold leading-snug text-balance">{item.title}</h3>
+          <p className="text-base leading-snug text-balance">{item.excerpt}</p>
+        </div>
+
+        <div className="flex items-center gap-3 mt-2 md:mt-3">
+          <ImageOrVideo
+            imageSrc={item.authorImageSrc}
+            className="size-10 md:size-11 2xl:size-12 rounded-full object-cover"
+          />
+          <div className="flex flex-col min-w-0">
+            <span className="text-base text-foreground font-semibold leading-snug truncate">{item.authorName}</span>
+            <span className="text-base text-foreground/75 leading-snug truncate">{item.date}</span>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+type BlogSimpleCardsProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items?: BlogItem[];
+};
+
+const BlogSimpleCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items: itemsProp,
+}: BlogSimpleCardsProps) => {
+  const { posts, isLoading } = useBlogPosts();
+  const isFromApi = posts.length > 0;
+  const items = isFromApi
+    ? posts.map((p) => ({
+        category: p.category,
+        title: p.title,
+        excerpt: p.excerpt,
+        authorName: p.authorName,
+        authorImageSrc: p.authorAvatar,
+        date: p.date,
+        imageSrc: p.imageSrc,
+        onClick: p.onBlogClick ?? (p.slug ? () => { window.location.href = `/blog/${p.slug}`; } : undefined),
+      }))
+    : itemsProp;
+
+  if (isLoading && !itemsProp) {
+    return (
+      <section aria-label="Blog section" className="py-20">
+        <div className="w-content-width mx-auto flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <section aria-label="Blog section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{tag}</p>
+          </div>
+
+          <TextAnimation
+            text={title}
+            variant="fade"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="fade"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="fade-blur">
+          <GridOrCarousel>
+            {items.map((item, index) => (
+              <BlogCardItem key={index} item={item} />
+            ))}
+          </GridOrCarousel>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default BlogSimpleCards;

src/components/sections/blog/BlogTagCards.tsx

@@ -0,0 +1,163 @@
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import useBlogPosts from "@/hooks/useBlogPosts";
+
+type BlogItem = {
+  title: string;
+  excerpt: string;
+  authorName: string;
+  authorImageSrc: string;
+  date: string;
+  tags: string[];
+  imageSrc: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+const BlogCardItem = ({ item }: { item: BlogItem }) => {
+  const handleClick = useButtonClick(item.href, item.onClick);
+
+  return (
+    <article
+      className="card group flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 rounded cursor-pointer"
+      onClick={handleClick}
+    >
+      <div className="relative aspect-4/3 rounded overflow-hidden">
+        <ImageOrVideo
+          imageSrc={item.imageSrc}
+          className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
+          <button
+            className="primary-button flex items-center justify-center size-12 rounded-full opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300 cursor-pointer"
+            onClick={handleClick}
+          >
+            <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col justify-between gap-2 p-3 xl:p-3.5 2xl:p-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 min-w-0 mb-1">
+            <ImageOrVideo
+              imageSrc={item.authorImageSrc}
+              className="size-6 rounded-full object-cover shrink-0"
+            />
+            <span className="text-sm text-foreground/75 truncate">
+              {item.authorName} • {item.date}
+            </span>
+          </div>
+
+          <h3 className="text-2xl font-semibold leading-snug text-balance">{item.title}</h3>
+          <p className="text-base leading-snug text-balance">{item.excerpt}</p>
+        </div>
+
+        <div className="flex flex-wrap gap-2 mt-2 md:mt-3">
+          {item.tags.map((tag, index) => (
+            <div key={index} className="px-3 py-1 text-sm primary-button text-primary-cta-text rounded">
+              <p>{tag}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+};
+
+type BlogTagCardsProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items?: BlogItem[];
+};
+
+const BlogTagCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items: itemsProp,
+}: BlogTagCardsProps) => {
+  const { posts, isLoading } = useBlogPosts();
+  const isFromApi = posts.length > 0;
+  const items = isFromApi
+    ? posts.map((p) => ({
+        title: p.title,
+        excerpt: p.excerpt,
+        authorName: p.authorName,
+        authorImageSrc: p.authorAvatar,
+        date: p.date,
+        tags: [p.category],
+        imageSrc: p.imageSrc,
+        onClick: p.onBlogClick ?? (p.slug ? () => { window.location.href = `/blog/${p.slug}`; } : undefined),
+      }))
+    : itemsProp;
+
+  if (isLoading && !itemsProp) {
+    return (
+      <section aria-label="Blog section" className="py-20">
+        <div className="w-content-width mx-auto flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <section aria-label="Blog section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{tag}</p>
+          </div>
+
+          <TextAnimation
+            text={title}
+            variant="fade-blur"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="fade-blur"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="fade">
+          <GridOrCarousel>
+            {items.map((item, index) => (
+              <BlogCardItem key={index} item={item} />
+            ))}
+          </GridOrCarousel>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default BlogTagCards;