feat(app): finalize styling

.browserslistrc

@@ -0,0 +1,23 @@
+and_chr 132
+and_ff 132
+and_uc 15.5
+chrome 131
+chrome 130
+chrome 127
+chrome 126
+chrome 125
+chrome 109
+edge 131
+firefox 133
+ios_saf 18.2
+ios_saf 18.1
+ios_saf 18.0
+ios_saf 17.6-17.7
+ios_saf 17.5
+ios_saf 16.6-16.7
+ios_saf 15.6-15.8
+op_mob 80
+opera 114
+safari 18.1
+safari 17.6
+samsung 27

.gitignore

@@ -23,6 +23,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+
 
 .DS_Store

app/blog/[slug]/page.tsx

@@ -9,6 +9,37 @@ interface BlogPost {
   category: string;
 }
 
+// Simulating an API call with a timeout
+async function fetchBlogPost(slug: string): Promise<BlogPost | null> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const post = blogPosts.find((post) => post.slug === slug);
+      resolve(post || null);
+    }, 100); // 100ms timeout to simulate API call
+  });
+}
+
+export async function generateStaticParams() {
+  // In a real application, you would fetch this data from an API or database
+  return blogPosts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  const post = await fetchBlogPost(params.slug);
+
+  if (!post) {
+    return {
+      title: "Post Not Found",
+    };
+  }
+
+  return {
+    title: post.title,
+  };
+}
+
 const blogPosts: BlogPost[] = [
   {
     slug: "introducing-mev-protection",
@@ -136,8 +167,8 @@ function CategoryBadge({ category }: { category: string }) {
   );
 }
 
-export default function BlogPost({ params }: { params: { slug: string } }) {
-  const post = blogPosts.find((post) => post.slug === params.slug);
+export default async function BlogPost({ params }: { params: { slug: string } }) {
+  const post = await fetchBlogPost(params.slug);
 
   if (!post) {
     notFound();

app/blog/page.tsx

@@ -9,6 +9,15 @@ interface BlogPost {
   category: string;
 }
 
+// Simulating an API call with a timeout
+async function fetchBlogPosts(): Promise<BlogPost[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(blogPosts);
+    }, 100); // 100ms timeout to simulate API call
+  });
+}
+
 const blogPosts: BlogPost[] = [
   {
     slug: "introducing-mev-protection",
@@ -52,13 +61,15 @@ function CategoryBadge({ category }: { category: string }) {
   );
 }
 
-export default function BlogPage() {
+export default async function BlogPage() {
+  const posts = await fetchBlogPosts();
+
   return (
     <div className="min-h-screen bg-background">
       <div className="container max-w-4xl mx-auto px-4 py-24">
         <h1 className="text-4xl font-heading mb-8">Blog</h1>
         <div className="space-y-12">
-          {blogPosts.map((post) => (
+          {posts.map((post) => (
             <article key={post.slug} className="space-y-4">
               <div className="flex items-center gap-4">
                 <time className="text-sm text-muted-foreground">{post.date}</time>

app/components/api-endpoint.tsx

@@ -4,11 +4,11 @@ import { Input } from "@/components/ui/input";
 export function APIEndpoint() {
   return (
     <div className="bg-blackA3 rounded-lg p-6">
-      <h3 className="text-xl font-semibold mb-4 text-white">Try Our SecureRPC API</h3>
+      <h3 className="text-xl font-semibold mb-4 text-white">Public API Endpoint</h3>
       <div className="flex items-center space-x-2">
         <Input
           type="text"
-          placeholder="https://api.manifoldfinance.com/v1/endpoint"
+          placeholder="https://api.securerpc.com/v1"
           className="flex-grow bg-blackA5 text-white"
           readOnly
         />
@@ -17,7 +17,7 @@ export function APIEndpoint() {
         </Button>
       </div>
       <p className="mt-4 text-sm text-mauveA11">
-        Get started with our SecureRPC API for reliable and secure blockchain interactions.
+        Get started with our SecureRPC API for MEV Protection, and low latency network access.
       </p>
     </div>
   );

app/components/feature-grid.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { Zap, Shield, DollarSign, Server } from "lucide-react";
+import { Zap, Shield, DollarSign } from "lucide-react";
 
 export function FeatureGrid() {
   return (
@@ -21,9 +21,9 @@ export function FeatureGrid() {
           description="Maximize MEV earnings with our advanced strategies and tools."
         />
         <FeatureCard
-          icon={<Server className="w-6 h-6" />}
-          title="Enterprise SecureRPC"
-          description="Stable and reliable blockchain interactions for your applications."
+          icon={<Shield className="w-6 h-6" />}
+          title="Relay+ Protect"
+          description="Advanced MEV protection and transaction privacy for Ethereum."
         />
       </div>
     </div>

app/components/footer.tsx

@@ -1,47 +1,67 @@
-import Link from "next/link";
-import { Twitter, Github } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
+import Link from "next/link"
+import { Twitter, Github } from "lucide-react"
+import { Logo } from "./logo"
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card"
 
 // This would typically come from an environment variable or build-time constant
-const GIT_VERSION_HASH = "a1b2c3d";
+const GIT_VERSION_HASH = "a1b2c3d"
 
 export function Footer() {
   return (
-    <footer className="bg-black border-t border-gray-800 py-6">
+    <footer className="bg-background border-t border-gray-800 py-6">
       <div className="container mx-auto px-4">
         <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
           <div className="flex flex-col items-center md:items-start space-y-2">
             <Link href="/" className="text-lg font-semibold text-white">
-              Manifold Finance
+              <Logo className="h-8 w-8" />
             </Link>
             <p className="text-sm text-gray-400 text-center md:text-left">
-              © 2025 Manifold Finance. All rights reserved.
+              © {new Date().getFullYear()} All rights reserved.
             </p>
           </div>
           <div className="flex items-center space-x-4">
             <Link
               href="https://twitter.com/manifoldfinance"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-400 hover:text-white transition-colors">
+              className="text-gray-400 hover:text-white transition-colors"
+            >
               <Twitter className="w-5 h-5" />
             </Link>
             <Link
               href="https://github.com/manifoldfinance"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-400 hover:text-white transition-colors">
+              className="text-gray-400 hover:text-white transition-colors"
+            >
               <Github className="w-5 h-5" />
             </Link>
           </div>
         </div>
         <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-800">
-          <Badge color="jade" variant="soft" radius="full">
-            Systems Nominal
-          </Badge>
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <div className="flex items-center space-x-2 cursor-pointer">
+                <div className="h-2 w-2 rounded-full bg-[#b8faf6]" />
+                <span className="text-sm text-muted-foreground">Operational</span>
+              </div>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-80">
+              <div className="flex justify-between space-x-4">
+                <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">System Status</h4>
+                  <p className="text-sm">All systems are operational.</p>
+                  <div className="flex items-center pt-2">
+                    <span className="text-xs text-muted-foreground">Last checked: {new Date().toLocaleString()}</span>
+                  </div>
+                </div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
           <span className="text-xs text-gray-500">Version: {GIT_VERSION_HASH}</span>
         </div>
       </div>
     </footer>
-  );
+  )
 }
+