i need help coding a new prototype for my app, 
here is my code index.tsx :
import {
  Search,
  Settings,
  Bell,
  LayoutTemplate,
  Sparkles,
  User,
  Plus,
  ChevronRight,
  Home,
} from "lucide-react";
import React, { useEffect, useState, useRef } from "react";
import { render } from "react-dom";

export default function HomePage() {
  const [isDark, setIsDark] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [scrollPosition, setScrollPosition] = useState(0);
  const scrollRef = useRef(null);
  const [isWelcomeVisible, setIsWelcomeVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => setIsLoading(false), 1500);
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const element = scrollRef.current;
      if (element) {
        const scrollWidth = element.scrollWidth - element.clientWidth;
        const scrollLeft = element.scrollLeft;
        const position = scrollLeft / (scrollWidth / 2);
        setScrollPosition(Math.round(position));
      }
    };
    const element = scrollRef.current;
    if (element) {
      element.addEventListener("scroll", handleScroll);
      return () => element.removeEventListener("scroll", handleScroll);
    }
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      setIsWelcomeVisible(currentScrollY < 10);
    };
    window.addEventListener("scroll", handleScroll, {
      passive: true,
    });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen ${isDark ? "dark bg-black" : "bg-[#F2F2F7]"}`}>
      <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-lg bg-white/90 dark:bg-black/90 border-b border-gray-200/60 dark:border-gray-800/60 pt-[env(safe-area-inset-top)]">
        <div className="h-12 px-4 flex items-center justify-between">
          <div className="w-16">
            <button className="p-2 -m-2 rounded-[22px] active:opacity-50 transition-opacity">
              <Search className="w-5 h-5 text-[#007AFF]" />
            </button>
          </div>
          <h1 className="font-['SF_Pro_Display'] text-[17px] font-semibold">
            Pellicule
          </h1>
          <div className="w-16 flex justify-end">
            <button className="p-2 -m-2 rounded-[22px] active:opacity-50 transition-opacity">
              <Settings className="w-5 h-5 text-[#007AFF]" />
            </button>
          </div>
        </div>
      </header>

      <div
        className={`fixed top-14 left-0 right-0 z-40 transform transition-all duration-500 ease-in-out ${isWelcomeVisible ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"}`}
      >
        <div className="mx-2 mb-2 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm w-11/12 sm:w-96 mx-auto">
          <div className="space-y-0.5 text-center py-2">
            <h2 className="text-lg font-medium dark:text-white">
              Welcome back!
            </h2>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              You've captured{" "}
              <span className="text-emerald-500 font-semibold">47</span> moments
              this month
            </p>
          </div>
        </div>
      </div>

      <main className="pt-32 pb-24 max-w-screen-xl mx-auto px-4">
        <section className="mb-6" ref={scrollRef}>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">
              Recent Activity
            </h2>
            <button className="text-blue-500 text-sm flex items-center">
              See all <ChevronRight className="w-4 h-4 ml-1" />
            </button>
          </div>

          <div className="flex space-x-4 overflow-x-auto pb-4">
            {[
              {
                title: "Fitness Journey",
                image:
                  "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b",
                updated: "2h ago",
              },
              {
                title: "Garden Growth",
                image:
                  "https://images.unsplash.com/photo-1523348837708-15d4a09cfac2",
                updated: "5h ago",
              },
              {
                title: "Art Project",
                image:
                  "https://images.unsplash.com/photo-1513364776144-60967b0f800f",
                updated: "8h ago",
              },
            ].map((item, i) => (
              <div
                key={i}
                className="flex-shrink-0 w-48 rounded-[10px] overflow-hidden shadow-sm"
              >
                <img
                  src={item.image}
                  alt={item.title}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4 bg-white dark:bg-gray-800">
                  <h3 className="font-medium dark:text-white">{item.title}</h3>
                  <p className="text-sm text-gray-500">
                    Updated {item.updated}
                  </p>
                </div>
              </div>
            ))}
          </div>

          <div className="flex justify-center space-x-1 mt-2">
            {[0, 1, 2].map((i) => (
              <div
                key={i}
                className={`w-1.5 h-1.5 rounded-full ${scrollPosition === i ? "bg-blue-500" : "bg-gray-300"}`}
              />
            ))}
          </div>
        </section>

        <section className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">
              Progress Buddies
            </h2>
            <button className="text-blue-500 text-sm flex items-center">
              See all <ChevronRight className="w-4 h-4 ml-1" />
            </button>
          </div>

          <div className="flex space-x-4 overflow-x-auto">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="flex-shrink-0">
                <div className="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
                  <img
                    src={`https://i.pravatar.cc/100?img=${i}`}
                    alt={`Buddy ${i}`}
                  />
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">Reminders</h2>
            <button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
              <Plus className="w-5 h-5" />
            </button>
          </div>

          <div className="space-y-4">
            <div>
              <h3 className="text-sm font-medium text-gray-500 mb-2">Today</h3>
              <div className="space-y-2">
                <div className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 rounded-lg">
                  <div className="w-2 h-2 rounded-full bg-purple-500" />
                  <div>
                    <h4 className="font-medium dark:text-white">
                      Update Fitness Progress
                    </h4>
                    <p className="text-sm text-gray-500">9:00 AM</p>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h3 className="text-sm font-medium text-gray-500 mb-2">
                Tomorrow
              </h3>
              <div className="space-y-2">
                <div className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 rounded-lg">
                  <div className="w-2 h-2 rounded-full bg-emerald-500" />
                  <div>
                    <h4 className="font-medium dark:text-white">
                      Plant Progress Update
                    </h4>
                    <p className="text-sm text-gray-500">2:00 PM</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">Bookmarks</h2>
            <button className="text-blue-500 text-sm flex items-center">
              See all <ChevronRight className="w-4 h-4 ml-1" />
            </button>
          </div>
          <div className="flex space-x-4 overflow-x-auto pb-4">
            {[
              {
                title: "Fitness Journey",
                image:
                  "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b",
                updated: "2h ago",
                saved: "3 days ago", // Added saved property
              },
              {
                title: "Garden Growth",
                image:
                  "https://images.unsplash.com/photo-1523348837708-15d4a09cfac2",
                updated: "5h ago",
                saved: "1 week ago", // Added saved property
              },
              {
                title: "Art Project",
                image:
                  "https://images.unsplash.com/photo-1513364776144-60967b0f800f",
                updated: "8h ago",
                saved: "2 days ago", // Added saved property
              },
            ].map((item, i) => (
              <div
                key={i}
                className="flex-shrink-0 w-48 rounded-lg overflow-hidden shadow-lg"
              >
                <img
                  src={item.image}
                  alt={item.title}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4 bg-white dark:bg-gray-800">
                  <h3 className="font-medium dark:text-white">{item.title}</h3>
                  <p className="text-sm text-gray-500">Saved {item.saved}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">
              Collaborative Projects
            </h2>
            <button className="text-blue-500 text-sm flex items-center">
              See all <ChevronRight className="w-4 h-4 ml-1" />
            </button>
          </div>
          <div className="grid grid-cols-3 gap-4">
            {[
              {
                title: "Construction Progress",
                image:
                  "https://amgrade.com/wp-content/uploads/2020/05/image_1.png",
                members: 5,
              },
              {
                title: "Marketing Campaign",
                image:
                  "https://media.istockphoto.com/id/1292475721/photo/house-construction-framing-gradating-into-finished-kitchen-build.jpg?s=612x612&w=0&k=20&c=Bej7Uvae4UaukW4kNYlAV9CkjP7-JTYfTNuCpB49x88=",
                members: 4,
              },
              {
                title: "Product Development",
                image: "https://via.placeholder.com/150",
                members: 3,
              },
            ].map((item, i) => (
              <div key={i} className="rounded-lg overflow-hidden shadow-lg">
                <div className="relative">
                  <img
                    src={item.image}
                    alt={item.title}
                    className="w-full h-48 object-cover"
                  />
                  <div className="absolute bottom-2 right-2 bg-black/50 rounded-full px-2 py-1">
                    <span className="text-xs text-white">
                      {item.members} members
                    </span>
                  </div>
                </div>
                <div className="p-4 bg-white dark:bg-gray-800">
                  <h3 className="font-medium dark:text-white">{item.title}</h3>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold dark:text-white">
              Achievements
            </h2>
            <button className="text-blue-500 text-sm flex items-center">
              See all <ChevronRight className="w-4 h-4 ml-1" />
            </button>
          </div>
          <div className="grid grid-cols-3 gap-4">
            {[
              {
                title: "30 Day Streak",
                icon: "🔥",
                color: "bg-gradient-to-br from-orange-400 to-pink-500",
              },
              {
                title: "First Collab",
                icon: "🤝",
                color: "bg-gradient-to-br from-blue-400 to-indigo-500",
              },
              {
                title: "Top Creator",
                icon: "⭐",
                color: "bg-gradient-to-br from-purple-400 to-pink-500",
              },
            ].map((badge, i) => (
              <div key={i} className="flex flex-col items-center">
                <div
                  className={`w-16 h-16 rounded-full ${badge.color} flex items-center justify-center text-2xl shadow-lg mb-2`}
                >
                  {badge.icon}
                </div>
                <span className="text-xs text-center font-medium dark:text-white">
                  {badge.title}
                </span>
              </div>
            ))}
          </div>
        </section>
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white/90 dark:bg-black/90 border-t border-gray-200/60 dark:border-gray-800/60 backdrop-blur-lg pb-[env(safe-area-inset-bottom)]">
        <div className="flex justify-around items-center h-[49px]">
          {[
            {
              icon: Home,
              label: "Home",
              active: true,
            },
            {
              icon: LayoutTemplate,
              label: "Project",
            },
            {
              icon: Sparkles,
              label: "Discover",
            },
            {
              icon: Bell,
              label: "Notifications",
            },
            {
              icon: User,
              label: "Profile",
            },
          ].map((item, i) => (
            <button
              key={i}
              className={`flex flex-col items-center space-y-1 px-3 active:opacity-50 transition-transform active:scale-95 ${item.active ? "text-[#007AFF]" : "text-gray-500"}`}
            >
              <item.icon className="w-[22px] h-[22px] stroke-[1.5]" />
              <span className="text-[10px] font-['SF_Pro_Text']">
                {item.label}
              </span>
            </button>
          ))}
        </div>
      </nav>

      <button className="fixed bottom-20 left-1/2 -translate-x-1/2 w-14 h-14 bg-[#007AFF] rounded-[22px] flex items-center justify-center text-white shadow-lg active:opacity-50 active:scale-95 transition-all z-50">
        <Plus className="w-6 h-6" />
      </button>
    </div>
  );
}

render(<HomePage />, document.getElementById("root"));


i wanted to add: css
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--home-bar-bg-color, #fff);
  border-top: 1px solid #ccc;
  padding: 10px;
  z-index: 10;
}

.floating-button {
  background-image: linear-gradient(to bottom, #007AFF, var(--home-bar-bg-color, #fff));
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 56px;
  z-index: 11;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.floating-button:hover {
  transform: scale(1.1);
  background-color: #0069e0;
}

.dark {
  --home-bar-bg-color: #333;
}

.dark .floating-button {
  background-image: linear-gradient(to bottom, #007AFF, var(--home-bar-bg-color));
}

and i got a recommendation to add this one to my main code:
import {
  Search,
  Settings,
  Bell,
  LayoutTemplate,
  Sparkles,
  User,
  Plus,
  ChevronRight,
  Home,
} from "lucide-react";
import React, { useEffect, useState, useRef } from "react";
import { render } from "react-dom";
import './styles.css';

export default function HomePage() {
  const [isDark, setIsDark] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [scrollPosition, setScrollPosition] = useState(0);
  const scrollRef = useRef(null);
  const [isWelcomeVisible, setIsWelcomeVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => setIsLoading(false), 1500);
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const element = scrollRef.current;
      if (element) {
        const scrollWidth = element.scrollWidth - element.clientWidth;
        const scrollLeft = element.scrollLeft;
        const position = scrollLeft / (scrollWidth / 2);
        setScrollPosition(Math.round(position));
      }
    };
    const element = scrollRef.current;
    if (element) {
      element.addEventListener("scroll", handleScroll);
      return () => element.removeEventListener("scroll", handleScroll);
    }
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      setIsWelcomeVisible(currentScrollY < 10);
    };
    window.addEventListener("scroll", handleScroll, {
      passive: true,
    });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen ${isDark ? "dark bg-black" : "bg-[#F2F2F7]"}`}>
      <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-lg bg-white/90 dark:bg-black/90 border-b border-gray-200/60 dark:border-gray-800/60 pt-[env(safe-area-inset-top)]">
        <div className="h-12 px-4 flex items-center justify-between">
          <div className="w-16">
            <button className="p-2 -m-2 rounded-[22px] active:opacity-50 transition-opacity">
              <Search className="w-5 h-5 text-[#007AFF]" />
            </button>
          </div>
          <h1 className="font-['SF_Pro_Display'] text-[17px] font-semibold">
            Pellicule
          </h1>
          <div className="w-16 flex justify-end">
            <button className="p-2 -m-2 rounded-[22px] active:opacity-50 transition-opacity">
              <Settings className="w-5 h-5 text-[#007AFF]" />
            </button>
          </div>
        </div>
      </header>

      <div
        className={`fixed top-14 left-0 right-0 z-40 transform transition-all duration-500 ease-in-out ${isWelcomeVisible ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"}`}
      >
        <div className="mx-2 mb-2 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm w-11/12 sm:w-96 mx-auto">
          <div className="space-y-0.5 text-center py-2">
            <h2 className="text-lg font-medium dark:text-white">
              Welcome back!
            </h2>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              You've captured{" "}
              <span className="text-emerald-500 font-semibold">47</span> moments
              this month
            </p>
          </div>
        </div>
      </div>

      <main className="pt-32 pb-24 max-w-screen-xl mx-auto px-4">
        {/* Sections as before */}
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white/90 dark:bg-black/90 border-t border-gray-200/60 dark:border-gray-800/60 backdrop-blur-lg pb-[env(safe-area-inset-bottom)]">
        {/* Navigation buttons as before */}
      </nav>

      <button className="fixed bottom-20 left-1/2 -translate-x-1/2 w-14 h-14 bg-[#007AFF] rounded-full flex items-center justify-center text-white shadow-lg active:opacity-50 active:scale-95 transition-all z-50 floating-button">
        <Plus className="w-6 h-6" />
      </button>
    </div>
  );
}

render(<HomePage />, document.getElementById("root"));

can you help? im using Vs code, and im new