add page structure

frontend/src/App.tsx

@@ -1,20 +1,22 @@
-import { useState } from 'react'
 import { ConnectMassaWallet } from './lib/connectMassaWallets/components/ConnectMassaWallet';
 import './App.css'
-import SwitchWalletButton from './lib/connectMassaWallets/components/SwitchWalletButton';
-import { useAccountStore } from './lib/connectMassaWallets/store';
 import { Card } from './components/Card';
+import { FAQ, FAQData } from './components/FAQ';
+import { Button } from '@massalabs/react-ui-kit';
+import { MNSManagement } from './components/MNSManagement';
 
-function App() {
-
-  const {
-    connectedAccount,
-    massaClient: client,
-    currentProvider,
-  } = useAccountStore();
-
-  const connected = !!connectedAccount && !!currentProvider;
+const faqData: FAQData[] = [
+  {
+    question: 'What is Massa Name Service ?',
+    answer: 'Massa Name Service is a decentralized naming protocol that allows users to register a human-readable name for their Massa address. This name can be used to send and receive Massa, and to interact with smart contracts and dApps.'
+  },
+  {
+    question: 'How do I register a name ?',
+    answer: 'To register a name, you must connect your wallet and search for an available name. If the name is available, you can register it for a fee.'
+  }
+];
 
+function App() {
   return (
     <div className="sm:w-full md:max-w-4xl mx-auto">
       <div className="flex justify-between mb-2">
@@ -23,29 +25,28 @@ function App() {
           alt="Massa logo"
           style={{ height: '64px' }}
         />
+        <Button preIcon={<img
+          src="/pu_logo.svg"
+          alt="Purrfect Universe logo"
+        />} customClass="w-40 mt-2 bg-primary border-none text-neutral ">
+        <div className="flex items-center">Trade</div>
+      </Button>
       </div>
       <div className="p-5">
         <section className="mb-4 p-2">
-          <p className="mas-title mb-2">DNS Manager</p>
+          <p className="mas-title mb-2">MNS Manager</p>
         </section>
         <section className="mb-10">
           <Card>
             <ConnectMassaWallet />
           </Card>
         </section>
-        <section className="mb-10">
-          {!connected ? (
-            <Card>
-              <h3 className="mas-h3">
-                Connect a wallet to view your vesting sessions
-              </h3>
-            </Card>
-          ) : (
-            <Card>
-              <h3 className="mas-h3">No active vesting sessions</h3>
-            </Card>
-          )}
+        <section className="mb-16">
+        <Card customClass="min-w-96 min-h-64">
+          <MNSManagement />
+          </Card>
         </section>
+        <FAQ data={faqData} />
       </div>
     </div>
   );

frontend/src/components/FAQ.tsx

@@ -0,0 +1,26 @@
+import { Accordion } from "@massalabs/react-ui-kit";
+
+export interface FAQData {
+    question: string;
+    answer: string;
+}
+
+export function FAQ({ data }: { data: FAQData[] }) {
+    if (!data) return null
+    return (
+        <>
+            <section className="mb-8">
+                <p className="mas-title mb-2">FAQ</p>
+            </section>
+            {data.map((item) => (
+                <Accordion customClass="bg-primary border-none rounded-xl p-1 mb-10" title={item.question}>
+                    <div className="p-5">
+                        <p className="mas-body">
+                            {item.answer}
+                        </p>
+                    </div>
+                </Accordion>
+            ))}
+        </>
+    )
+}

frontend/src/components/MNSClaim.tsx

@@ -0,0 +1,7 @@
+export function MNSClaim() {
+    return (
+        <div>
+            test
+        </div>
+    )
+}

frontend/src/components/MNSList.tsx

@@ -0,0 +1,7 @@
+export function MNSList() {
+    return (
+        <div>
+            test
+        </div>
+    )
+}

frontend/src/components/MNSManagement.tsx

@@ -0,0 +1,26 @@
+import { useAccountStore } from "../lib/connectMassaWallets/store";
+import { MNSClaim } from "./MNSClaim";
+import { MNSList } from "./MNSList";
+
+export function MNSManagement() {
+    const {
+        connectedAccount,
+        currentProvider,
+    } = useAccountStore();
+
+    const connected = !!connectedAccount && !!currentProvider;
+    return (
+        <>
+            {!connected ? (
+                <h2 className="mas-h2  text-center">
+                    Please connect your wallet above
+                </h2>
+            ) : (
+                <div className="grid grid-cols-1 divide-y">
+                <MNSClaim />
+                <MNSList />
+                </div>
+            )}
+        </>
+    )
+}