let’s make the Resources page look alive with icons so it’s not just text links. Since you’re already using Tailwind + React, we’ll lean on lucide-react
 icons (lightweight, modern, built for React).

1) Install lucide-react (if not already)
npm i lucide-react

2) Updated Resources Page with Icons

src/pages/Resources/ResourcesPage.tsx

import Template from "@/components/layout/Template";
import { Briefcase, Gavel, FileText, DollarSign, BookOpen } from "lucide-react";

export default function ResourcesPage() {
  return (
    <Template title="Business Resources" description="Helpful links for forming and protecting your business">
      <section className="max-w-4xl mx-auto py-12 space-y-10">

        <div className="flex items-start gap-3">
          <Briefcase className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Business Formation</h2>
            <p className="text-gray-600 mb-4">
              Understand the differences between a DBA, LLC, and Corporation — and choose what’s right for you.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide/launch/choose-business-structure" target="_blank">SBA: Choose a business structure</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.nolo.com/legal-encyclopedia/llc" target="_blank">Nolo: LLC basics</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <Gavel className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Trademarks & IP</h2>
            <p className="text-gray-600 mb-4">
              Protect your brand identity with trademarks, patents, or copyrights.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://tmsearch.uspto.gov/" target="_blank">USPTO Trademark Search</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.uspto.gov/trademarks/apply" target="_blank">USPTO: Apply for a trademark</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <FileText className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">DBA (Doing Business As)</h2>
            <p className="text-gray-600 mb-4">
              A DBA lets you operate under a business name different from your legal name.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide/launch/choose-business-structure/dba" target="_blank">SBA: DBA basics</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <DollarSign className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Taxes & EIN</h2>
            <p className="text-gray-600 mb-4">
              Most businesses need an EIN to open bank accounts and file taxes.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.irs.gov/businesses/small-businesses-self-employed/apply-for-an-employer-identification-number-ein-online" target="_blank">IRS: Apply for EIN online</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <BookOpen className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Helpful Guides</h2>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.score.org/find-mentor" target="_blank">SCORE: Free business mentorship</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide" target="_blank">SBA Business Guide</a></li>
            </ul>
          </div>
        </div>

      </section>
    </Template>
  );
}

3) UX Flow

Top menu → “Resources”

Footer → “Resources”

Icons:

Briefcase = business structure

Gavel = trademarks & IP

FileText = DBA

DollarSign = EIN/taxes

BookOpen = guides

This makes it visually scannable instead of a wall of text.

💡 Want me to also create a starter “FAQ” section (accordion style, with icons) at the bottom of Resources so users can skim common questions like “Do I need an LLC for my small business?”?

You said:
Yes please
ChatGPT said:

Absolutely, babe! Let’s give Resources a clean, on-brand FAQ accordion at the bottom—simple React + Tailwind, no extra libs. It uses the same lucide icons set you just added.

1) Tiny reusable Accordion

src/components/ui/Accordion.tsx

import { useState } from "react";
import { ChevronDown } from "lucide-react";

export type QA = { q: string; a: JSX.Element | string; icon?: JSX.Element };

