PreferredAI.github.io/src/app/layout.tsx at dda5a2d4dc1d28d8c7c8ce2a79ba2989c3c94156 · PreferredAI/PreferredAI.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import type { Metadata } from "next";
import "./globals.css";
import Link from "next/link";
import Image from "next/image";
import Navigation from "@/components/Navigation";
import TeamPhotos from "@/components/TeamPhotos";
import { getAllCategories } from "@/lib/markdown-posts";
import BrandLogo from "@/assets/Brand.png";

export const metadata: Metadata = {
  title: "Preferred.AI",
  description: "Preferences and Recommendations from Data & AI",
  icons: {
    icon: "/favi.png",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const categories = getAllCategories();

  return (
    <html lang="en">
      <body>
        <div className="flex min-h-screen flex-col">
          {/* Header */}
          <header className="bg-white shadow-md border-b border-gray-200">
            <div className="container mx-auto max-w-7xl px-4">
              <div className="flex items-center justify-between gap-4 py-6">
                <Link href="/" className="inline-block">
                  <div className="flex items-center gap-3">
                    <Image
                      src={BrandLogo}
                      alt="Preferred.AI"
                      className="h-16 w-auto"
                      priority
                    />
                    <p className="hidden text-sm italic text-gray-600 lg:block">
                      Preferences and Recommendations from Data & AI
                    </p>
                  </div>
                </Link>
                <Navigation />
              </div>
            </div>
          </header>

          {/* Main Content with Sidebar */}
          <div className="flex flex-1 bg-white">
            <div className="container mx-auto max-w-7xl px-4">
              <div className="flex flex-col gap-8 py-8 lg:flex-row">
                {/* Main Content */}
                <main className="flex-1">{children}</main>

                {/* Sidebar */}
                <aside className="w-full lg:w-80">
                  <div className="sticky top-8 space-y-8">
                    {/* Team Section */}
                    <div>
                      <h3 className="mb-4 text-lg font-bold uppercase tracking-wide text-gray-800">
                        Team
                      </h3>
                      <TeamPhotos />
                    </div>

                    {/* Categories Section */}
                    <div>
                      <h3 className="mb-4 text-lg font-bold uppercase tracking-wide text-gray-800">
                        Categories
                      </h3>
                      <ul className="space-y-2">
                        {categories.map((category) => (
                          <li key={category.slug}>
                            <Link
                              href={`/category/${category.slug}`}
                              className="flex items-center text-gray-700 hover:text-[#b91c1c]"
                            >
                              <span className="mr-2 text-gray-400">▸</span>
                              {category.name}
                              <span className="ml-auto text-xs text-gray-400">
                                ({category.count})
                              </span>
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </aside>
              </div>
            </div>
          </div>

          {/* Footer */}
          <footer className="border-t border-gray-200 bg-white py-6">
            <div className="container mx-auto max-w-7xl px-4">
              <p className="text-center text-sm text-gray-600">
                Preferred.AI © {new Date().getFullYear()}. All Rights Reserved.
              </p>
            </div>
          </footer>
        </div>
      </body>
    </html>
  );
}