feat : update features eleven and twelve with layout adjustments and new block entry

Author: Meschacirung

app/preview/features/eleven/page.tsx

@@ -83,7 +83,7 @@ export default function Features() {
                         <CardContent className="relative h-fit px-6 pb-6 md:px-12 md:pb-12">
                             <div className="grid grid-cols-4 gap-2 md:grid-cols-6">
                                 <div className="rounded-(--radius) aspect-square border border-dashed"></div>
-                                <div className="rounded-(--radius) bg-muted/50 aspect-square border p-4">
+                                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
                                     <img
                                         className="m-auto size-8 invert dark:invert-0"
                                         src="https://oxymor-ns.tailus.io/logos/linear.svg"
@@ -93,7 +93,7 @@ export default function Features() {
                                     />
                                 </div>
                                 <div className="rounded-(--radius) aspect-square border border-dashed"></div>
-                                <div className="rounded-(--radius) bg-muted/50 aspect-square border p-4">
+                                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
                                     <img
                                         className="m-auto size-8 invert dark:invert-0"
                                         src="https://oxymor-ns.tailus.io/logos/netlify.svg"
@@ -103,7 +103,7 @@ export default function Features() {
                                     />
                                 </div>
                                 <div className="rounded-(--radius) aspect-square border border-dashed"></div>
-                                <div className="rounded-(--radius) bg-muted/50 aspect-square border p-4">
+                                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
                                     <img
                                         className="m-auto size-8 invert dark:invert-0"
                                         src="https://oxymor-ns.tailus.io/logos/github.svg"

app/preview/features/twelve/page.tsx

@@ -87,7 +87,7 @@ export default function Features() {
                         <div className="aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl">
                             <AnimatePresence mode="wait">
                                 <motion.div
-                                    key={activeItem}
+                                    key={`${activeItem}-id`}
                                     initial={{ opacity: 0, y: 6, scale: 0.98 }}
                                     animate={{ opacity: 1, y: 0, scale: 1 }}
                                     exit={{ opacity: 0, y: 6, scale: 0.98 }}

data/blocks.ts

@@ -169,13 +169,20 @@ export const blocks: Block[] = [
         preview: '/preview/features/ten',
         code: loadCode('app/preview/features/ten/page.tsx'),
     },
-{
+    {
         slug: 'features',
         title: 'eleven',
         category: 'features',
         preview: '/preview/features/eleven',
         code: loadCode('app/preview/features/eleven/page.tsx'),
     },
+    {
+        slug: 'features',
+        title: 'twelve',
+        category: 'features',
+        preview: '/preview/features/twelve',
+        code: loadCode('app/preview/features/twelve/page.tsx'),
+    },
     {
         slug: 'content',
         title: 'one',