export default function Accordion({ items }: { items: QA[] }) {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <div className="divide-y rounded-2xl border overflow-hidden">
      {items.map((it, i) => {
        const active = open === i;
        return (
          <div key={i} className="bg-white">
            <button
              className="w-full flex items-start gap-3 p-4 text-left hover:bg-gray-50"
              onClick={() => setOpen(active ? null : i)}
              aria-expanded={active}
            >
              <div className="mt-0.5">{it.icon}</div>
              <div className="flex-1">
                <div className="font-semibold">{it.q}</div>
              </div>
              <ChevronDown
                className={`w-5 h-5 transition-transform ${active ? "rotate-180" : ""}`}
              />
            </button>
            <div
              className={`px-4 pb-4 transition-[max-height] duration-300 ease-in-out ${
                active ? "max-h-[500px]" : "max-h-0 overflow-hidden"
              }`}
            >
              <div className="pl-9 text-sm text-gray-700">{it.a}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

2) Drop the FAQ into your Resources page

src/pages/Resources/ResourcesPage.tsx (add the section at the bottom)

import Template from "@/components/layout/Template";
import { Briefcase, Gavel, FileText, DollarSign, BookOpen, ShieldCheck, Building2, Search, Clock } from "lucide-react";
import Accordion, { QA } from "@/components/ui/Accordion";

export default function ResourcesPage() {
  const faqs: QA[] = [
    {
      q: "Do I need an LLC for my small business?",
      icon: <Building2 className="w-5 h-5 text-black" />,
      a: (
        <>
          You can start as a sole proprietor (simplest) and upgrade later. An LLC can help separate
          personal and business liability and may provide tax flexibility. Compare structures via the{" "}
          <a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide/launch/choose-business-structure" target="_blank">
            SBA guide
          </a>{" "}
          and check your state’s filing costs.
        </>
      ),
    },
    {
      q: "What’s the difference between a DBA and an LLC?",
      icon: <FileText className="w-5 h-5 text-black" />,
      a: (
        <>
          A DBA (“Doing Business As”) is just a <em>name</em> registration—no liability protection.
          An LLC is a legal entity that can protect your personal assets and often looks more
          professional to banks and partners.
        </>
      ),
    },
    {
      q: "When should I file a trademark?",
      icon: <Gavel className="w-5 h-5 text-black" />,
      a: (
        <>
          File once you’re confident in your brand name/logo and plan to use it in commerce. Start
          with a search on{" "}
          <a className="text-blue-600 hover:underline" href="https://tmsearch.uspto.gov/" target="_blank">
            USPTO TESS
          </a>{" "}
          to spot conflicts. If it’s clear, consider filing at{" "}
          <a className="text-blue-600 hover:underline" href="https://www.uspto.gov/trademarks/apply" target="_blank">
            USPTO
          </a>
          . (Tip: avoid generic/descriptive names—they’re harder to protect.)
        </>
      ),
    },
    {
      q: "How do I get an EIN (Employer ID Number)?",
      icon: <DollarSign className="w-5 h-5 text-black" />,
      a: (
        <>
          It’s free and fast with the IRS—apply online here:{" "}
          <a
            className="text-blue-600 hover:underline"
            href="https://www.irs.gov/businesses/small-businesses-self-employed/apply-for-an-employer-identification-number-ein-online"
            target="_blank"
          >
            IRS EIN Application
          </a>
          . You’ll need it for business bank accounts and tax filings.
        </>
      ),
    },
    {
      q: "How long does formation usually take?",
      icon: <Clock className="w-5 h-5 text-black" />,
      a: (
        <>
          It varies by state. Online filings can be same-day to a couple of weeks. Expedited service
          is often available for an extra fee. Check your Secretary of State processing times.
        </>
      ),
    },
    {
      q: "How do I reduce risk when choosing a name?",
      icon: <ShieldCheck className="w-5 h-5 text-black" />,
      a: (
        <>
          Do a quick name screening: domain search, social handles, and a basic{" "}
          <a className="text-blue-600 hover:underline" href="https://tmsearch.uspto.gov/" target="_blank">
            USPTO trademark search
          </a>
          . Avoid names close to existing brands in your niche.
        </>
      ),
    },
    {
      q: "Can I form in a different state (e.g., Delaware)?",
      icon: <Briefcase className="w-5 h-5 text-black" />,
      a: (
        <>
          You can, but if you <em>operate</em> mainly in your home state, you may still need to
          register there as a foreign entity. Weigh fees, taxes, and compliance before choosing.
        </>
      ),
    },
    {
      q: "Any mentorship or guidance?",
      icon: <BookOpen className="w-5 h-5 text-black" />,
      a: (
        <>
          Yes—check out{" "}
          <a className="text-blue-600 hover:underline" href="https://www.score.org/find-mentor" target="_blank">
            SCORE mentorship
          </a>{" "}
          and your local Small Business Development Center (SBDC). They offer free coaching and workshops.
        </>
      ),
    },
    {
      q: "How do I research my competition?",
      icon: <Search className="w-5 h-5 text-black" />,
      a: (
        <>
          Scan top Google results, social channels, review sites, and ad libraries. Map their
          positioning and offers. Use our Business Plan tool to turn insights into a strategy.
        </>
      ),
    },
  ];

  return (
    <Template title="Business Resources" description="Helpful links for forming and protecting your business">
      <section className="max-w-4xl mx-auto py-12 space-y-10">

        {/* ... your existing icon sections from earlier ... */}
        <div className="flex items-start gap-3">
          <Briefcase className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Business Formation</h2>
            <p className="text-gray-600 mb-4">
              Understand the differences between a DBA, LLC, and Corporation — and choose what’s right for you.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide/launch/choose-business-structure" target="_blank">SBA: Choose a business structure</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.nolo.com/legal-encyclopedia/llc" target="_blank">Nolo: LLC basics</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <Gavel className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Trademarks & IP</h2>
            <p className="text-gray-600 mb-4">
              Protect your brand identity with trademarks, patents, or copyrights.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://tmsearch.uspto.gov/" target="_blank">USPTO Trademark Search</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.uspto.gov/trademarks/apply" target="_blank">USPTO: Apply for a trademark</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <FileText className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">DBA (Doing Business As)</h2>
            <p className="text-gray-600 mb-4">
              A DBA lets you operate under a business name different from your legal name.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide/launch/choose-business-structure/dba" target="_blank">SBA: DBA basics</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <DollarSign className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Taxes & EIN</h2>
            <p className="text-gray-600 mb-4">
              Most businesses need an EIN to open bank accounts and file taxes.
            </p>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.irs.gov/businesses/small-businesses-self-employed/apply-for-an-employer-identification-number-ein-online" target="_blank">IRS: Apply for EIN online</a></li>
            </ul>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <BookOpen className="w-6 h-6 text-black mt-1" />
          <div>
            <h2 className="text-xl font-semibold mb-2">Helpful Guides</h2>
            <ul className="list-disc list-inside space-y-2 text-sm">
              <li><a className="text-blue-600 hover:underline" href="https://www.score.org/find-mentor" target="_blank">SCORE: Free business mentorship</a></li>
              <li><a className="text-blue-600 hover:underline" href="https://www.sba.gov/business-guide" target="_blank">SBA Business Guide</a></li>
            </ul>
          </div>
        </div>

        {/* FAQ */}
        <div className="pt-6">
          <h2 className="text-xl font-semibold mb-3">FAQ</h2>
          <p className="text-sm text-gray-600 mb-4">
            General guidance below—this isn’t legal advice. Check your state rules or a qualified pro when needed.
          </p>
          <Accordion items={faqs} />
        </div>

      </section>
    </Template>
  );
}

3) That’s it

Uses your Template layout

Reuses lucide-react icons

Adds a smooth accordion with real answers + links

Fully keyboard/ARIA-friendly basics (button with aria-expanded)