feat: implement Main page

.gitignore

@@ -40,3 +40,4 @@ coverage/
 # Temporary files
 *.tmp
 *.temp
+docs/

st-app-frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

st-app-frontend/package.json

@@ -9,19 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.534.0",
+    "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5"
   }
 }

st-app-frontend/src/app/auth/login/LoginPage.module.css

@@ -0,0 +1,59 @@
+.container {
+  display: flex;
+  height: 100vh;
+  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Noto Sans",
+    Helvetica, Arial, sans-serif;
+}
+
+.left {
+  background-color: rgb(255, 218, 31);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.left img {
+  max-width: 200px;
+  height: auto;
+  margin-bottom: 2rem;
+}
+
+.left p {
+  font-size: 1.2rem;
+  text-align: center;
+  color: #000;
+}
+
+.right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loginBox {
+  text-align: center;
+}
+
+.loginBox h1 {
+  margin-bottom: 2rem;
+  font-size: 2rem;
+}
+
+.githubButton {
+  padding: 1rem 2rem;
+  background-color: #24292e;
+  color: #fff;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.githubButton:hover {
+  background-color: #000;
+}

st-app-frontend/src/app/auth/login/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import styles from "./LoginPage.module.css";
+import Image from "next/image";
+
+const GITHUB_CLIENT_ID = "YOUR_GITHUB_CLIENT_ID";
+
+const LoginPage = () => {
+  const redirectToGitHub = () => {
+    const githubAuthUrl = "https://github.com/login/oauth/authorize";
+    const redirectUri = encodeURIComponent(
+      "http://localhost:3000/auth/github/callback"
+    );
+    const scope = "read:user user:email";
+    window.location.href = `${githubAuthUrl}?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${redirectUri}&scope=${scope}`;
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <Image
+          src="/logo-rsschool3.png"
+          alt="RS School Logo"
+          width={500}
+          height={500}
+          layout="responsive"
+          quality={75}
+        />
+        <p>
+          Welcome to RS School! Learn, code, and grow with our open education
+          platform.
+        </p>
+      </div>
+      <div className={styles.right}>
+        <div className={styles.loginBox}>
+          <h1>Log In</h1>
+          <button className={styles.githubButton} onClick={redirectToGitHub}>
+            Sign up with GitHub
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

st-app-frontend/src/app/components/Content/ContentLayout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+class ContentLayout extends React.Component<any, any>{
+  render() {
+    return (
+      <div>
+        <p>Title</p>
+        <ul>
+          <li>First element</li>
+          <li>Second element</li>
+          <li>Third element</li>
+          <li>Fourth element</li>
+          <li>Fifth element</li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+export { ContentLayout };

st-app-frontend/src/app/components/Content/index.tsx

@@ -0,0 +1 @@
+export { ContentLayout } from "./ContentLayout";