diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx index 902099c..cbaeb7b 100644 --- a/app/(marketing)/layout.tsx +++ b/app/(marketing)/layout.tsx @@ -1,5 +1,5 @@ import Link from "next/link" - +import { AuroraBackground } from "@/components/ui/aurora-background" import { marketingConfig } from "@/config/marketing" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" @@ -14,25 +14,27 @@ export default async function MarketingLayout({ children, }: MarketingLayoutProps) { return ( -
-
-
- - -
-
-
{children}
- -
+ +
+
+
+ + +
+
+
{children}
+ +
+ ) -} +} \ No newline at end of file diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index f880f0c..73c51a5 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -4,6 +4,9 @@ import { env } from "@/env.mjs" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" +import { AuroraBackground } from "@/components/ui/aurora-background" + + async function getGitHubStars(): Promise { try { @@ -63,7 +66,7 @@ export default async function IndexPage() {

@@ -214,6 +217,6 @@ export default async function IndexPage() { )}

- + ) } diff --git a/components/ui/aurora-background.tsx b/components/ui/aurora-background.tsx new file mode 100644 index 0000000..7627178 --- /dev/null +++ b/components/ui/aurora-background.tsx @@ -0,0 +1,54 @@ +"use client"; +import { cn } from "@/lib/utils"; +import React, { ReactNode } from "react"; + +interface AuroraBackgroundProps extends React.HTMLProps { + children: ReactNode; + showRadialGradient?: boolean; +} + +export const AuroraBackground = ({ + className, + children, + showRadialGradient = true, + ...props +}: AuroraBackgroundProps) => { + return ( +
+
+
+
+
+ {children} +
+
+ ); +}; diff --git a/lib/utils.ts b/lib/utils.ts index 2d1675a..2d37e10 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -19,3 +19,4 @@ export function formatDate(input: string | number): string { export function absoluteUrl(path: string) { return `${env.NEXT_PUBLIC_APP_URL}${path}` } + diff --git a/package.json b/package.json index 9d2c775..907b0e9 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "concurrently": "^8.0.1", "contentlayer": "^0.3.1", "date-fns": "^2.29.3", + "framer-motion": "^11.3.21", "lucide-react": "^0.92.0", "next": "13.3.2-canary.13", "next-auth": "4.22.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7eee9e3..b72d344 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -161,6 +161,9 @@ importers: date-fns: specifier: ^2.29.3 version: 2.29.3 + framer-motion: + specifier: ^11.3.21 + version: 11.3.21(react-dom@18.2.0(react@18.2.0))(react@18.2.0) lucide-react: specifier: ^0.92.0 version: 0.92.0(prop-types@15.8.1)(react@18.2.0) @@ -2377,6 +2380,20 @@ packages: fraction.js@4.2.0: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} + framer-motion@11.3.21: + resolution: {integrity: sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} @@ -7082,6 +7099,13 @@ snapshots: fraction.js@4.2.0: {} + framer-motion@11.3.21(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + tslib: 2.5.0 + optionalDependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + fs-constants@1.0.0: {} fs-extra@11.1.1: diff --git a/tailwind.config.js b/tailwind.config.js index 7bddcdd..5e77cf9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,9 @@ const { fontFamily } = require("tailwindcss/defaultTheme") +const { + default: flattenColorPalette, +} = require("tailwindcss/lib/util/flattenColorPalette"); + /** @type {import('tailwindcss').Config} */ module.exports = { content: [ @@ -63,6 +67,14 @@ module.exports = { heading: ["var(--font-heading)", ...fontFamily.sans], }, keyframes: { + aurora: { + from: { + backgroundPosition: "50% 50%, 50% 50%", + }, + to: { + backgroundPosition: "350% 50%, 350% 50%", + }, + }, "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, @@ -73,10 +85,24 @@ module.exports = { }, }, animation: { + aurora: "aurora 60s linear infinite", "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, - plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], -} + plugins: [ + require("tailwindcss-animate"), + require("@tailwindcss/typography"), + function({ addBase, theme }) { + let allColors = flattenColorPalette(theme("colors")); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ":root": newVars, + }); + } + ], +}; \ No newline at end of file