forked from Codehagen/Badget
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Template for new landing (Codehagen#233)
* two new sections * landingpage 50% done
- Loading branch information
Showing
13 changed files
with
1,011 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
Oops, something went wrong.