Template for new landing

apps/www/app/(marketing)/page.tsx

@@ -1,20 +1,28 @@
+import Image from "next/image";
 import Link from "next/link";
 import { auth } from "@clerk/nextjs";
 import Balancer from "react-wrap-balancer";
 
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import {
+  MovingBorderImage,
+  MovingButton,
+} from "@/components/ui/moving-borders";
 import { GetStartedButton } from "@/components/buttons/GetStartedButton";
+import BentoGridSection from "@/components/dashboard/bentogrid";
 import { BusinessLine } from "@/components/dashboard/businessline";
 import CallToActionComponent from "@/components/dashboard/calltoaction";
 import Featuressection from "@/components/dashboard/feautressection";
+import { HeroHighlightSection } from "@/components/dashboard/hero-highlight-section";
+import LampSection from "@/components/dashboard/lamp";
 import { Icons } from "@/components/shared/icons";
 
 export default async function IndexPage() {
   const { userId } = auth();
   return (
     <>
-      <section className="space-y-6 pb-12 pt-16 lg:py-28">
+      <section className="dark:bg-dot-white/[0.2] bg-dot-black/[0.2] space-y-6  lg:py-28 ">
         <div className="container flex max-w-[64rem] flex-col items-center gap-5 text-center">
           <Link
             href="https://twitter.com/codehagen"
@@ -69,15 +77,28 @@ export default async function IndexPage() {
               </p>
             </Link>
           </div>
+          <div className="mt-40">
+            <MovingBorderImage
+              src="https://github.com/projectx-codehagen/Badget/assets/24507211/2c2b8e43-3d18-4b28-b8d0-5dc0cbdb530f"
+              alt="hero"
+            />
+          </div>
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="relative" aria-hidden="true">
+              <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-background pt-[7%]" />
+            </div>
+          </div>
         </div>
       </section>
-      <BusinessLine />
-      <section>
-        <Featuressection />
-      </section>
+
+      {/* <BusinessLine /> */}
+      <BentoGridSection />
+      <HeroHighlightSection />
       <section>
-        <CallToActionComponent />
+        <LampSection />
       </section>
+      <section>{/* <Featuressection /> */}</section>
+      <section>{/* <CallToActionComponent /> */}</section>
       {/* <section>
         <FeatureSection1 />
       </section> */}

apps/www/components/dashboard/bentogrid.tsx

@@ -0,0 +1,83 @@
+import Image from "next/image";
+import { LockClosedIcon } from "@radix-ui/react-icons";
+import { motion } from "framer-motion";
+import {
+  ArrowUpIcon,
+  CloudDownload,
+  CogIcon,
+  FingerprintIcon,
+  ServerIcon,
+} from "lucide-react";
+import { Balancer } from "react-wrap-balancer";
+
+import { BentoGridTemplate } from "./bentogrid/bentogrid";
+
+export default function BentoGridSection() {
+  return (
+    <div className="py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl sm:text-center">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600"></h2>
+
+          <h1
+            className="animate-fade-up font-urban text-3xl font-extrabold tracking-tight opacity-0 sm:text-4xl md:text-5xl lg:text-6xl"
+            style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+          >
+            <Balancer>The new</Balancer>
+          </h1>
+
+          <h1
+            className="relative animate-fade-up bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text font-urban text-3xl font-extrabold tracking-tight text-transparent opacity-0 sm:text-4xl md:text-5xl lg:text-6xl"
+            style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+          >
+            <Balancer>Golden Standard</Balancer>
+          </h1>
+
+          <p
+            className="mt-4 max-w-[42rem] animate-fade-up leading-normal text-muted-foreground opacity-0 sm:text-xl sm:leading-8"
+            style={{ animationDelay: "0.35s", animationFillMode: "forwards" }}
+          >
+            <Balancer>
+              Projectx reimagines financial tracking and optimization with
+              leading-edge AI, offering a new era of precision and ease in
+              personal finance.
+            </Balancer>
+          </p>
+        </div>
+      </div>
+      <div className="relative overflow-hidden pt-16">
+        <BentoGridTemplate />
+      </div>
+    </div>
+  );
+}
+
+/////////////////////////////
+// If we want to make h1 like framer motion, we can use this code:
+// <motion.h1
+//   initial={{ opacity: 0, y: 50 }}  // Start with the element 50 pixels down and transparent
+//   whileInView={{ opacity: 1, y: 0 }}  // Animate to fully opaque and position y:0
+//   transition={{
+//     delay: 0.25,  // Delay the start of the animation
+//     duration: 0.8,  // Duration of the animation
+//     ease: "easeInOut"  // Type of easing
+//   }}
+//   className="animate-fade-up font-urban text-3xl font-extrabold tracking-tight opacity-0 sm:text-4xl md:text-5xl lg:text-6xl"
+//   viewport={{ once: true }}  // Ensures animation only happens once
+// >
+//   <Balancer>The new</Balancer>
+// </motion.h1>
+
+// <motion.h1
+//   initial={{ opacity: 0, y: 50 }}
+//   whileInView={{ opacity: 1, y: 0 }}
+//   transition={{
+//     delay: 0.25,
+//     duration: 0.8,
+//     ease: "easeInOut"
+//   }}
+//   className="relative bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text font-urban text-3xl font-extrabold tracking-tight text-transparent sm:text-4xl md:text-5xl lg:text-6xl"
+//   viewport={{ once: true }}
+// >
+//   <Balancer>Golden Standard</Balancer>
+// </motion.h1>

apps/www/components/dashboard/bentogrid/bento-grid.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+
+export const BentoGrid = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3 ",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const BentoGridItem = ({
+  className,
+  title,
+  description,
+  header,
+  icon,
+}: {
+  className?: string;
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  header?: React.ReactNode;
+  icon?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "group/bento row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-transparent bg-white p-4 shadow-input transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
+        className,
+      )}
+    >
+      {header}
+      <div className="transition duration-200 group-hover/bento:translate-x-2">
+        {icon}
+        <div className="mb-2 mt-2 font-sans font-bold text-neutral-600 dark:text-neutral-200">
+          {title}
+        </div>
+        <div className="font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};