Add branding images

app/layout.tsx

@@ -10,23 +10,42 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://p2ns.space'),
   title: "P2NS - Peer-to-Peer Decentralized DNS System",
   description: "A robust, firewall-resistant peer-to-peer DNS resolution system that operates independently of centralized DNS infrastructure.",
   keywords: ["P2P", "DNS", "decentralized", "peer-to-peer", "NAT traversal", "firewall", "Holesail", "Hyperswarm", "Corestore"],
   authors: [{ name: "Raven Scott" }],
   creator: "Raven Scott",
   publisher: "P2NS",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "32x32" },
+      { url: "/branding/p2ns-favicon-32.png", sizes: "32x32", type: "image/png" },
+      { url: "/branding/p2ns-favicon-192.png", sizes: "192x192", type: "image/png" },
+    ],
+    apple: "/branding/p2ns-favicon-192.png",
+  },
+  manifest: "/site.webmanifest",
   openGraph: {
     title: "P2NS - Peer-to-Peer Decentralized DNS System",
     description: "A robust, firewall-resistant peer-to-peer DNS resolution system",
     url: "https://p2ns.space",
     siteName: "P2NS",
     type: "website",
+    images: [
+      {
+        url: "/branding/p2ns-primary-horizontal.png",
+        width: 1200,
+        height: 630,
+        alt: "P2NS — Peer-to-Peer Name System",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "P2NS - Peer-to-Peer Decentralized DNS System",
     description: "A robust, firewall-resistant peer-to-peer DNS resolution system",
+    images: ["/branding/p2ns-primary-horizontal.png"],
   },
   robots: {
     index: true,

components/layout/Footer.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Github, ExternalLink } from 'lucide-react';
 import { legalDocuments } from '@/lib/legal/documents';
+import BrandLogo from '@/components/ui/BrandLogo';
 
 export default function Footer() {
   const primaryLegal = legalDocuments.filter((d) =>
@@ -12,9 +13,7 @@ export default function Footer() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
           <div className="col-span-1 md:col-span-2 lg:col-span-2">
-            <h3 className="text-lg font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+            <BrandLogo href="/" iconSize={28} textClassName="text-lg" className="mb-4" />
-              P2NS
-            </h3>
             <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
               A robust, firewall-resistant peer-to-peer DNS resolution system that operates independently of centralized DNS infrastructure.
             </p>

components/layout/Navigation.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Menu, X, Ship } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import PearsIcon from '@/components/ui/PearsIcon';
+import BrandLogo from '@/components/ui/BrandLogo';
 
 const navItems = [
   { name: 'Home', href: '/' },
@@ -28,11 +29,7 @@ export default function Navigation() {
     <nav className="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
-          <Link href="/" className="flex items-center space-x-2">
+          <BrandLogo />
-            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              P2NS
-            </span>
-          </Link>
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-8">

components/sections/Hero.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { ArrowRight, Zap } from 'lucide-react';
 import { motion } from 'framer-motion';
 
@@ -14,6 +15,15 @@ export default function Hero() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
+            <div className="flex justify-center mb-6">
+              <Image
+                src="/branding/p2ns-icon.png"
+                alt=""
+                width={56}
+                height={56}
+                priority
+              />
+            </div>
             <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
               Decentralized DNS for the
               <span className="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">

components/ui/BrandLogo.tsx

@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+type BrandLogoProps = {
+  href?: string;
+  showText?: boolean;
+  iconSize?: number;
+  textClassName?: string;
+  className?: string;
+};
+
+export default function BrandLogo({
+  href = '/',
+  showText = true,
+  iconSize = 32,
+  textClassName = 'text-2xl',
+  className = '',
+}: BrandLogoProps) {
+  const content = (
+    <>
+      <Image
+        src="/branding/p2ns-icon.png"
+        alt=""
+        width={iconSize}
+        height={iconSize}
+        className="shrink-0"
+        priority
+      />
+      {showText ? (
+        <span
+          className={`font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent ${textClassName}`}
+        >
+          P2NS
+        </span>
+      ) : null}
+    </>
+  );
+
+  const classes = `inline-flex items-center gap-2 ${className}`.trim();
+
+  if (href) {
+    return (
+      <Link href={href} className={classes}>
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className={classes}>{content}</div>;
+}

public/site.webmanifest

@@ -0,0 +1,29 @@
+{
+  "name": "P2NS - Peer-to-Peer Decentralized DNS",
+  "short_name": "P2NS",
+  "description": "A robust, firewall-resistant peer-to-peer DNS resolution system",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0a0e1a",
+  "theme_color": "#0a0e1a",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/branding/p2ns-favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/branding/p2ns-favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "lang": "en"
+}