You're almost done.
diff --git a/core/components/LandingPage/ProjectCarousel.tsx b/core/components/LandingPage/ProjectCarousel.tsx
new file mode 100644
index 0000000..e3aa3a4
--- /dev/null
+++ b/core/components/LandingPage/ProjectCarousel.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { getPublicProjects } from "@/actions/db/project";
+import { formatTimeAgo } from "@/lib/time";
+import { useTheme } from "next-themes";
+
+export default function ProjectShowcase({
+ publicProjects,
+}: {
+ publicProjects: Exclude>, null>;
+}) {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const { theme } = useTheme();
+ const [intervalId, setIntervalId] = useState(null);
+
+ const nextProject = useCallback(() => {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % publicProjects.length);
+ }, [publicProjects.length]);
+
+ const prevProject = useCallback(() => {
+ setCurrentIndex(
+ (prevIndex) =>
+ (prevIndex - 1 + publicProjects.length) % publicProjects.length,
+ );
+ }, [publicProjects.length]);
+
+ useEffect(() => {
+ const id = setInterval(nextProject, 5000);
+ setIntervalId(id);
+ return () => clearInterval(id);
+ }, [nextProject]);
+
+ const handleMouseEnter = () => {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+ };
+
+ const handleMouseLeave = () => {
+ const id = setInterval(nextProject, 5000);
+ setIntervalId(id);
+ };
+
+ return (
+
+
+
+
+ {publicProjects[currentIndex].name}
+
+
+ Deployed {formatTimeAgo(publicProjects[currentIndex].createdAt)}
+
+
+
+
+
+
+
+
+
+
+ {publicProjects.map((_, index) => (
+
+
+ );
+}
diff --git a/core/components/LandingPage/index.tsx b/core/components/LandingPage/index.tsx
new file mode 100644
index 0000000..f2ae64c
--- /dev/null
+++ b/core/components/LandingPage/index.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { getPublicProjects } from "@/actions/db/project";
+import { GetStartedButton } from "@/components/Home/getStartedButton";
+import ProjectCarousel from "./ProjectCarousel";
+import { faqs, features, steps, whyChoseUs } from "@/lib/landing";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+
+export default function LandingPage({
+ publicProjects,
+}: {
+ publicProjects: Exclude>, null>;
+}) {
+ const { theme } = useTheme();
+
+ const themeColors = {
+ light: {
+ background: "bg-white",
+ text: "text-gray-600",
+ button: "bg-blue-600 text-white hover:bg-blue-700",
+ card: "bg-white",
+ border: "border-gray-200",
+ },
+ dark: {
+ background: "bg-black",
+ text: "text-gray-300",
+ button: "bg-blue-500 text-white hover:bg-blue-600",
+ card: "bg-gray-800",
+ border: "border-gray-700",
+ },
+ };
+
+ const currentTheme = themeColors[theme === "dark" ? "dark" : "light"];
+
+ return (
+ <>
+
+
+
+ Deploy Your React Projects with Ease
+
+
+ Streamline your deployment process, customize your project, and
+ share with confidence.
+
+
+
+
+
+
+ Some Projects deployed by our users
+
+
+
+
+
+ {features.map((feature, index) => (
+
+
+
{feature.title}
+
{feature.description}
+
+ ))}
+
+
+
+ How It Works
+
+ {steps.map((item, index) => (
+
+
+ {item.step}
+
+
{item.title}
+
{item.description}
+
+ ))}
+
+
+
+
+ Why Choose DeployIt?
+
+ {whyChoseUs.map((feature, index) => (
+
+
+
+
+ {feature.title}
+
+
{feature.description}
+
+
+ ))}
+
+
+
+
+
+ Frequently Asked Questions
+
+
+ {faqs.map((faq, index) => (
+
+
{faq.question}
+
{faq.answer}
+
+ ))}
+
+
+
+
+
+ >
+ );
+}
diff --git a/core/components/Navbar/index.tsx b/core/components/Navbar/index.tsx
index d0c0fa1..d4f1c77 100644
--- a/core/components/Navbar/index.tsx
+++ b/core/components/Navbar/index.tsx
@@ -24,78 +24,82 @@ export default function Navbar() {
};
return (
-