funky background pattern

src/app/components/BackgroundPattern.tsx

@@ -0,0 +1,157 @@
+"use client";
+import { useState, useEffect } from "react";
+import {
+  type LucideIcon,
+  HandCoins,
+  Bitcoin,
+  Coins,
+  DollarSign,
+  Euro,
+  IndianRupee,
+  JapaneseYen,
+  PiggyBank,
+  PoundSterling,
+  Wallet,
+  Banknote,
+  ChartCandlestick,
+  CirclePercent,
+  CreditCard,
+  Gem,
+  Receipt,
+  ShoppingBasket,
+  Rocket,
+  RockingChair,
+  Sparkles,
+  ChartPie,
+  ChartBar,
+  BarChart3,
+  ChartLine,
+  TrendingDown,
+  TrendingUp,
+  Vault,
+  Landmark,
+  Briefcase,
+  Handshake,
+  Shield,
+  Lock,
+  CalendarRange,
+  Hourglass,
+  Sprout,
+  Target,
+} from "lucide-react";
+
+export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const [rows, setRows] = useState(0);
+  const [columns, setColumns] = useState(0);
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (window.innerWidth > width + spacing * 2) {
+        setWidth(window.innerWidth);
+      }
+      if (window.innerHeight > height + spacing * 2) {
+        setHeight(window.innerHeight);
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+
+    return () => {
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, [height, width, spacing]);
+
+  useEffect(() => {
+    setColumns(Math.ceil(width / spacing) + 3);
+  }, [width, spacing]);
+
+  useEffect(() => {
+    setRows(Math.ceil(height / spacing) + 3);
+  }, [height, spacing]);
+
+  // Explicitly type the array as LucideIcon[]
+  const iconComponents: LucideIcon[] = [
+    HandCoins,
+    Bitcoin,
+    Coins,
+    DollarSign,
+    Euro,
+    IndianRupee,
+    JapaneseYen,
+    PiggyBank,
+    PoundSterling,
+    Wallet,
+    Banknote,
+    ChartCandlestick,
+    CirclePercent,
+    CreditCard,
+    Gem,
+    Receipt,
+    ShoppingBasket,
+    Rocket,
+    RockingChair,
+    Sparkles,
+    ChartPie,
+    ChartBar,
+    BarChart3,
+    ChartLine,
+    TrendingDown,
+    TrendingUp,
+    Vault,
+    Landmark,
+    Briefcase,
+    Handshake,
+    Shield,
+    Lock,
+    CalendarRange,
+    Hourglass,
+    Sprout,
+    Target,
+  ];
+
+  const renderIcons = ({
+    rows,
+    columns,
+  }: {
+    rows: number;
+    columns: number;
+  }) => {
+    const icons = [];
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < columns; x++) {
+        // Pick a random icon component from the array
+        const randomIndex = Math.floor(Math.random() * iconComponents.length);
+        const IconComponent = iconComponents[randomIndex]!;
+
+        // Slightly randomize size and position for more organic feel
+        const size = 28 + Math.floor(Math.random() * 8);
+        const xOffset = Math.floor(Math.random() * (spacing / 1.618));
+        const yOffset = Math.floor(Math.random() * (spacing / 1.618));
+
+        icons.push(
+          <IconComponent
+            key={`icon-${x}-${y}`}
+            size={size}
+            className="text-primary fixed"
+            style={{
+              left: `${x * spacing + xOffset}px`,
+              top: `${y * spacing + yOffset}px`,
+              opacity: opacity,
+              transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
+            }}
+          />,
+        );
+      }
+    }
+    return icons;
+  };
+
+  return (
+    <div className="absolute h-full w-full">
+      {width > 0 && renderIcons({ rows, columns })}
+    </div>
+  );
+}

src/app/page.tsx

@@ -7,11 +7,13 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import Footer from "./components/footer";
+import BackgroundPattern from "./components/BackgroundPattern";
 
 export default function HomePage() {
   return (
     <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
-      <div className="mx-auto flex flex-col items-center justify-center gap-4 text-center">
+      <BackgroundPattern />
+      <div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
         <div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
           <Image
             src="/investingfire_logo_no-bg.svg"
@@ -32,7 +34,7 @@ export default function HomePage() {
       </div>
 
       {/* Added SEO Content Sections */}
-      <div className="mx-auto max-w-2xl py-12 text-left">
+      <div className="z-10 mx-auto max-w-2xl py-12 text-left">
         <section className="mb-12">
           <h2 className="mb-4 text-3xl font-bold">
             What Is FIRE? Understanding Financial Independence and Early
@@ -247,7 +249,7 @@ export default function HomePage() {
             financial independence and smart investing.
           </p>
 
-          <div className="bg-secondary/20 my-8 rounded-md p-4 text-lg">
+          <div className="bg-foreground my-8 rounded-md p-4 text-lg">
             <p className="font-semibold">Getting Started with FIRE:</p>
             <ol className="ml-6 list-decimal space-y-1">
               <li>