Function bodies 113 total

ListingCard function · typescript · L88-L163 (76 LOC)

src/components/sections/FeaturedListings.tsx

function ListingCard({ listing, index }: { listing: Listing; index: number }) {
  return (
    <AnimateIn delay={index * 0.1}>
      <div className="group min-w-[85vw] cursor-pointer border border-border bg-background transition-all duration-500 hover:border-accent/30 sm:min-w-[280px] md:min-w-0">
        {/* Image placeholder */}
        <div className="relative aspect-[4/3] overflow-hidden bg-background-tertiary">
          {/* Hover zoom effect on placeholder */}
          <div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
            <span className="text-xs tracking-[0.2em] text-text-muted uppercase">
              Listing Photo
            </span>
          </div>

          {/* Hover overlay */}
          <div className="absolute inset-0 bg-accent/0 transition-all duration-500 group-hover:bg-accent/10" />

          {/* Featured badge */}
          {listing.featured && (
            <div className="absolute

FeaturedListings function · typescript · L165-L216 (52 LOC)

src/components/sections/FeaturedListings.tsx

export default function FeaturedListings() {
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <section className="bg-background-secondary py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-10">
        <AnimateIn>
          <div className="flex flex-col items-center text-center">
            <p className="text-xs font-medium tracking-[0.3em] text-accent uppercase">
              Featured Properties
            </p>
            <h2 className="mt-4 font-heading text-4xl font-light tracking-tight text-text-primary md:text-5xl">
              Active Listings
            </h2>
            <p className="mt-2 text-sm text-text-muted">
              {activeCount} Active Listing{activeCount !== 1 ? "s" : ""}
            </p>
            <p className="mt-3 max-w-lg text-text-secondary">
              Explore curated properties across the Okanagan. Updated daily from
              the MLS.
            </p>
          </div>
        </AnimateIn>

        {

Dropdown function · typescript · L117-L189 (73 LOC)

src/components/sections/Hero.tsx

function Dropdown({ label, value, options, onChange }: DropdownProps) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div ref={ref} className="relative flex-1 min-w-0 sm:min-w-[130px]">
      <button
        onClick={() => setOpen((prev) => !prev)}
        className={cn(
          "flex w-full items-center justify-between gap-2 px-3 py-3 text-left sm:px-4",
          "text-sm text-text-secondary transition-colors duration-200",
          "hover:text-text-primary focus:outline-none",
          open && "text-text-primary"
        )}
        type="button"
      >
        <span className="flex flex-col">

handleClickOutside function · typescript · L122-L126 (5 LOC)

src/components/sections/Hero.tsx

    function handleClickOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }

SellTabContent function · typescript · L194-L235 (42 LOC)

src/components/sections/Hero.tsx

function SellTabContent() {
  return (
    <div className="glass rounded-2xl p-6 sm:p-8">
      {/* 3-step process */}
      <div className="grid gap-6 sm:grid-cols-3 sm:gap-4">
        {sellSteps.map((step, i) => (
          <div
            key={step.step}
            className="relative flex flex-col items-center text-center"
          >
            {/* Step number badge */}
            <div className="flex h-11 w-11 items-center justify-center rounded-full border border-accent/30 bg-accent/10">
              <span className="text-sm font-semibold text-accent">
                {step.step}
              </span>
            </div>
            {/* Connector line (desktop only) */}
            {i < sellSteps.length - 1 && (
              <div className="absolute top-[22px] left-[calc(50%+28px)] hidden h-px w-[calc(100%-56px)] bg-gradient-to-r from-accent/30 to-accent/10 sm:block" />
            )}
            <h3 className="mt-4 text-sm font-medium tracking-wide text-text-primary">

MoveTabContent function · typescript · L240-L281 (42 LOC)

src/components/sections/Hero.tsx

function MoveTabContent() {
  return (
    <div className="glass rounded-2xl p-6 sm:p-8">
      <div className="flex flex-col items-center text-center">
        {/* Icon */}
        <div className="flex h-14 w-14 items-center justify-center rounded-full border border-accent/20 bg-accent/5">
          <Phone className="h-6 w-6 text-accent" />
        </div>
        {/* Copy */}
        <h3 className="mt-5 font-heading text-2xl font-light tracking-tight text-text-primary sm:text-3xl">
          Your Next Move,{" "}
          <span className="italic text-accent">Strategically Planned</span>
        </h3>
        <p className="mt-3 max-w-lg text-sm leading-relaxed text-text-secondary">
          Whether you&apos;re upsizing, downsizing, or relocating to the
          Okanagan &mdash; I&apos;ll build a custom plan that aligns your
          timeline, budget, and goals.
        </p>
        {/* Testimonial quote */}
        <div className="mt-6 border-t border-border/50 pt-6">
          <blo

KarsenTabContent function · typescript · L286-L338 (53 LOC)

src/components/sections/Hero.tsx

function KarsenTabContent() {
  return (
    <div className="glass rounded-2xl p-6 sm:p-8">
      <div className="flex flex-col items-center text-center sm:flex-row sm:items-start sm:gap-8 sm:text-left">
        {/* Headshot placeholder */}
        <div className="shrink-0">
          <div className="relative h-24 w-24 overflow-hidden rounded-full border border-accent/20 bg-background-secondary sm:h-28 sm:w-28">
            <div className="flex h-full w-full items-center justify-center">
              <User className="h-8 w-8 text-text-muted/40" />
            </div>
          </div>
        </div>
        {/* Content */}
        <div className="mt-5 sm:mt-0">
          <h3 className="font-heading text-2xl font-light tracking-tight text-text-primary">
            Karsen Koltun
          </h3>
          <p className="mt-1 text-xs tracking-[0.15em] text-accent uppercase">
            Realtor &middot; Royal LePage
          </p>
          <p className="mt-3 max-w-md text-sm leading-relaxe

About: code-quality intelligence by Repobility · https://repobility.com

Hero function · typescript · L343-L645 (303 LOC)

src/components/sections/Hero.tsx

export default function Hero() {
  const router = useRouter();
  const [wordIndex, setWordIndex] = useState(0);
  const [activeTab, setActiveTab] = useState("buy");
  const sectionRef = useRef<HTMLElement>(null);

  /* Search state */
  const [location, setLocation] = useState("All Kelowna");
  const [priceMin, setPriceMin] = useState("Any");
  const [priceMax, setPriceMax] = useState("Any");
  const [beds, setBeds] = useState("Any");

  /* Parallax */
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start start", "end start"],
  });

  const headingY = useTransform(scrollYProgress, [0, 1], [0, -80]);
  const overlayOpacity = useTransform(scrollYProgress, [0, 0.8], [0.55, 0.92]);

  /* Rotating word timer */
  useEffect(() => {
    const interval = setInterval(() => {
      setWordIndex((prev) => (prev + 1) % rotatingWords.length);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  /* Handle search */
  function handleSearch() {
    cons

handleSearch function · typescript · L373-L381 (9 LOC)

src/components/sections/Hero.tsx

  function handleSearch() {
    const params = new URLSearchParams();
    if (location !== "All Kelowna") params.set("location", location);
    if (priceMin !== "Any") params.set("priceMin", priceMin);
    if (priceMax !== "Any") params.set("priceMax", priceMax);
    if (beds !== "Any") params.set("beds", beds);
    const query = params.toString();
    router.push(`/search${query ? `?${query}` : ""}`);
  }

Newsletter function · typescript · L17-L323 (307 LOC)

src/components/sections/Newsletter.tsx

export default function Newsletter() {
  const [email, setEmail] = useState("");
  const [interest, setInterest] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [honey, setHoney] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    setIsSubmitting(true);

    try {
      await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: email.split("@")[0],
          email,
          source: "Newsletter Signup",
          tags: [
            "newsletter",
            "market-report",
            ...(interest ? [`interest-${interest}`] : []),
          ],
          customFields: {
            interest: interest || "Not specified",
          },
          _honey: honey,
        }),
      });

      setIsSubmitted(true);
    } catch (err) {

SocialBar function · typescript · L60-L127 (68 LOC)

src/components/sections/SocialBar.tsx

export default function SocialBar() {
  const [hoveredPlatform, setHoveredPlatform] = useState<string | null>(null);

  return (
    <section className="border-y border-border bg-background py-14">
      <div className="mx-auto max-w-7xl px-6 lg:px-10">
        <AnimateIn>
          {/* "Follow Along" header text */}
          <p className="mb-8 text-center text-xs font-medium tracking-[0.4em] text-accent uppercase">
            Follow Along
          </p>

          <div className="flex flex-wrap items-center justify-center gap-8 md:gap-14">
            {socials.map((social) => (
              <a
                key={social.label}
                href={social.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-3 transition-all duration-300"
                onMouseEnter={() => setHoveredPlatform(social.hoverBg)}
                onMouseLeave={() => setHoveredPlatform(null)}
              >

useCountUp function · typescript · L14-L49 (36 LOC)

src/components/sections/StatsBar.tsx

function useCountUp(
  target: number,
  decimals: number,
  duration: number = 2000,
  trigger: boolean = false
) {
  const [value, setValue] = useState(0);
  const frameRef = useRef<number>(0);

  useEffect(() => {
    if (!trigger) return;

    const startTime = performance.now();

    const animate = (currentTime: number) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);

      // Ease-out cubic
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = eased * target;

      setValue(Number(current.toFixed(decimals)));

      if (progress < 1) {
        frameRef.current = requestAnimationFrame(animate);
      }
    };

    frameRef.current = requestAnimationFrame(animate);

    return () => cancelAnimationFrame(frameRef.current);
  }, [target, decimals, duration, trigger]);

  return value;
}

StatsBar function · typescript · L111-L128 (18 LOC)

src/components/sections/StatsBar.tsx

export default function StatsBar() {
  return (
    <section className="border-y border-border bg-background-secondary">
      <div className="mx-auto max-w-7xl px-6 py-14 lg:px-10">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {stats.map((stat, i) => (
            <StatItem
              key={stat.label}
              stat={stat}
              index={i}
              isLast={i === stats.length - 1}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

GoogleLogo function · typescript · L14-L35 (22 LOC)