Merge version_2_1780147170376 into main

Merge version_2_1780147170376 into main

src/components/ecommerce/ProductCatalog.tsx

@@ -1,142 +0,0 @@
-import { Star, ArrowUpRight, Loader2 } from "lucide-react";
-import { cls } from "@/lib/utils";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import useProducts from "@/hooks/useProducts";
-import type { ProductVariant } from "./ProductDetailCard";
-
-type CatalogProduct = {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  category?: string;
-  rating?: number;
-  reviewCount?: string;
-  onClick?: () => void;
-};
-
-type ProductCatalogProps = {
-  products?: CatalogProduct[];
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-  filters?: ProductVariant[];
-};
-
-const ProductCatalog = ({ products: productsProp, searchValue = "", onSearchChange, filters }: ProductCatalogProps) => {
-  const { products: fetchedProducts, isLoading } = useProducts();
-
-  const products: CatalogProduct[] = productsProp && productsProp.length > 0
-    ? productsProp
-    : fetchedProducts.map((p) => ({
-        id: p.id,
-        name: p.name,
-        price: p.price,
-        imageSrc: p.imageSrc,
-        category: p.brand,
-        rating: p.rating,
-        reviewCount: p.reviewCount,
-        onClick: p.onProductClick,
-      }));
-
-  if (isLoading && (!productsProp || productsProp.length === 0)) {
-    return (
-      <section className="mx-auto py-20 w-content-width">
-        <div className="flex justify-center">
-          <Loader2 className="size-8 text-foreground animate-spin" strokeWidth={1.5} />
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mx-auto py-20 w-content-width">
-      {(onSearchChange || (filters && filters.length > 0)) && (
-        <div className="flex flex-col gap-5 mb-5 md:flex-row md:items-end">
-          {onSearchChange && (
-            <div className="flex flex-1 flex-col gap-2 min-w-32">
-              <label className="text-sm font-medium text-foreground">Search</label>
-              <input
-                type="text"
-                value={searchValue}
-                onChange={(e) => onSearchChange(e.target.value)}
-                placeholder="Search products..."
-                className="card px-4 h-9 w-full md:w-80 text-base text-foreground bg-transparent rounded focus:outline-none"
-              />
-            </div>
-          )}
-          {filters && filters.length > 0 && (
-            <div className="flex gap-5 items-end">
-              {filters.map((filter) => (
-                <div key={filter.label} className="flex flex-col gap-2 min-w-32">
-                  <label className="text-sm font-medium text-foreground">{filter.label}</label>
-                  <div className="secondary-button flex items-center px-3 h-9 rounded">
-                    <select
-                      value={filter.selected}
-                      onChange={(e) => filter.onChange(e.target.value)}
-                      className="w-full text-base text-secondary-cta-text bg-transparent cursor-pointer focus:outline-none"
-                    >
-                      {filter.options.map((option) => (
-                        <option key={option} value={option}>{option}</option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {products.length === 0 ? (
-        <p className="py-20 text-center text-sm text-foreground/50">No products found</p>
-      ) : (
-        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-          {products.map((product) => (
-            <button
-              key={product.id}
-              onClick={product.onClick}
-              className="card group h-full flex flex-col gap-3 p-3 text-left rounded cursor-pointer"
-            >
-              <div className="relative aspect-square rounded overflow-hidden">
-                <ImageOrVideo imageSrc={product.imageSrc} className="size-full object-cover transition-transform duration-500 group-hover:scale-105" />
-                <div className="absolute inset-0 flex items-center justify-center transition-all duration-300 group-hover:bg-background/20 group-hover:backdrop-blur-xs">
-                  <div className="primary-button flex items-center justify-center size-12 rounded-full opacity-0 scale-75 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100">
-                    <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col gap-2">
-                {product.category && (
-                  <span className="secondary-button w-fit px-2 py-0.5 text-sm text-secondary-cta-text rounded">{product.category}</span>
-                )}
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-xl font-medium text-foreground truncate">{product.name}</h3>
-                  {product.rating && (
-                    <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-1">
-                        {Array.from({ length: 5 }).map((_, i) => (
-                          <Star
-                            key={i}
-                            className={cls("size-4 text-accent", i < Math.floor(product.rating || 0) ? "fill-accent" : "opacity-20")}
-                            strokeWidth={1.5}
-                          />
-                        ))}
-                      </div>
-                      {product.reviewCount && (
-                        <span className="text-sm text-foreground">({product.reviewCount})</span>
-                      )}
-                    </div>
-                  )}
-                </div>
-                <p className="text-2xl font-medium text-foreground">{product.price}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-      )}
-    </section>
-  );
-};
-
-export default ProductCatalog;
-export type { CatalogProduct };

src/components/sections/blog/BlogMediaCards.tsx

@@ -1,156 +0,0 @@
-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-5 p-5 rounded cursor-pointer"
-      onClick={handleClick}
-    >
-      <div className="flex flex-col gap-2">
-        <span className="card w-fit rounded px-2 py-0.5 text-xs mb-0.5">{item.category}</span>
-
-        <h3 className="text-2xl md:text-3xl font-medium leading-tight line-clamp-2">{item.title}</h3>
-        <p className="text-sm leading-tight opacity-75 line-clamp-2">{item.excerpt}</p>
-
-        <div className="flex items-center gap-3 mt-1.5">
-          <ImageOrVideo
-            imageSrc={item.authorImageSrc}
-            className="size-9 rounded-full object-cover"
-          />
-          <div className="flex flex-col">
-            <span className="text-sm font-medium">{item.authorName}</span>
-            <span className="text-xs opacity-75">{item.date}</span>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative aspect-square 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>
-    </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,
-      }))
-    : 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">
-        <div className="flex flex-col items-center gap-2">
-          <div className="card rounded px-3 py-1 text-sm w-fit">
-            <p>{tag}</p>
-          </div>
-
-          <TextAnimation
-            text={title}
-            variant="slide-up"
-            gradientText={true}
-            tag="h2"
-            className="text-6xl font-medium text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="slide-up"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-6/10 text-lg leading-tight text-center"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 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/features/FeaturesBorderGlow.tsx

@@ -1,86 +0,0 @@
-import TextAnimation from "@/components/ui/TextAnimation";
-import Button from "@/components/ui/Button";
-import BorderGlow from "@/components/ui/BorderGlow";
-import GridOrCarousel from "@/components/ui/GridOrCarousel";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import type { LucideIcon } from "lucide-react";
-import { resolveIcon } from "@/utils/resolve-icon";
-
-type FeatureItem = {
-  icon: string | LucideIcon;
-  title: string;
-  description: string;
-};
-
-interface FeaturesBorderGlowProps {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  features: FeatureItem[];
-}
-
-const FeaturesBorderGlow = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  features,
-}: FeaturesBorderGlowProps) => {
-  return (
-    <section aria-label="Features border glow section" className="flex flex-col gap-8 py-20">
-      <div className="flex flex-col items-center gap-2 w-content-width mx-auto">
-        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-          <p>{tag}</p>
-        </div>
-
-        <TextAnimation
-          text={title}
-          variant="slide-up"
-          gradientText={true}
-          tag="h2"
-          className="text-6xl font-medium text-center text-balance"
-        />
-
-        <TextAnimation
-          text={description}
-          variant="slide-up"
-          gradientText={false}
-          tag="p"
-          className="md:max-w-6/10 text-lg leading-tight text-center"
-        />
-
-        {(primaryButton || secondaryButton) && (
-          <div className="flex flex-wrap justify-center gap-3 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>
-          {features.map((feature) => {
-            const FeatureIcon = resolveIcon(feature.icon);
-            return (
-              <div key={feature.title} className="relative flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full min-h-60 card rounded">
-                <div className="flex items-center justify-center size-12 primary-button rounded">
-                  <FeatureIcon className="size-4 text-primary-cta-text" strokeWidth={1.5} />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-2xl font-medium leading-tight">{feature.title}</h3>
-                  <p className="text-sm leading-tight">{feature.description}</p>
-                </div>
-                <BorderGlow />
-              </div>
-            );
-          })}
-        </GridOrCarousel>
-      </ScrollReveal>
-    </section>
-  );
-};
-
-export default FeaturesBorderGlow;

src/components/sections/footer/FooterBasic.tsx

@@ -1,64 +0,0 @@
-import { useButtonClick } from "@/hooks/useButtonClick";
-
-type FooterLink = {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-};
-
-type FooterColumn = {
-  title: string;
-  items: FooterLink[];
-};
-
-const FooterLinkItem = ({ label, href, onClick }: FooterLink) => {
-  const handleClick = useButtonClick(href, onClick);
-
-  return (
-    <button
-      onClick={handleClick}
-      className="text-base hover:opacity-75 transition-opacity cursor-pointer"
-    >
-      {label}
-    </button>
-  );
-};
-
-const FooterBasic = ({
-  columns,
-  leftText,
-  rightText,
-}: {
-  columns: FooterColumn[];
-  leftText: string;
-  rightText: string;
-}) => {
-  return (
-    <footer
-      aria-label="Site footer"
-      className="w-full pt-20 pb-10 border-t border-foreground/15"
-    >
-      <div className="w-content-width mx-auto">
-        <div className="w-full flex flex-wrap justify-between gap-y-10 mb-10">
-          {columns.map((column) => (
-            <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
-              <h3 className="text-sm opacity-50">{column.title}</h3>
-              {column.items.map((item) => (
-                <FooterLinkItem key={item.label} label={item.label} href={item.href} onClick={item.onClick} />
-              ))}
-            </div>
-          ))}
-        </div>
-
-        <div className="w-full h-px bg-foreground/20" />
-
-        <div className="w-full flex items-center justify-between pt-5">
-          <span className="text-sm opacity-50">{leftText}</span>
-          <span className="text-sm opacity-50">{rightText}</span>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default FooterBasic;

src/components/sections/hero/HeroSplitMediaGrid.tsx

@@ -1,72 +0,0 @@
-import Button from "@/components/ui/Button";
-import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-
-type HeroSplitMediaGridProps = {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
-  items: [
-    { imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never },
-    { imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }
-  ];
-};
-
-const HeroSplitMediaGrid = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  items,
-}: HeroSplitMediaGridProps) => {
-  return (
-    <section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
-      <HeroBackgroundSlot />
-      <div className="flex flex-col md:flex-row items-center gap-10 md:gap-20 w-content-width mx-auto">
-        <div className="w-full md:w-1/2">
-          <div className="flex flex-col items-center md:items-start gap-3">
-            <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="h1"
-              className="text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance"
-            />
-
-            <TextAnimation
-              text={description}
-              variant="fade"
-              gradientText={false}
-              tag="p"
-              className="max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left"
-            />
-
-            <div className="flex flex-wrap max-md:justify-center gap-3 mt-3">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
-            </div>
-          </div>
-        </div>
-
-        <ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 grid grid-cols-2 gap-3">
-          {items.map((item, index) => (
-            <div key={index} className="h-80 md:h-[55vh] p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
-              <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
-            </div>
-          ))}
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default HeroSplitMediaGrid;

src/components/sections/pricing/PricingMediaCards.tsx

@@ -1,98 +0,0 @@
-import { Check } from "lucide-react";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-
-type PricingPlan = {
-  tag: string;
-  price: string;
-  period: string;
-  features: string[];
-  primaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const PricingMediaCards = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  plans,
-}: {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  plans: PricingPlan[];
-}) => (
-  <section aria-label="Pricing section" className="py-20">
-    <div className="flex flex-col gap-8">
-      <div className="flex flex-col items-center gap-2 w-content-width mx-auto">
-        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-          <p>{tag}</p>
-        </div>
-
-        <TextAnimation
-          text={title}
-          variant="slide-up"
-          gradientText={true}
-          tag="h2"
-          className="text-6xl font-medium text-center text-balance"
-        />
-
-        <TextAnimation
-          text={description}
-          variant="slide-up"
-          gradientText={false}
-          tag="p"
-          className="md:max-w-6/10 text-lg leading-tight text-center"
-        />
-
-        {(primaryButton || secondaryButton) && (
-          <div className="flex flex-wrap justify-center gap-3 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>
-
-      <div className="flex flex-col gap-5 w-content-width mx-auto">
-        {plans.map((plan) => (
-          <ScrollReveal
-            variant="fade"
-            key={plan.tag}
-            className="flex flex-col md:flex-row gap-5 md:gap-10 p-3 xl:p-4 2xl:p-5 card rounded"
-          >
-            <div className="w-full md:w-1/2 aspect-square md:aspect-4/3 rounded overflow-hidden">
-              <ImageOrVideo imageSrc={plan.imageSrc} videoSrc={plan.videoSrc} />
-            </div>
-
-            <div className="flex flex-col justify-center gap-5 w-full md:w-1/2">
-              <div className="px-3 py-1 w-fit text-sm card rounded">
-                <p>{plan.price}{plan.period}</p>
-              </div>
-              <h3 className="text-4xl md:text-5xl font-medium truncate">{plan.tag}</h3>
-
-              <div className="flex flex-col gap-3">
-                {plan.features.map((feature) => (
-                  <div key={feature} className="flex items-start gap-3">
-                    <div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
-                      <Check className="size-3 text-primary-cta-text" strokeWidth={2} />
-                    </div>
-                    <span className="text-sm leading-tight">{feature}</span>
-                  </div>
-                ))}
-              </div>
-
-              <Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-fit mt-1" />
-            </div>
-          </ScrollReveal>
-        ))}
-      </div>
-    </div>
-  </section>
-);
-
-export default PricingMediaCards;

src/components/sections/testimonial/TestimonialRatingCards.tsx

@@ -1,99 +0,0 @@
-import { Star } from "lucide-react";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import GridOrCarousel from "@/components/ui/GridOrCarousel";
-import { cls } from "@/lib/utils";
-
-type Testimonial = {
-  name: string;
-  role: string;
-  quote: string;
-  rating: number;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const TestimonialRatingCards = ({
-  tag,
-  title,
-  description,
-  primaryButton,
-  secondaryButton,
-  testimonials,
-}: {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  testimonials: Testimonial[];
-}) => {
-  return (
-    <section aria-label="Testimonials section" className="py-20">
-      <div className="flex flex-col gap-8">
-        <div className="flex flex-col items-center gap-2 w-content-width mx-auto">
-          <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="text-6xl font-medium text-center text-balance"
-          />
-
-          <TextAnimation
-            text={description}
-            variant="fade"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-6/10 text-lg leading-tight text-center"
-          />
-
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-3 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>
-            {testimonials.map((testimonial) => (
-              <div key={testimonial.name} className="flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 h-full p-3 xl:p-4 2xl:p-5 rounded card">
-                <div className="flex flex-col items-start gap-3 xl:gap-4 2xl:gap-5">
-                  <div className="flex gap-1">
-                    {Array.from({ length: 5 }).map((_, index) => (
-                      <Star
-                        key={index}
-                        className={cls("size-5 text-accent", index < testimonial.rating ? "fill-accent" : "fill-transparent")}
-                        strokeWidth={1.5}
-                      />
-                    ))}
-                  </div>
-
-                  <p className="text-lg leading-tight">{testimonial.quote}</p>
-                </div>
-
-                <div className="flex items-center gap-3">
-                  <div className="size-10 overflow-hidden rounded-full">
-                    <ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-base font-medium leading-tight">{testimonial.name}</span>
-                    <span className="text-sm leading-tight opacity-75">{testimonial.role}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </GridOrCarousel>
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default TestimonialRatingCards;

src/components/ui/RadialGradientBackground.tsx

@@ -1,15 +0,0 @@
-import { cls } from "@/lib/utils";
-
-type RadialGradientBackgroundProps = {
-  position: "fixed" | "absolute";
-};
-
-const RadialGradientBackground = ({ position }: RadialGradientBackgroundProps) => {
-  return (
-    <div className={cls(position, "inset-0 -z-10 overflow-hidden pointer-events-none select-none", position === "absolute" && "mask-[linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]")} aria-hidden="true">
-      <div className="relative w-full h-full bg-[radial-gradient(130%_130%_at_50%_15%,var(--background)_40%,var(--color-background-accent)_100%)] mask-[linear-gradient(180deg,transparent_0%,transparent_15%,black_55%,black_100%)]" />
-    </div>
-  );
-};
-
-export default RadialGradientBackground;

src/pages/HomePage.tsx

@@ -17,7 +17,7 @@ export default function HomePage() {
     <SectionErrorBoundary name="hero">
           <HeroBrand
       brand="Your Comfort, Our Priority."
-      description="Expert HVAC services for residential and commercial properties. We deliver reliable heating, cooling, and air quality solutions to keep your environment perfect."
+      description="Expert HVAC services for residential and commercial properties. We del, cooling, and air quality solutions to keep your environment perfect."
       primaryButton={{
         text: "Schedule Service",
         href: "#contact",