Merge pull request #131 from ArjinAlbay/claude/modern-github-explorer-01DSTAKCia1ktgndFxUSPhr1

Claude/modern GitHub explorer 01 dstak cia1ktgnd fx us phr1

Author: ArjinAlbay

package-lock.json

@@ -24,19 +24,28 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",
+    "framer-motion": "^12.23.24",
+    "github-markdown-css": "^5.8.1",
     "lucide-react": "^0.525.0",
     "next": "15.3.4",
     "next-auth": "^4.24.11",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
+    "react-syntax-highlighter": "^16.1.0",
     "recharts": "^3.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.6"
   },

package.json

@@ -224,6 +224,28 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-sans;
+  }
+
+  code, pre, kbd, samp {
+    @apply font-mono;
+  }
+}
+
+@layer utilities {
+  .glass-card {
+    @apply bg-background/80 backdrop-blur-md border border-border/20;
+  }
+
+  .glass-modal {
+    @apply bg-background/90 backdrop-blur-lg border border-border/30;
+  }
+
+  .glass-header {
+    @apply bg-background/80 backdrop-blur-md border-b border-border/50;
   }
 }

src/app/globals.css

@@ -7,6 +7,8 @@ import { OAuthSessionSync } from "@/components/providers/OAuthSessionSync";
 
 import { NotificationProvider } from "@/components/common/NotificationProvider";
 import { DataInitializer } from "@/components/providers/DataInitializer";
