新主页样式

app/components/Community.tsx

@@ -0,0 +1,139 @@
+import { Button } from "./ui/button";
+import { Card, CardContent } from "./ui/card";
+import { Badge } from "./ui/badge";
+import {
+  ExternalLink,
+  MessageCircle,
+  Github,
+  BookOpen,
+  GraduationCap,
+} from "lucide-react";
+
+export function Community() {
+  return (
+    <section id="community" className="py-24">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            成为{" "}
+            <span className="bg-gradient-primary bg-clip-text text-transparent">
+              社区
+            </span>{" "}
+            的一员
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            与来自世界各地的开发者一起学习、成长、创造。每个人的贡献都让社区变得更好。
+          </p>
+        </div>
+
+        {/* Main CTA Card */}
+        <div className="max-w-4xl mx-auto mb-16">
+          <Card className="relative overflow-hidden border-2 border-primary/20 bg-transparent shadow-none">
+            <CardContent className="p-8 md:p-12 text-center">
+              <div className="mb-6">
+                <div className="inline-flex items-center justify-center w-16 h-16 mb-4">
+                  <BookOpen className="h-8 w-8 text-sky-500" />
+                </div>
+                <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                  内卷知识库
+                </h3>
+                <p className="text-muted-foreground text-lg mb-6 max-w-2xl mx-auto">
+                  探索我们精心整理的技术文档、教程和工具。从基础到进阶，应有尽有。
+                </p>
+                <Button
+                  variant="outline"
+                  asChild
+                  className="text-lg px-8 py-6 h-auto"
+                >
+                  <a
+                    href="https://involutionhell.github.io/docs/ai"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    访问知识库 <ExternalLink className="ml-2 h-5 w-5" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Action Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          <Card className="border-border bg-transparent shadow-none hover:shadow-elegant transition-all duration-300 hover:-translate-y-1">
+            <CardContent className="p-8 text-center">
+              <div className="mb-6">
+                <div className="inline-flex items-center justify-center w-12 h-12 mb-4">
+                  <Github className="h-6 w-6 text-sky-500" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">GitHub 仓库</h3>
+                <p className="text-muted-foreground mb-6">
+                  查看源代码，提交 Issue，参与项目讨论。
+                </p>
+                <Button variant="outline" asChild className="w-full">
+                  <a
+                    href="https://github.com/involutionhell"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    访问 GitHub <ExternalLink className="ml-2 h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-border bg-transparent shadow-none hover:shadow-elegant transition-all duration-300 hover:-translate-y-1">
+            <CardContent className="p-8 text-center">
+              <div className="mb-6">
+                <div className="inline-flex items-center justify-center w-12 h-12 mb-4">
+                  <MessageCircle className="h-6 w-6 text-sky-500" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">Discord 社区</h3>
+                <p className="text-muted-foreground mb-6">
+                  实时交流，分享经验，结识志同道合的朋友。
+                </p>
+                <Button
+                  variant="outline"
+                  asChild
+                  className="w-full text-sky-600 dark:text-sky-400"
+                >
+                  <a
+                    href="https://discord.com/invite/6CGP73ZWbD"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    加入 Discord <ExternalLink className="ml-2 h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-border bg-transparent shadow-none hover:shadow-elegant transition-all duration-300 hover:-translate-y-1">
+            <CardContent className="p-8 text-center">
+              <div className="mb-6">
+                <div className="inline-flex items-center justify-center w-12 h-12 mb-4">
+                  <GraduationCap className="h-6 w-6 text-sky-500" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">文献资料</h3>
+                <p className="text-muted-foreground mb-6">
+                  访问我们在 Zotero 的文献库，获取精选学术资源。
+                </p>
+                <Button variant="outline" asChild className="w-full">
+                  <a
+                    href="https://www.zotero.org/groups/6053219/unsw_ai/library"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    访问文献库 <ExternalLink className="ml-2 h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/ExternalFrame.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+type Props = {
+  src: string;
+  title?: string;
+  height?: number | string; // e.g. 480 or "70vh"
+  className?: string;
+  allowFullScreen?: boolean;
+  sandbox?: string; // override if needed
+  referrerPolicy?: React.IframeHTMLAttributes<HTMLIFrameElement>["referrerPolicy"];
+};
+
+export function ExternalFrame({
+  src,
+  title = "Embedded Content",
+  height = "70vh",
+  className,
+  allowFullScreen = true,
+  sandbox,
+  referrerPolicy = "no-referrer",
+}: Props) {
+  // Keep the API conservative by default; caller can override sandbox if needed.
+  const sandboxAttrs =
+    sandbox ?? "allow-scripts allow-popups allow-forms allow-presentation";
+
+  return (
+    <div className={className} style={{ width: "100%" }}>
+      <iframe
+        src={src}
+        title={title}
+        style={{
+          width: "100%",
+          height: typeof height === "number" ? `${height}px` : height,
+          border: 0,
+        }}
+        loading="lazy"
+        referrerPolicy={referrerPolicy}
+        sandbox={sandboxAttrs}
+        allowFullScreen={allowFullScreen}
+      />
+    </div>
+  );
+}
+
+export default ExternalFrame;

app/components/Features.tsx

@@ -0,0 +1,89 @@
+import { Card, CardContent } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Users, Zap, Heart } from "lucide-react";
+import { Github as GithubIcon } from "./icons/Github";
+
+export function Features() {
+  const features = [
+    {
+      icon: <GithubIcon className="h-8 w-8 text-sky-500" />,
+      title: "完全开源",
+      description:
+        "所有内容存放于 GitHub 仓库，任何人都能参与贡献。代码透明，社区驱动。",
+      highlight: "100% 透明",
+      color: "bg-red-100",
+    },
+    {
+      icon: <Heart className="h-8 w-8 text-sky-500" />,
+      title: "开放透明",
+      description:
+        "没有门槛、没有收费，所有资料和代码都对外公开。真正的开放式学习环境。",
+      highlight: "免费开放",
+      color: "bg-red-200",
+    },
+    {
+      icon: <Users className="h-8 w-8 text-sky-500" />,
+      title: "社区驱动",
+      description:
+        "每一位贡献者都是组织的建设者。共同打造属于开发者的学习天堂。",
+      highlight: "共同建设",
+      color: "bg-red-100",
+    },
+    {
+      icon: <Zap className="h-8 w-8 text-sky-500" />,
+      title: "高效学习",
+      description:
+        "精心整理的技术文档，避免重复造轮子。专注于提升实际技能而非内卷竞争。",
+      highlight: "效率优先",
+      color: "bg-red-200",
+    },
+  ];
+
+  return (
+    <section id="features" className="py-12">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <h3 className="text-3xl md:text-4xl font-bold mb-6">
+            <span className="bg-gradient-primary bg-clip-text text-transparent">
+              内卷地狱
+            </span>
+            想做什么{" "}
+          </h3>
+
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            我们致力于创造一个真正属于开发者的学习环境，让每个人都能在这里获得成长。
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
+          {features.map((feature, index) => (
+            <Card
+              key={index}
+              className="relative overflow-hidden border-border bg-transparent shadow-none hover:shadow-elegant transition-all duration-500 hover:-translate-y-2 group"
+            >
+              <CardContent className="p-8">
+                <div className="flex items-start space-x-4">
+                  <div className="p-0">{feature.icon}</div>
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-3">
+                      <h3 className="text-xl font-semibold">{feature.title}</h3>
+                      <Badge variant="outline" className="text-xs">
+                        {feature.highlight}
+                      </Badge>
+                    </div>
+                    <p className="text-muted-foreground leading-relaxed">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Hover effect decoration */}
+                <div className="absolute inset-0 bg-gradient-primary opacity-0 group-hover:opacity-5 transition-opacity duration-500"></div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}