Merge pull request #34 from SteveLin100132/feat/official-website

feat(website): enhance tech stack section with advanced design and animations

Author: SteveLin100132

website/package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@icons-pack/react-simple-icons": "^13.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.12",

website/package.json

@@ -4,6 +4,7 @@ import HeroSection from "./components/HeroSection";
 import FeaturesSection from "./components/FeaturesSection";
 import Footer from "./components/Footer";
 import { useScrollAnimation } from "./hooks/useScrollAnimation";
+import TechStackSection from "./components/TechStackSection";
 
 function App() {
   useScrollAnimation();
@@ -14,15 +15,28 @@ function App() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-background">
-      <Navbar />
-      <main>
-        <HeroSection />
-        <FeaturesSection />
-        {/* <TechStackSection />
-        <HowToUseSection /> */}
-      </main>
-      <Footer />
+    <div className="min-h-screen bg-background relative">
+      {/* Global Grid Background */}
+      <div className="fixed inset-0 opacity-40 pointer-events-none z-0">
+        <div className="h-full w-full bg-grid-pattern bg-grid-size"></div>
+      </div>
+
+      {/* Radial White Fade Overlay */}
+      <div className="fixed inset-0 pointer-events-none z-0">
+        <div className="h-full w-full bg-radial-fade-overlay"></div>
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10">
+        <Navbar />
+        <main>
+          <HeroSection />
+          <FeaturesSection />
+          <TechStackSection />
+          {/* <HowToUseSection /> */}
+        </main>
+        <Footer />
+      </div>
     </div>
   );
 }