add base

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "mus",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.13"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.13"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/components/Button.tsx

@@ -0,0 +1,27 @@
+interface ButtonProps {
+  text: string;
+  type: "primary" | "secondary";
+  icon?: React.ReactNode;
+  link: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, type, icon, link }) => {
+  const buttonClass = type === "secondary"
+    ? "flex flex-row flex-1 rounded-lg p-3 gap-3 place-content-between items-center justify-center border border-white text-white bg-transparent"
+    : "flex flex-col flex-1 rounded-lg p-3 gap-3 place-content-between items-center justify-center bg-white text-black";
+
+  const textClass = type === "secondary" ? "text-white" : "text-black";
+
+  return (
+    <a
+      href={link}
+      className={buttonClass}
+      rel="noopener noreferrer"
+    >
+      <p className={textClass}>{text}</p>
+      {icon}
+    </a>
+  );
+};
+
+export default Button;

src/app/components/ButtonSpecial.tsx

@@ -0,0 +1,21 @@
+interface ButtonProps {
+  text: string;
+  type: "primary" | "secondary";
+  icon?: React.ReactNode;
+  link: string;
+}
+
+const ButtonSpecial: React.FC<ButtonProps> = ({ text, type, icon, link }) => {
+  return (
+    <a
+      href={link}
+      className="flex flex-row flex-1 rounded-lg p-3 gap-3 place-content-between items-center bg-overlay border-2 border-outline"
+      rel="noopener noreferrer"
+    >
+      <p className="po">{text}</p>
+      {icon}
+    </a>
+  );
+};
+
+export default ButtonSpecial;

src/app/components/ProfileCard.tsx

@@ -0,0 +1,10 @@
+interface ProfileCardProps {
+    hasUiogMembership: boolean;
+    hasDnsMembership: boolean;
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({hasUiogMembership, hasDnsMembership}) => {
+    
+};
+
+export default ProfileCard;

src/app/globals.css

@@ -0,0 +1,72 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #1D1320;
+  --foreground: #261F31;
+  --primary: #392e49;
+  --overlay: #4c3e62;
+  --outline: #987cc4;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #141218;
+    --foreground: #261F31;
+    --primary: #392e49;
+    --overlay: #4c3e62;
+    --outline: #987cc4;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  font-family: var(--font-nunito);
+}
+
+p {
+  font-family: var(--font-nunito);
+  font-weight: 400;
+  font-size: 1.25rem;
+  color: white;
+}
+
+.po {
+  color: var(--outline);
+}
+
+.pd {
+  font-size: 1.5rem;
+  color: var(--foreground);
+}
+
+.pp {
+  font-size: 1.5rem;
+  color: var(--foreground)
+}
+
+.header {
+  font-weight: 800;
+  font-size: 2.5rem;
+  color: white !important;
+}
+
+.header-light {
+  font-weight: 400;
+  font-size: 2rem;
+  color: white !important;
+}
+
+
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+import { Nunito, Rubik } from "next/font/google"
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+const nunito = Nunito({
+  weight: ["400", "500", "600", "800"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  variable: "--font-nunito"
+})
+
+const rubik = Rubik({
+  weight: ["400", "500", "600", "800"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  variable: "--font-rubik"
+})
+
+export const metadata: Metadata = {
+  title: "mus",
+  description: "UiO Gaming Membership Portal",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased ${nunito.variable} ${rubik.variable}`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,80 @@
+import ButtonSpecial from "./components/ButtonSpecial";
+import Button from "./components/Button";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div>
+      <div className="flex flex-1 flex-col bg-foreground rounded-xl p-7 m-5 gap-10 h-full">
+        <div className="flex flex-row flex-1 rounded-lg gap-3 place-content-between items-center">
+          <h1 className="header">UiO Gaming</h1>
+          <h1 className="header-light">Membership</h1>
+        </div>
+
+        <div className="flex flex-col flex-1 rounded-lg gap-3">
+          <p>
+            Welcome to the <strong>UiO Gaming Membership</strong> portal!
+          </p>
+          <p>
+            You can administer two memberships here - your UiO Gaming
+            membership, and the DNS Membership, which gives you additional perks
+            within the association.
+          </p>
+          <p>
+            You can visit the two websites below or get started by logging in
+            with or registering to Galtinn.
+          </p>
+        </div>
+
+        <div className="flex flex-col flex-1 rounded-lg gap-3 place-content-between">
+          <ButtonSpecial
+            text="UiO Gaming"
+            type="primary"
+            icon={
+              <Image
+                src="/images/uiog.png"
+                alt="UiO Gaming Logo"
+                width={60}
+                height={60}
+              />
+            }
+            link="https://uiogaming.no"
+          />
+
+          <ButtonSpecial
+            text="Det Norske Studentersamfund"
+            type="primary"
+            icon={
+              <Image
+                src="/images/neuf.png"
+                alt="DNS Logo"
+                width={60}
+                height={60}
+              />
+            }
+            link="https://neuf.no"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col bg-foreground rounded-xl p-7 m-5 gap-10 h-full">
+        <div className="flex flex-col md:flex-row flex-1 items-center justify-center rounded-lg gap-3 place-content-between">
+          <div className="w-full md:w-3/4">
+            <Button
+              text="Log in with Galtinn"
+              type="primary"
+              link="https://galtinn.neuf.no/home/"
+            />
+          </div>
+          <div className="w-full md:w-1/4">
+            <Button
+              text="Register into Galtinn"
+              type="secondary"
+              link="https://galtinn.neuf.no/register/"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

tailwind.config.ts

@@ -0,0 +1,28 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: "var(--primary)",
+        overlay: "var(--overlay)",
+        outline: "var(--outline)"
+      },
+    },
+    borderRadius: {
+      DEFAULT: "0.5rem",
+      lg: "1rem",
+      xl: "2rem",
+      full: "9999px",
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}