-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introducing Framer motion and hero5 with animated H1
- Loading branch information
1 parent
30c07cd
commit 4708b0e
Showing
9 changed files
with
317 additions
and
31 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,161 @@ | ||
| "use client"; | ||
|
|
||
| import { Hero4 } from "@/blocks/hero/hero4"; | ||
| import { Hero5 } from "@/blocks/hero/hero5"; | ||
| import { CopyCodeButton } from "@/components/copy-code-button"; | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbList, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator, | ||
| } from "@/components/ui/breadcrumb"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; | ||
| import { Terminal } from "lucide-react"; | ||
| import Link from "next/link"; | ||
| import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; | ||
| import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"; | ||
|
|
||
| export default function Block() { | ||
| const code = `import { useEffect, useMemo, useState } from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { MoveRight, PhoneCall } from "lucide-react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| export const Hero5 = () => { | ||
| const [titleNumber, setTitleNumber] = useState(0); | ||
| const titles = useMemo( | ||
| () => ["amazing", "new", "wonderful", "beautiful", "smart"], | ||
| [] | ||
| ); | ||
| useEffect(() => { | ||
| const timeoutId = setTimeout(() => { | ||
| if (titleNumber === titles.length - 1) { | ||
| setTitleNumber(0); | ||
| } else { | ||
| setTitleNumber(titleNumber + 1); | ||
| } | ||
| }, 2000); | ||
| return () => clearTimeout(timeoutId); | ||
| }, [titleNumber, titles]); | ||
| return ( | ||
| <div className="w-full"> | ||
| <div className="container mx-auto"> | ||
| <div className="flex gap-8 py-20 lg:py-40 items-center justify-center flex-col"> | ||
| <div> | ||
| <Button variant="secondary" size="sm" className="gap-4"> | ||
| Read our launch article <MoveRight className="w-4 h-4" /> | ||
| </Button> | ||
| </div> | ||
| <div className="flex gap-4 flex-col"> | ||
| <h1 className="text-5xl md:text-7xl max-w-2xl tracking-tighter text-center font-regular"> | ||
| <span className="text-spektr-cyan-50">This is something</span> | ||
| <span className="relative flex w-full justify-center overflow-hidden text-center md:pb-4 md:pt-1"> | ||
| | ||
| {titles.map((title, index) => ( | ||
| <motion.span | ||
| key={index} | ||
| className="absolute font-semibold" | ||
| initial={{ opacity: 0, y: "-100" }} | ||
| transition={{ type: "spring", stiffness: 50 }} | ||
| animate={ | ||
| titleNumber === index | ||
| ? { | ||
| y: 0, | ||
| opacity: 1, | ||
| } | ||
| : { | ||
| y: titleNumber > index ? -150 : 150, | ||
| opacity: 0, | ||
| } | ||
| } | ||
| > | ||
| {title} | ||
| </motion.span> | ||
| ))} | ||
| </span> | ||
| </h1> | ||
| <p className="text-lg md:text-xl leading-relaxed tracking-tight text-muted-foreground max-w-2xl text-center"> | ||
| Managing a small business today is already tough. Avoid further | ||
| complications by ditching outdated, tedious trade methods. Our | ||
| goal is to streamline SMB trade, making it easier and faster than | ||
| ever. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-row gap-3"> | ||
| <Button size="lg" className="gap-4" variant="outline"> | ||
| Jump on a call <PhoneCall className="w-4 h-4" /> | ||
| </Button> | ||
| <Button size="lg" className="gap-4"> | ||
| Sign up here <MoveRight className="w-4 h-4" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| `; | ||
|
|
||
| return ( | ||
| <div className="min-h-screen w-full flex flex-col"> | ||
| <div className="bg-secondary mt-20 w-full"> | ||
| <div className="container items-center text-secondary-foreground text-sm text-center py-4 flex flex-row justify-between"> | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink asChild> | ||
| <Link href="/">Blocks</Link> | ||
| </BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink asChild> | ||
| <Link href="/#heroes">Heroes</Link> | ||
| </BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Hero5</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| </div> | ||
| </div> | ||
| <div className="flex bg-background justify-center items-start flex-1"> | ||
| <div className="w-full max-w-8xl relative"> | ||
| <div className="absolute top-8 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-row gap-2"> | ||
| <CopyCodeButton code={code} /> | ||
| <Dialog> | ||
| <DialogTrigger asChild> | ||
| <Button variant="outline" className="gap-2"> | ||
| <Terminal className="w-4 h-4" /> | ||
| Show code | ||
| </Button> | ||
| </DialogTrigger> | ||
| <DialogContent className="max-w-[800px]"> | ||
| <SyntaxHighlighter | ||
| language="javascript" | ||
| className="rounded-md max-h-[70vh]" | ||
| style={vscDarkPlus} | ||
| > | ||
| {code} | ||
| </SyntaxHighlighter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| </div> | ||
| <div className="rounded-md bg-background"> | ||
| <Hero5 /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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
Oops, something went wrong.