about page; added user profileform and me page

src/app/(PAGES)/logipedia/page.tsx

@@ -0,0 +1,8 @@
+import { appConfig } from "@/config";
+import React from "react";
+
+function Page() {
+  return <div>Das ist {appConfig.name}</div>;
+}
+
+export default Page;

src/app/(PAGES)/me/_components/me-page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { User } from "next-auth";
+import React from "react";
+import UserForm from "./user-form";
+import SectionHeader from "@/components/section-header";
+import Avatar from "@/components/avatar";
+import { Button } from "@/components/ui/button";
+import { Edit, XIcon } from "lucide-react";
+
+function MePage({ user }: { user: User }) {
+  const [editProfile, setEditProfile] = React.useState(false);
+  return (
+    <>
+      <SectionHeader text="Dein Profil bearbeiten">
+        <Button onClick={() => setEditProfile(!editProfile)}>
+          {editProfile ? (
+            <>
+              <XIcon />
+              <span>Abbrechen</span>
+            </>
+          ) : (
+            <>
+              <Edit />
+              <span>Bearbeiten</span>
+            </>
+          )}
+        </Button>
+      </SectionHeader>
+      <div className="flex items-center gap-4">
+        <Avatar
+          className="size-16 rounded-xl"
+          src={user.image}
+          fb={user.name}
+        />
+
+        <div>
+          <h4 className="text-lg font-medium">{user.name}</h4>
+          <h4 className="text-sm text-muted-foreground">{user.email}</h4>
+        </div>
+      </div>
+      {editProfile && (
+        <div className="w-full max-w-lg">
+          <UserForm cb={() => setEditProfile(false)} server_user={user} />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default MePage;

src/app/(PAGES)/me/_components/user-form.tsx

@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { userProfileSchema } from "@/lib/validation/zod/user";
+import { User } from "next-auth";
+import { updateUserProfile } from "@/server/actions/user";
+import { toast } from "sonner";
+
+function UserForm({ server_user, cb }: { server_user: User; cb?: () => void }) {
+  const form = useForm<z.infer<typeof userProfileSchema>>({
+    resolver: zodResolver(userProfileSchema),
+    defaultValues: {
+      name: server_user?.name ?? "",
+    },
+  });
+
+  // 2. Define a submit handler.
+  async function onSubmit(values: z.infer<typeof userProfileSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    const { success } = await updateUserProfile(values);
+    if (success) toast.success("Dein Profil wurde aktualisiert!");
+    else toast.error("Etwas ist fehlgeschlagen. Bitte versuche es erneut.");
+    cb?.();
+    form.reset();
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-2">
+                  <Input placeholder="Max Mustermann" {...field} />
+                </div>
+              </FormControl>
+              <FormDescription>
+                Dein Name ist für alle sichtbar.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={!form.formState.isDirty}>
+          Speichern
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export default UserForm;

src/app/(PAGES)/me/page.tsx

@@ -0,0 +1,13 @@
+import { appRoutes } from "@/config";
+import { auth } from "@/server/auth";
+import { redirect } from "next/navigation";
+import React from "react";
+import MePage from "./_components/me-page";
+
+async function Page() {
+  const session = await auth();
+  if (!session) return redirect(appRoutes.signin);
+  return <MePage user={session.user} />;
+}
+
+export default Page;

src/app/(PAGES)/page.tsx

@@ -1,13 +1,47 @@
 import { api } from "@/trpc/server";
-import MainPage from "./_components/main-page";
-import { Article } from "@/server/db/schema";
+import { appConfig, appRoutes } from "@/config";
+import CategoryGrid from "@/components/category/grid/category-grid";
+import ArticleGrid from "@/components/article/grid/article-grid";
+import SectionHeader from "@/components/section-header";
+import ArrowLink from "@/components/arrow-link";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Icons } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export default async function Home() {
-  const articles = await api.article.getAll({ limit: 12 });
   const categories = await api.category.getAll({ limit: 6 });
+  const articles = await api.article.getAll({ limit: 6 });
   return (
     <>
-      <MainPage initialData={{ articles: articles as Article[], categories }} />
+      <Alert>
+        <div className="flex gap-2">
+          <Icons.logo className="size-8" />
+          <div>
+            <AlertTitle className="font-bold">
+              Wilkommen bei Logipedia!
+            </AlertTitle>
+            <AlertDescription className="text-muted-foreground">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+            </AlertDescription>
+          </div>
+          <Button asChild className="ml-auto">
+            <Link href={appRoutes.about}>
+              Erfahre mehr über {appConfig.name}
+            </Link>
+          </Button>
+        </div>
+      </Alert>
+
+      <SectionHeader text="Kategorien">
+        <ArrowLink href={appRoutes.allCategories}>Alle Kategorien</ArrowLink>
+      </SectionHeader>
+      <CategoryGrid categories={categories} />
+
+      <SectionHeader text="Artikel">
+        <ArrowLink href={appRoutes.allArticles}>Alle Artikel</ArrowLink>
+      </SectionHeader>
+      <ArticleGrid articles={articles} />
     </>
   );
 }