+import { CommandPalette } from "@/components/command/CommandPalette";
+import { PageTracker } from "@/components/providers/PageTracker";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -37,6 +39,8 @@ export default function RootLayout({
           <ThemeProvider defaultTheme="system" storageKey="githubmon-theme">
             <OAuthSessionSync />
             <DataInitializer />
+            <PageTracker />
+            <CommandPalette />
             {children}
             <NotificationProvider />
           </ThemeProvider>

src/app/layout.tsx

@@ -13,47 +13,91 @@ function LoginContent() {
   const error = searchParams.get("error");
 
   return (
-    <div className="h-screen bg-background flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <Card className="shadow-xl">
-          <CardHeader className="text-center pb-6 space-y-2">
-            <div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
-              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </div>
-            <CardTitle className="text-2xl font-bold">GitMon</CardTitle>
-            <p className="text-muted-foreground text-sm">
-              GitHub organization analytics and monitoring
+    <div className="h-screen flex flex-col md:flex-row">
+      <div className="hidden md:flex md:w-1/2 bg-gradient-to-br from-black to-gray-900 dark:from-gray-950 dark:to-black relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(139,92,246,0.1),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem]" />
+
+        <div className="relative z-10 flex flex-col justify-between p-12 text-white">
+          <div>
+            <svg className="w-12 h-12" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <h1 className="text-4xl font-bold mt-8 mb-4">GitHubMon</h1>
+            <p className="text-xl text-gray-300 max-w-md">
+              Powerful GitHub analytics and monitoring for modern development teams
             </p>
-          </CardHeader>
+          </div>
 
-          <CardContent className="space-y-6 pb-8">
-            {error && (
-              <div className="p-3 rounded-md bg-destructive/10 border border-destructive/20">
-                <p className="text-sm text-destructive">
-                  {error === "authentication_failed"
-                    ? "Authentication failed. Please try again."
-                    : "An error occurred during sign in. Please try again."}
-                </p>
+          <div className="space-y-6">
+            <div className="flex items-center gap-4">
+              <div className="w-12 h-12 rounded-lg bg-white/10 backdrop-blur-sm flex items-center justify-center">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
               </div>
-            )}
+              <div>
+                <h3 className="font-semibold">Real-time Analytics</h3>
+                <p className="text-sm text-gray-400">Track repository performance</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="w-12 h-12 rounded-lg bg-white/10 backdrop-blur-sm flex items-center justify-center">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+              </div>
+              <div>
+                <h3 className="font-semibold">Smart Notifications</h3>
+                <p className="text-sm text-gray-400">Stay updated on what matters</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="w-12 h-12 rounded-lg bg-white/10 backdrop-blur-sm flex items-center justify-center">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                </svg>
+              </div>
+              <div>
+                <h3 className="font-semibold">Customizable</h3>
+                <p className="text-sm text-gray-400">Tailored to your workflow</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-sm text-gray-400">
+            Trusted by development teams worldwide
+          </div>
+        </div>
+      </div>
 
-            <div className="text-center space-y-2">
-              <h3 className="text-lg font-semibold">Welcome Back</h3>
-              <p className="text-sm text-muted-foreground">
-                Sign in with your GitHub account to continue
+      <div className="flex-1 flex items-center justify-center p-8 bg-background">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center md:text-left animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <h2 className="text-3xl font-bold mb-2">Welcome back</h2>
+            <p className="text-muted-foreground">
+              Sign in with your GitHub account to continue
+            </p>
+          </div>
+
+          {error && (
+            <div className="p-4 rounded-lg bg-destructive/10 border border-destructive/20 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <p className="text-sm text-destructive">
+                {error === "authentication_failed"
+                  ? "Authentication failed. Please try again."
+                  : "An error occurred during sign in. Please try again."}
               </p>
             </div>
+          )}
 
+          <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-150">
             <Button
               onClick={() => signIn('github', { callbackUrl: '/auth/callback' })}
-              className="w-full h-12 font-semibold text-base"
-              size="lg"
+              className="w-full h-14 text-base font-semibold bg-black dark:bg-white text-white dark:text-black hover:bg-gray-900 dark:hover:bg-gray-100 transition-all hover:-translate-y-0.5 shadow-lg hover:shadow-xl"
             >
               <svg
                 className="w-5 h-5 mr-3"
@@ -69,26 +113,35 @@ function LoginContent() {
               Continue with GitHub
             </Button>
 
-            <div className="text-center">
-              <p className="text-xs text-muted-foreground">
-                By signing in, you agree to our{" "}
-                <Link
-                  href="/terms-of-service"
-                  className="underline hover:text-foreground transition-colors"
-                >
-                  terms of service
-                </Link>{" "}
-                and{" "}
-                <Link
-                  href="/privacy-policy"
-                  className="underline hover:text-foreground transition-colors"
-                >
-                  privacy policy
-                </Link>
-              </p>
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-border"></div>
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">
+                  Secure authentication via GitHub
+                </span>
+              </div>
             </div>
-          </CardContent>
-        </Card>
+          </div>
+
+          <div className="text-center text-xs text-muted-foreground animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
+            By signing in, you agree to our{" "}
+            <Link
+              href="/terms-of-service"
+              className="underline hover:text-foreground transition-colors"
+            >
+              terms of service
+            </Link>{" "}
+            and{" "}
+            <Link
+              href="/privacy-policy"
+              className="underline hover:text-foreground transition-colors"
+            >
+              privacy policy
+            </Link>
+          </div>
+        </div>
       </div>
     </div>
   );

src/app/login/page.tsx

@@ -8,6 +8,9 @@ import { SearchModal } from "@/components/search/SearchModal";
 import { CallToActionSection } from "@/components/CallToActionSection";
 import { Header } from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
+import { DotPattern } from "@/components/ui/dot-pattern";
+import { BentoGrid } from "@/components/landing/BentoGrid";
+import { CodeDemo } from "@/components/landing/CodeDemo";
 
 export default function HomePage() {
   const router = useRouter();
@@ -38,18 +41,26 @@ export default function HomePage() {
   return (
     <>
       <Header />
-      <main className="max-w-7xl mx-auto p-6 space-y-6">
-        {/* Hero Section */}
-        <div className="text-center space-y-8">
-          <div className="space-y-4">
-            <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white">
-              GitHub Analytics
-              <span className="text-indigo-600 dark:text-indigo-400 block">
-                Made Simple
-              </span>
-            </h1>
+      <main className="relative max-w-7xl mx-auto p-6 space-y-6">
+        <DotPattern
+          className="opacity-50"
+          dotColor="rgba(139, 92, 246, 0.15)"
+          gap={30}
+        />
 
-            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+        <div className="text-center space-y-8 py-20 relative">
+          <div className="space-y-6">
+            <div className="relative inline-block">
+              <h1 className="text-5xl md:text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400 dark:from-white dark:via-gray-100 dark:to-gray-300">
+                GitHub Analytics
+                <span className="block mt-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
+                  Made Simple
+                </span>
+              </h1>
+              <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 w-64 h-24 bg-gradient-to-r from-indigo-500/20 via-purple-500/20 to-pink-500/20 blur-3xl" />
+            </div>
+
+            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mt-8">
               Monitor your GitHub repositories, track trends, and analyze
               performance with powerful insights and beautiful visualizations.
             </p>
@@ -59,6 +70,8 @@ export default function HomePage() {
         <Separator />
       </main>
 
+      <BentoGrid />
+      <CodeDemo />
       <CallToActionSection />
       <SearchModal />
       <Footer />

src/app/page.tsx

@@ -8,8 +8,8 @@ export function CallToActionSection() {
   const router = useRouter();
 
   return (
-    <section className="text-center py-12">
-      <Card className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-xl hover:shadow-2xl transition-all duration-300 max-w-4xl mx-auto">
+    <section className="text-center py-12 px-4">
+      <Card className="bg-background/80 backdrop-blur-md border border-border/20 shadow-xl hover:shadow-2xl transition-all duration-300 max-w-4xl mx-auto">
         <CardContent className="p-8">
           <div className="flex flex-col md:flex-row items-center gap-8">
             <div className="flex-shrink-0">