-
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.
- Loading branch information
1 parent
d24e206
commit e96d8ff
Showing
21 changed files
with
914 additions
and
70 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,28 @@ | ||
| // `app/page.tsx` is the UI for the `/` URL | ||
| export default function Page() { | ||
| return <h1>Hello, about page!</h1>; | ||
| import Image from "next/image"; | ||
| import FlipperComponent from "../components/FlipComponent"; | ||
| import React from "react"; | ||
| import { FlipWordsDemo } from "../components/FlipWords"; | ||
| import { AuroraBackgroundHeroSection } from "../components/BackgroundAurra"; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <main className="antialiased overflow-hidden"> | ||
| <div className=""></div> | ||
| <AuroraBackgroundHeroSection /> | ||
| <div className=""> | ||
| <FlipWordsDemo /> | ||
| </div> | ||
| <section className=" m-2 bg-white dark:bg-black dark:text-white"> | ||
| <div className=""> | ||
| <div className="flex justify-center items-center min-h-screen bg-gray-100"> | ||
| <FlipperComponent /> | ||
| </div> | ||
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo dolorem | ||
| exercitationem quam ad reiciendis perspiciatis dignissimos ea | ||
| assumenda ducimus quasi, non vel quidem, suscipit eius, illo | ||
| voluptatibus eaque inventore. Veritatis. | ||
| </div> | ||
| </section> | ||
| </main> | ||
| ); | ||
| } |
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,18 @@ | ||
| // components/DarkModeToggle.tsx | ||
| "use client"; | ||
| import { useTheme } from "../context/ThemeContext"; | ||
|
|
||
| const DarkModeToggle = () => { | ||
| const { theme, toggleTheme } = useTheme(); | ||
|
|
||
| return ( | ||
| <button | ||
| onClick={toggleTheme} | ||
| className="bg-black dark:bg-white rounded-full w-fit text-white dark:text-black px-4 py-2" | ||
| > | ||
| Toggle {theme === "light" ? "Dark" : "Light"} Mode | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default DarkModeToggle; |
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
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,31 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { LinkPreview } from "@/components/ui/link-preview"; | ||
|
|
||
| export function LinkPreviewDemo() { | ||
| return ( | ||
| <div className="flex justify-center items-center h-[40rem] flex-col px-4"> | ||
| <p className="text-neutral-500 dark:text-neutral-400 text-xl md:text-3xl max-w-3xl mx-auto mb-10"> | ||
| <LinkPreview url="https://tailwindcss.com" className="font-bold"> | ||
| Tailwind CSS | ||
| </LinkPreview>{" "} | ||
| and{" "} | ||
| <LinkPreview url="https://framer.com/motion" className="font-bold"> | ||
| Framer Motion | ||
| </LinkPreview>{" "} | ||
| are a great way to build modern websites. | ||
| </p> | ||
| <p className="text-neutral-500 dark:text-neutral-400 text-xl md:text-3xl max-w-3xl mx-auto"> | ||
| Visit{" "} | ||
| <LinkPreview | ||
| url="https://ui.aceternity.com" | ||
| className="font-bold bg-clip-text text-transparent bg-gradient-to-br from-purple-500 to-pink-500" | ||
| > | ||
| Aceternity UI | ||
| </LinkPreview>{" "} | ||
| for amazing Tailwind and Framer Motion components. | ||
| </p> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // `app/page.tsx` is the UI for the `/` URL | ||
| export function Footer() { | ||
| return <h1>Hello, footer page!</h1>; | ||
| } | ||
| export default Footer; |
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,157 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { LinkPreview } from "@/components/ui/link-preview"; | ||
|
|
||
| export function LinkPreviewDemo() { | ||
| return ( | ||
| <div className="flex justify-center items-center h-[40rem] flex-col px-4"> | ||
| <p className="text-neutral-500 dark:text-neutral-400 text-xl md:text-3xl max-w-3xl mx-auto mb-10"> | ||
| <LinkPreview url="https://tailwindcss.com" className="font-bold"> | ||
| Tailwind CSS | ||
| </LinkPreview>{" "} | ||
| and{" "} | ||
| <LinkPreview url="https://framer.com/motion" className="font-bold"> | ||
| Framer Motion | ||
| </LinkPreview>{" "} | ||
| are a great way to build modern websites. | ||
| </p> | ||
| <p className="text-neutral-500 dark:text-neutral-400 text-xl md:text-3xl max-w-3xl mx-auto"> | ||
| Visit{" "} | ||
| <LinkPreview | ||
| url="https://ui.aceternity.com" | ||
| className="font-bold bg-clip-text text-transparent bg-gradient-to-br from-purple-500 to-pink-500" | ||
| > | ||
| Aceternity UI | ||
| </LinkPreview>{" "} | ||
| for amazing Tailwind and Framer Motion components. | ||
| </p> | ||
| </div> | ||
| ); | ||
| } | ||
| width = 200, | ||
| height = 125, | ||
| quality = 50, | ||
| layout = "fixed", | ||
| isStatic = false, | ||
| imageSrc = "", | ||
| }: LinkPreviewProps) => { | ||
| let src; | ||
| if (!isStatic) { | ||
| const params = encode({ | ||
| url, | ||
| screenshot: true, | ||
| meta: false, | ||
| embed: "screenshot.url", | ||
| colorScheme: "dark", | ||
| "viewport.isMobile": true, | ||
| "viewport.deviceScaleFactor": 1, | ||
| "viewport.width": width * 3, | ||
| "viewport.height": height * 3, | ||
| }); | ||
| src = `https://api.microlink.io/?${params}`; | ||
| } else { | ||
| src = imageSrc; | ||
| } | ||
|
|
||
| const [isOpen, setOpen] = React.useState(false); | ||
|
|
||
| const [isMounted, setIsMounted] = React.useState(false); | ||
|
|
||
| React.useEffect(() => { | ||
| setIsMounted(true); | ||
| }, []); | ||
|
|
||
| const springConfig = { stiffness: 100, damping: 15 }; | ||
| const x = useMotionValue(0); | ||
|
|
||
| const translateX = useSpring(x, springConfig); | ||
|
|
||
| const handleMouseMove = (event: any) => { | ||
| const targetRect = event.target.getBoundingClientRect(); | ||
| const eventOffsetX = event.clientX - targetRect.left; | ||
| const offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2; // Reduce the effect to make it subtle | ||
| x.set(offsetFromCenter); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {isMounted ? ( | ||
| <div className="hidden"> | ||
| <Image | ||
| src={src} | ||
| width={width} | ||
| height={height} | ||
| quality={quality} | ||
| layout={layout} | ||
| priority={true} | ||
| alt="hidden image" | ||
| /> | ||
| </div> | ||
| ) : null} | ||
|
|
||
| <HoverCardPrimitive.Root | ||
| openDelay={50} | ||
| closeDelay={100} | ||
| onOpenChange={(open) => { | ||
| setOpen(open); | ||
| }} | ||
| > | ||
| <HoverCardPrimitive.Trigger | ||
| onMouseMove={handleMouseMove} | ||
| className={cn("text-black dark:text-white", className)} | ||
| href={url} | ||
| > | ||
| {children} | ||
| </HoverCardPrimitive.Trigger> | ||
|
|
||
| <HoverCardPrimitive.Content | ||
| className="[transform-origin:var(--radix-hover-card-content-transform-origin)]" | ||
| side="top" | ||
| align="center" | ||
| sideOffset={10} | ||
| > | ||
| <AnimatePresence> | ||
| {isOpen && ( | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 20, scale: 0.6 }} | ||
| animate={{ | ||
| opacity: 1, | ||
| y: 0, | ||
| scale: 1, | ||
| transition: { | ||
| type: "spring", | ||
| stiffness: 260, | ||
| damping: 20, | ||
| }, | ||
| }} | ||
| exit={{ opacity: 0, y: 20, scale: 0.6 }} | ||
| className="shadow-xl rounded-xl" | ||
| style={{ | ||
| x: translateX, | ||
| }} | ||
| > | ||
| <Link | ||
| href={url} | ||
| className="block p-1 bg-white border-2 border-transparent shadow rounded-xl hover:border-neutral-200 dark:hover:border-neutral-800" | ||
| style={{ fontSize: 0 }} | ||
| > | ||
| <Image | ||
| src={isStatic ? imageSrc : src} | ||
| width={width} | ||
| height={height} | ||
| quality={quality} | ||
| layout={layout} | ||
| priority={true} | ||
| className="rounded-lg" | ||
| alt="preview image" | ||
| /> | ||
| </Link> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </HoverCardPrimitive.Content> | ||
| </HoverCardPrimitive.Root> | ||
| </> | ||
| ); | ||
| }; |
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
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
Oops, something went wrong.