Merge pull request #8 from LofiSu/重构官网HEADmain

Refactor: Rewrite Site

7 files changed, 217 insertions, 0 deletions

diff --git a/src/app/components/RepoCard.tsx b/src/app/components/RepoCard.tsx
new file mode 100644
index 0000000..412e572
--- /dev/null
+++ b/src/app/components/RepoCard.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import * as motion from "motion/react-client";
+import { Card } from "@nextui-org/react";
+
+interface RepoCardProps {
+  title: string;
+  description: string;
+}
+
+export const RepoCard: React.FC<RepoCardProps> = ({ title, description }) => {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.05 }}
+      transition={{ type: "spring", stiffness: 300 }}
+    >
+      <Card className="p-6 bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700">
+        <div className="flex flex-col items-center text-center">
+          <h3 className="text-xl font-bold mb-2 text-white">{title}</h3>
+          <p className="text-gray-400">{description}</p>
+        </div>
+      </Card>
+    </motion.div>
+  );
+};
diff --git a/src/app/components/StatsCard.tsx b/src/app/components/StatsCard.tsx
new file mode 100644
index 0000000..d2213d6
--- /dev/null
+++ b/src/app/components/StatsCard.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+// import { motion } from 'framer-motion';
+import * as motion from "motion/react-client";
+import { Card } from '@nextui-org/react';
+
+interface StatsCardProps {
+  title: string;
+  value: string;
+}
+
+export const StatsCard: React.FC<StatsCardProps> = ({ title, value }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      viewport={{ once: true }}
+    >
+      <Card className="p-6 bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700">
+        <div className="text-center">
+          <h3 className="text-2xl font-bold text-white mb-2">{value}</h3>
+          <p className="text-gray-400">{title}</p>
+        </div>
+      </Card>
+    </motion.div>
+  );
+};
diff --git a/src/app/components/ThreeBackground.tsx b/src/app/components/ThreeBackground.tsx
new file mode 100644
index 0000000..5040e3c
--- /dev/null
+++ b/src/app/components/ThreeBackground.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import * as THREE from "three";
+
+export const ThreeBackground: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    const renderer = new THREE.WebGLRenderer({ alpha: true });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    containerRef.current.appendChild(renderer.domElement);
+
+    // Create particles
+    const geometry = new THREE.BufferGeometry();
+    const vertices = [];
+
+    for (let i = 0; i < 5000; i++) {
+      vertices.push(
+        THREE.MathUtils.randFloatSpread(2000), // x
+        THREE.MathUtils.randFloatSpread(2000), // y
+        THREE.MathUtils.randFloatSpread(2000) // z
+      );
+    }
+
+    geometry.setAttribute(
+      "position",
+      new THREE.Float32BufferAttribute(vertices, 3)
+    );
+
+    const material = new THREE.PointsMaterial({
+      color: 0x88ccff,
+      size: 2,
+      transparent: true,
+      opacity: 0.5,
+    });
+
+    const particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+
+    camera.position.z = 1000;
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+      particles.rotation.x += 0.0001;
+      particles.rotation.y += 0.0001;
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      containerRef.current?.removeChild(renderer.domElement);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="fixed top-0 left-0 w-full h-full z-0" />
+  );
+};
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
--- /dev/null
+++ b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..6b717ad
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..f7fa87e
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..5963c01
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import * as motion from "motion/react-client";
+import { ThreeBackground } from "./components/ThreeBackground";
+
+const HomePage: React.FC = () => {
+  return (
+    <div className="min-h-screen  flex  items-end justify-start">
+      <ThreeBackground />
+      {/* Hero */}
+      <div className="z-10 pt-20 pl-5 pb-10 ">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="container mx-auto px-4 "
+        >
+          <h1 className="text-8xl font-bold mb-3 bg-clip-text text-white font-times ">
+            HydroRoll
+          </h1>
+          <p
+            className="text-lg text-white font-bold max-w-2xl mx-auto w-full text-left font-times"
+            style={{ letterSpacing: "0.1em" }}
+          >
+            Infinity Rule Book 📖 ~ (Or Rules Packages?)
+          </p>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;