⬆️ upgrading project version

app/[username]/profile/page.tsx

@@ -117,9 +117,10 @@ export async function generateMetadata(
 
 }
 
-export default async function ProfilePage({ params }: { params: { username: string } }) {
+export default async function ProfilePage({ params }: { params: Promise<{ username: string }> }) {
+    const { username } = await params;
     const currentUser = await auth();
-    const profile = await getUser(params.username, currentUser?.user?.name === params.username);
+    const profile = await getUser(username, currentUser?.user?.name === username);
     const isOwnProfile = currentUser?.user && profile && currentUser.user?.id === profile.id;
 
     if (!profile) redirect("/404");
@@ -185,7 +186,7 @@ export default async function ProfilePage({ params }: { params: { username: stri
                                                                 className="object-cover w-full h-full transition-transform group-hover:scale-105"
                                                             />
                                                         </AspectRatio>
-                                                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                                                        <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                                                             <div className="absolute bottom-4 left-4">
                                                                 <p className="text-white/80 text-sm">
                                                                     {new Date(image.createdAt).toLocaleDateString()}

app/about/showcase.tsx

@@ -62,7 +62,7 @@ export function ProjectShowcase() {
                                 className="object-cover w-full h-full transition-transform group-hover:scale-105"
                             />
                         </AspectRatio>
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                        <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                             <div className="absolute bottom-4 left-4">
                                 <h3 className="text-white font-semibold">{project.title}</h3>
                                 <p className="text-white/80 text-sm">Click to learn more</p>

app/api/save/route.ts

@@ -100,7 +100,7 @@ async function uploadImageToCloudflare(file: FormData, userId: string, viz: "PUB
         }
 
         const processedFormData = new FormData();
-        processedFormData.append("file", new Blob([fileBuffer]), `image.${fileType.toLowerCase()}`);
+        processedFormData.append("file", new Blob([new Uint8Array(fileBuffer)]), `image.${fileType.toLowerCase()}`);
         processedFormData.append("requireSignedURLs", "false");
 
         const response = await fetch(

app/community/image-gallery.tsx

@@ -51,8 +51,8 @@ export function ImageGallery({ images, currentUserId, title, description }: Imag
                     className="flex gap-[6px]"
                     columnClassName="flex flex-col gap-[2px] bg-background"
                 >
-                    <div className="relative bg-gradient-to-br from-primary/25 to-background rounded-lg p-8 flex flex-col justify-center border shadow-lg border-primary/20 mb-1">
-                        <h1 className="text-4xl font-bold tracking-tight mb-4 bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent">
+                    <div className="relative bg-linear-to-br from-primary/25 to-background rounded-lg p-8 flex flex-col justify-center border shadow-lg border-primary/20 mb-1">
+                        <h1 className="text-4xl font-bold tracking-tight mb-4 bg-linear-to-br from-foreground to-foreground/70 bg-clip-text text-transparent">
                             {title}
                         </h1>
                         <p className="text-muted-foreground text-base">
@@ -76,7 +76,7 @@ export function ImageGallery({ images, currentUserId, title, description }: Imag
                     {images.map((image, index) => (
                         <div
                             key={image.id}
-                            className="relative cursor-pointer outline-none group"
+                            className="relative cursor-pointer outline-hidden group"
                             onClick={() => setSelectedIndex(index)}
                             tabIndex={0}
                             role="button"
@@ -88,7 +88,7 @@ export function ImageGallery({ images, currentUserId, title, description }: Imag
                                 className="w-full object-cover rounded-sm"
                                 draggable={false}
                             />
-                            <div className="absolute inset-0 rounded-sm bg-gradient-to-t from-black/60 via-black/0 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                            <div className="absolute inset-0 rounded-sm bg-linear-to-t from-black/60 via-black/0 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                                 <div className="absolute bottom-4 left-4 right-4">
                                     <div className="flex items-center gap-2">
                                         <Avatar className="h-8 w-8">
@@ -238,7 +238,7 @@ export default function ImageViewer({ images, selectedIndex, setSelectedIndex }:
                         </div>
 
                         <div className="mt-4 flex items-center gap-3">
-                            <Link href={`/${selectedImage.user.name}/profile`} className="outline-none">
+                            <Link href={`/${selectedImage.user.name}/profile`} className="outline-hidden">
                                 <Avatar className="h-8 w-8">
                                     <AvatarImage src={selectedImage.user.image ?? ""} />
                                     <AvatarFallback>
@@ -249,7 +249,7 @@ export default function ImageViewer({ images, selectedIndex, setSelectedIndex }:
                             <div>
                                 <Link
                                     href={`/${encodeURIComponent(selectedImage.user.name ?? "")}/profile`}
-                                    className="text-sm font-medium text-white hover:underline outline-none"
+                                    className="text-sm font-medium text-white hover:underline outline-hidden"
                                 >
                                     {selectedImage.user.name}
                                 </Link>

app/studio/page.tsx

@@ -1,8 +1,7 @@
 import { StudioNavbar } from "@/components/navigation/studio";
+import Canvas from "@/components/studio/canvas-loader";
 import { Sidebar } from "@/components/sidebar";
-import Spinner from "@/components/spinner/spinner";
 import { Metadata } from "next";
-import dynamic from "next/dynamic";
 
 export const metadata: Metadata = {
     generator: 'Next.js Baby!',
@@ -49,14 +48,6 @@ export const metadata: Metadata = {
     },
 }
 
-const Canvas = dynamic(() => import('@/components/studio/studio-main'), {
-    ssr: false,
-    loading: () =>
-        <div className="flex-1 flex items-center justify-center h-full w-full">
-            <Spinner />
-        </div>
-})
-
 export default function StudioPage() {
     {/* Remember this select-none for the future if we dont like it */}
     return (

components/animated-shniy-text.tsx

@@ -24,10 +24,10 @@ const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
         "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
 
         // Shine effect
-        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+        "animate-shiny-text bg-clip-text bg-no-repeat bg-position-[0_0] bg-size-[var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
 
         // Shine gradient
-        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white",
+        "bg-linear-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white",
 
         className,
       )}

components/color-picker.tsx

@@ -46,7 +46,7 @@ export default function ColorPicker({
                             setColor(color)
                             onChange(color)
                         }}
-                        className="h-full w-full rounded-md border-[#22262b] bg-primary/10 px-3 py-3 text-center text-gray-100 focus:border-[#8e8ece] focus:outline-none focus:ring-1 focus:ring-[#8e8ece] md:text-sm"
+                        className="h-full w-full rounded-md border-[#22262b] bg-primary/10 px-3 py-3 text-center text-gray-100 focus:border-[#8e8ece] focus:outline-hidden focus:ring-1 focus:ring-[#8e8ece] md:text-sm"
                     />
                 </div>
             </div>

components/marketing/banner.tsx

@@ -71,11 +71,11 @@ export function Banner({
   if (!show) return null
 
   return (
-    <div className="relative isolate flex flex-col justify-between gap-3 overflow-hidden rounded-lg border border-green-600/15 bg-gradient-to-r from-lime-100/80 to-emerald-100/80 py-3 pl-4 pr-12 sm:flex-row sm:items-center sm:py-2">
+    <div className="relative isolate flex flex-col justify-between gap-3 overflow-hidden rounded-lg border border-green-600/15 bg-linear-to-r from-lime-100/80 to-emerald-100/80 py-3 pl-4 pr-12 sm:flex-row sm:items-center sm:py-2">
       <Grid
         cellSize={13}
         patternOffset={[0, -1]}
-        className="text-black/30 mix-blend-overlay [mask-image:linear-gradient(to_right,black,transparent)] md:[mask-image:linear-gradient(to_right,black_60%,transparent)]"
+        className="text-black/30 mix-blend-overlay mask-[linear-gradient(to_right,black,transparent)] md:mask-[linear-gradient(to_right,black_60%,transparent)]"
       />
 
       <div className="flex items-center gap-3">

components/marketing/call-to-action.tsx

@@ -43,11 +43,11 @@ export function CallToAction() {
                                         </Link>
                                     </Button>
 
-                                    <div className="w-[40rem] h-40 relative mt-4">
-                                        <div className="opacity-30 absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
-                                        <div className="opacity-30 absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
-                                        <div className="opacity-30 absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
-                                        <div className="opacity-30 absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
+                                    <div className="w-160 h-40 relative mt-4">
+                                        <div className="opacity-30 absolute inset-x-20 top-0 bg-linear-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-xs" />
+                                        <div className="opacity-30 absolute inset-x-20 top-0 bg-linear-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
+                                        <div className="opacity-30 absolute inset-x-60 top-0 bg-linear-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-xs" />
+                                        <div className="opacity-30 absolute inset-x-60 top-0 bg-linear-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
                                         <SparklesCore
                                             background="transparent"
                                             minSize={0.4}
@@ -57,7 +57,7 @@ export function CallToAction() {
                                             particleColor={resolvedTheme === 'dark' ? '#fff' : '#2218de'}
                                         />
                                         {/* prevent weird ass edges */}
-                                        <div className="absolute inset-0 w-full h-full bg-background [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
+                                        <div className="absolute inset-0 w-full h-full bg-background mask-[radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
                                     </div>
                                 </div>
                             </div>
@@ -70,7 +70,7 @@ export function CallToAction() {
                         repeatDelay={1}
                         className={cn(
                             "-translate-y-40",
-                            "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
+                            "mask-[radial-gradient(500px_circle_at_center,white,transparent)]",
                             "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
                         )}
                     />

components/marketing/features/card.tsx

@@ -31,7 +31,7 @@ interface AlternateFeatureCardProps {
 
 export const FeatureCardAlternate = ({ title, description, icon }: AlternateFeatureCardProps) => {
     return (
-        <div className="flex flex-col gap-5 border border-white border-opacity-10 p-4 bg-white dark:bg-background/20 rounded-xl shadow-xl border-gray-200/50 dark:border-gray-700/50 backdrop-blur-xl w-full max-w-[15rem] min-h-[15rem] justify-center">
+        <div className="flex flex-col gap-5 border border-white border-opacity-10 p-4 bg-white dark:bg-background/20 rounded-xl shadow-xl border-gray-200/50 dark:border-gray-700/50 backdrop-blur-xl w-full max-w-60 min-h-60 justify-center">
             <div className="p-4 bg-primary w-fit flex items-center justify-center rounded-md border-t border-t-white border-opacity-10 border-r border-r-white">
                 {icon}
             </div>

components/marketing/features/main.tsx

@@ -3,7 +3,7 @@ import { FeatureGrid } from './grid';
 
 export function Features() {
     return (
-        <section id="features" className="relative container mx-auto px-4 pt-[5rem] mb-12">
+        <section id="features" className="relative container mx-auto px-4 pt-20 mb-12">
             <div className="flex flex-col text-center rounded-md gap-4 items-center">
                 <div>
                     <Badge className='py-1 rounded-2xl px-4 text-lg bg-primary/70'>Features</Badge>

components/marketing/floating-icons.tsx

@@ -4,37 +4,37 @@ export function FloatingElements() {
     return (
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
             <div className="invisible lg:visible absolute top-32 left-[30%] md:left-[35%] opacity-0 animate-fade-in-1">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-slow">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-slow">
                     <PenTool className="w-6 h-6 text-blue-500" />
                 </div>
             </div>
 
             <div className="absolute top-32 md:top-28 right-[7%] md:right-[32%] opacity-0 animate-fade-in-2">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-delayed">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-delayed">
                     <Share2 className="w-6 h-6 text-blue-400" />
                 </div>
             </div>
 
             <div className="invisible lg:visible absolute translate-x-24 top-96 md:top-96 right-[10%] md:right-[15%] opacity-0 animate-fade-in-3">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-slow">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-slow">
                     <AppWindowMacIcon className="w-6 h-6 text-blue-500" />
                 </div>
             </div>
 
-            <div className="invisible lg:visible absolute top-[23rem] md:top-96 left-[10%] md:left-[20%] opacity-0 animate-fade-in-4">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-slow">
+            <div className="invisible lg:visible absolute top-92 md:top-96 left-[10%] md:left-[20%] opacity-0 animate-fade-in-4">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-slow">
                     <Frame className="w-6 h-6 text-blue-400" />
                 </div>
             </div>
 
             <div className="absolute top-20 md:top-56 left-[10%] md:left-[15%] opacity-0 animate-fade-in-1">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-delayed">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-delayed">
                     <Scan className="w-6 h-6 text-blue-400" />
                 </div>
             </div>
 
             <div className="invisible lg:visible absolute top-72 md:top-52 right-[15%] md:right-[17%] opacity-0 animate-fade-in-3">
-                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-slow">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-slow">
                     <Wallpaper className="w-6 h-6 text-blue-500" />
                 </div>
             </div>
@@ -43,20 +43,20 @@ export function FloatingElements() {
             {/*
         omit - for now since its in the way of the prod screenshot
       <div className="absolute bottom-16 md:bottom-20 left-[20%] md:left-[25%] opacity-0 animate-fade-in-3">
-        <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float">
+        <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float">
           <Image className="w-6 h-6 text-white dark:text-gray-200" />
         </div>
       </div>
 
       <div className="absolute bottom-32 md:bottom-40 right-[10%] md:right-[15%] opacity-0 animate-fade-in-4">
-        <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur p-3 rounded-2xl shadow-xl animate-float-fast">
+        <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-3 rounded-2xl shadow-xl animate-float-fast">
           <Zap className="w-6 h-6 text-blue-300" />
         </div>
       </div> */}
 
-            <div className="absolute top-1/4 -left-12 w-36 h-px animate-pulse bg-gradient-to-r from-transparent via-blue-500 to-transparent rotate-12" />
-            <div className="absolute top-1/3 -right-12 w-36 h-px animate-pulse delay-300 bg-gradient-to-l from-transparent via-blue-400 to-transparent -rotate-12" />
-            <div className="absolute bottom-1/4 -left-12 w-36 h-px animate-pulse delay-700 bg-gradient-to-r from-transparent via-blue-300 to-transparent rotate-6" />
+            <div className="absolute top-1/4 -left-12 w-36 h-px animate-pulse bg-linear-to-r from-transparent via-blue-500 to-transparent rotate-12" />
+            <div className="absolute top-1/3 -right-12 w-36 h-px animate-pulse delay-300 bg-linear-to-l from-transparent via-blue-400 to-transparent -rotate-12" />
+            <div className="absolute bottom-1/4 -left-12 w-36 h-px animate-pulse delay-700 bg-linear-to-r from-transparent via-blue-300 to-transparent rotate-6" />
 
             <div className="absolute top-1/2 left-1/4 w-1 h-1 rounded-full bg-blue-500 animate-ping" />
             <div className="absolute bottom-1/3 right-1/4 w-1 h-1 rounded-full bg-blue-300 animate-ping delay-500" />