Initial commit

2026-01-15 15:03:59 +08:00
commit f8eda9ba2f
35 changed files with 3212 additions and 0 deletions
@@ -0,0 +1,140 @@
+import { Link } from "react-router-dom"
+
+/**
+ * Home page component that displays the main landing content.
+ */
+export default function Home() {
+  return (
+    <div className="space-y-8">
+      {/* Hero Section */}
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl">
+          Welcome to OnixByte React Template
+        </h1>
+        <p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+          A modern React application template with <b>TypeScript</b>, <b>Tailwind CSS</b>,{" "}
+          <b>Redux</b>, and <b>React Router</b> for seamless navigation.
+        </p>
+      </div>
+
+      {/* Features Grid */}
+      <div className="mt-12">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {/* Feature 1 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-blue-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Fast Development</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Built with Vite for lightning-fast development experience and hot module
+                  replacement.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-green-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Type Safety</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Full TypeScript support with strict type checking for better code quality and
+                  developer experience.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="bg-white overflow-hidden shadow rounded-lg">
+            <div className="p-6">
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-8 w-8 text-purple-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-4">
+                  <h3 className="text-lg font-medium text-gray-900">Modern Styling</h3>
+                </div>
+              </div>
+              <div className="mt-4">
+                <p className="text-sm text-gray-500">
+                  Tailwind CSS for utility-first styling with responsive design and modern UI
+                  components.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Call to Action */}
+      <div className="bg-blue-50 rounded-lg p-6 text-center">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to start building?</h2>
+        <p className="text-gray-600 mb-6">
+          Explore the navigation above to see React Router in action, or check out the source code
+          to understand the implementation.
+        </p>
+        <div className="flex justify-center space-x-4">
+          <Link
+            to="/about"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+            Learn More
+          </Link>
+          <Link
+            to="/contact"
+            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+            Get in Touch
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}