add separate main page skeleton

src/app/components/MembershipCard.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface MembershipCard {
+  hasUiogMembership: boolean;
+  hasDnsMembership: boolean;
+}
+
+const membershipPerks = [
+  
+];
+
+const MembershipCard: React.FC<MembershipCard> = ({
+  hasUiogMembership,
+  hasDnsMembership,
+}) => {
+  return (
+    <div className={`p-6 rounded-lg shadow-md text-white bg-primary transition-all duration-500p-7 m-5 gap-10 h-full`}>
+      <div className="flex flex-col md:flex-row flex-1 rounded-lg gap-3 place-content-start">
+        <p>My Perks</p>
+      </div>
+    </div>
+  );
+}
+
+export default MembershipCard;

src/app/page.tsx

@@ -3,6 +3,18 @@ import Button from "./components/Button";
 import Image from "next/image";
 import ProfileCard from "./components/ProfileCard";
 
+import { Nunito, Rubik } from 'next/font/google';
+
+const nunito = Nunito({
+  weight: ['400', '700'],
+  subsets: ['latin']
+});
+
+const rubik = Rubik({
+  weight: ['400', '500', '700'],
+  subsets: ['latin']
+});
+
 export default function Home() {
   return (
     <div>

src/pages/_app.tsx

@@ -0,0 +1,15 @@
+import { Nunito } from 'next/font/google';
+
+const nunito = Nunito({
+  subsets: ['latin'] 
+});
+
+import { AppProps } from 'next/app';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <main className={nunito.className}>
+      <Component {...pageProps} />
+    </main>
+  );
+}

src/pages/main.tsx

@@ -0,0 +1,13 @@
+import ProfileCard from '@/app/components/ProfileCard';
+import MembershipCard from '@/app/components/MembershipCard';
+import React from 'react';
+import "../app/globals.css"; 
+
+export default function Main() {
+    return (
+        <div>            
+            <ProfileCard hasUiogMembership={true} hasDnsMembership={true}/>
+            <MembershipCard hasUiogMembership={true} hasDnsMembership={true}/>
+        </div>
+    );
+};