public: feature pages

apps/public/src/components/feature-card.tsx

@@ -1,7 +1,12 @@
 import { cn } from '@/lib/utils';
 import type { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
 
 interface FeatureCardProps {
+  link?: {
+    href: string;
+    children: React.ReactNode;
+  };
   illustration?: React.ReactNode;
   title: string;
   description: string;
@@ -50,6 +55,7 @@ export function FeatureCard({
   icon: Icon,
   children,
   className,
+  link,
 }: FeatureCardProps) {
   if (illustration) {
     return (
@@ -60,6 +66,14 @@ export function FeatureCard({
           <p className="text-muted-foreground">{description}</p>
         </div>
         {children}
+        {link && (
+          <Link
+            className="mx-6 text-sm text-muted-foreground hover:text-primary transition-colors"
+            href={link.href}
+          >
+            {link.children}
+          </Link>
+        )}
       </FeatureCardContainer>
     );
   }
@@ -72,6 +86,14 @@ export function FeatureCard({
         <p className="text-sm text-muted-foreground">{description}</p>
       </div>
       {children}
+      {link && (
+        <Link
+          className="text-sm text-muted-foreground hover:text-primary transition-colors"
+          href={link.href}
+        >
+          {link.children}
+        </Link>
+      )}
     </FeatureCardContainer>
   );
 }

apps/public/src/components/footer.tsx

@@ -1,6 +1,5 @@
 import { TOOLS } from '@/app/tools/tools';
-import { baseOptions } from '@/lib/layout.shared';
-import { articleSource, compareSource } from '@/lib/source';
+import { articleSource, compareSource, featureSource } from '@/lib/source';
 import { MailIcon } from 'lucide-react';
 import Link from 'next/link';
 import { Logo } from './logo';
@@ -31,6 +30,17 @@ export async function Footer() {
                 },
               ]}
             />
+            <div className="h-5" />
+            <h3 className="font-medium">Features</h3>
+            <Links
+              data={[
+                { title: 'All features', url: '/features' },
+                ...featureSource.map((item) => ({
+                  title: item.short_name,
+                  url: item.url,
+                })),
+              ]}
+            />
           </div>
 
           <div className="col gap-3">

apps/public/src/components/window-image.tsx

@@ -33,7 +33,7 @@ export function WindowImage({
   return (
     <FeatureCardContainer
       className={cn([
-        'overflow-hidden rounded-lg border border-border bg-background shadow-lg/5 relative z-10 [@media(min-width:1100px)]:-mx-16 p-4 md:p-16',
+        'overflow-hidden rounded-lg border border-border bg-foreground/10 shadow-lg/5 relative z-10 [@media(min-width:1100px)]:-mx-16 p-4 md:p-16',
         className,
       ])}
     >