Change main page layout draft

inc4 · Jul 13, 2024 · 3199414 · 3199414
1 parent 89bd6cc
commit 3199414
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 212 deletions.
diff --git a/frontend/app/about/page.tsx b/frontend/app/about/page.tsx
@@ -1,9 +1,7 @@
-import { title } from "@/components/primitives";
-
 export default function AboutPage() {
   return (
     <div>
-      <h1 className={title()}>About</h1>
+      <h1 className="">About</h1>
     </div>
   );
 }
diff --git a/frontend/app/blog/page.tsx b/frontend/app/blog/page.tsx
@@ -1,9 +1,7 @@
-import { title } from "@/components/primitives";
-
 export default function BlogPage() {
   return (
     <div>
-      <h1 className={title()}>Blog</h1>
+      <h1 className="">Blog</h1>
     </div>
   );
 }
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,13 +1,12 @@
-import "@/styles/globals.css";
-import { Metadata, Viewport } from "next";
-import { Link } from "@nextui-org/link";
-import clsx from "clsx";
+import '@/styles/globals.css';
+import { Metadata, Viewport } from 'next';
+import clsx from 'clsx';
 
-import { Providers } from "./providers";
+import { Providers } from './providers';
 
-import { siteConfig } from "@/config/site";
-import { fontSans } from "@/config/fonts";
-import { Navbar } from "@/components/navbar";
+import { siteConfig } from '@/config/site';
+import { fontSans } from '@/config/fonts';
+import { Navbar } from '@/components/navbar';
 
 export const metadata: Metadata = {
   title: {
@@ -16,14 +15,14 @@ export const metadata: Metadata = {
   },
   description: siteConfig.description,
   icons: {
-    icon: "/favicon.ico",
+    icon: '/favicon.ico',
   },
 };
 
 export const viewport: Viewport = {
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
   ],
 };
 
@@ -37,26 +36,21 @@ export default function RootLayout({
       <head />
       <body
         className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
+          'min-h-screen bg-background font-sans antialiased',
           fontSans.variable,
         )}
       >
-        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
+        <Providers themeProps={{ attribute: 'class', defaultTheme: 'light' }}>
           <div className="relative flex flex-col h-screen">
             <Navbar />
-            <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+
+            <main className="container mx-auto max-w-7xl px-6 flex-grow">
               {children}
             </main>
             <footer className="w-full flex items-center justify-center py-3">
-              <Link
-                isExternal
-                className="flex items-center gap-1 text-current"
-                href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
-                title="nextui.org homepage"
-              >
-                <span className="text-default-600">Powered by</span>
-                <p className="text-primary">NextUI</p>
-              </Link>
+              <span className="text-default-600">
+                © 2024. All rights reserved.
+              </span>
             </footer>
           </div>
         </Providers>

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,53 +1,43 @@
 'use client';
 
-import { Snippet } from "@nextui-org/snippet";
-import { Code } from "@nextui-org/code";
-import { button as buttonStyles } from "@nextui-org/theme";
+import Image from 'next/image';
+import logoSafe from '@/images/logo-safe.svg';
+import keyImage from '@/images/key.png';
 
-import { title, subtitle } from "@/components/primitives";
-import {Button} from "@nextui-org/button";
-
-import { useWeb3Modal } from '@web3modal/wagmi/react'
+import { Button } from '@nextui-org/button';
 
+import { useWeb3Modal } from '@web3modal/wagmi/react';
 
 export default function Home() {
   const { open } = useWeb3Modal();
 
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        <h1 className={title()}>Make&nbsp;</h1>
-        <h1 className={title({ color: "violet" })}>beautiful&nbsp;</h1>
-        <br />
-        <h1 className={title()}>
-          websites regardless of your design experience.
+    <section className="flex flex-nowrap align-middle">
+      <div className="flex flex-col  gap-8 max-w-xl text-start justify-center">
+        <h1 className="font-semibold text-5xl">
+          Why Should You Worry about Web3 Security?
         </h1>
-        <h2 className={subtitle({ class: "mt-4" })}>
-          Beautiful, fast and modern React UI library.
-        </h2>
-      </div>
-
-      <div className="flex gap-3">
-
-        <Button
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-          onClick={() => open({ view: 'Connect' })}
-        >
-          Connect wallet
-        </Button>
 
+        <p className="text-lg">
+          You might wonder about the reasons for which you need a web3 security
+          tutorial in the first place. It is important to note that the
+          advantage of democracy on the Internet comes at a price.
+        </p>
+
+        <div className="">
+          <Button
+            color="primary"
+            size="lg"
+            className="font-semibold"
+            onClick={() => open({ view: 'Connect' })}
+            startContent={<Image src={logoSafe} alt="SAFE logo" />}
+          >
+            Connect Safe
+          </Button>
+        </div>
       </div>
-
-      <div className="mt-8">
-        <Snippet hideCopyButton hideSymbol variant="bordered">
-          <span>
-            Get started by editing <Code color="primary">app/page.tsx</Code>
-          </span>
-        </Snippet>
+      <div className="flex align-middle justify-center w-full ">
+        <Image src={keyImage} alt="key image" />
       </div>
     </section>
   );

diff --git a/frontend/app/pricing/page.tsx b/frontend/app/pricing/page.tsx
@@ -1,9 +1,7 @@
-import { title } from "@/components/primitives";
-
 export default function PricingPage() {
   return (
     <div>
-      <h1 className={title()}>Pricing</h1>
+      <h1 className="">Pricing</h1>
     </div>
   );
 }
diff --git a/frontend/app/providers.tsx b/frontend/app/providers.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { NextUIProvider } from "@nextui-org/system";
-import { useRouter } from "next/navigation";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { ThemeProviderProps } from "next-themes/dist/types";
+import * as React from 'react';
+import { NextUIProvider } from '@nextui-org/system';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { ThemeProviderProps } from 'next-themes/dist/types';
 
-import Web3ModalProvider from "@/components/Web3ModalProvidex";
+import Web3ModalProvider from '@/components/Web3ModalProvidex';
 
 export interface ProvidersProps {
   children: React.ReactNode;
@@ -19,9 +19,7 @@ export function Providers({ children, themeProps }: ProvidersProps) {
   return (
     <Web3ModalProvider>
       <NextUIProvider navigate={router.push}>
-        <NextThemesProvider {...themeProps}>
-          {children}
-        </NextThemesProvider>
+        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
       </NextUIProvider>
     </Web3ModalProvider>
   );

diff --git a/frontend/components/Web3ModalProvidex.tsx b/frontend/components/Web3ModalProvidex.tsx
@@ -1,30 +1,30 @@
-'use client'
+'use client';
 
-import React, { ReactNode } from 'react'
-import {wagmiConfig, projectId, web3modalConfig} from '@/config/web3modal'
+import React, { ReactNode } from 'react';
+import { wagmiConfig, projectId, web3modalConfig } from '@/config/web3modal';
 
-import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { createWeb3Modal } from '@web3modal/wagmi/react';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import { WagmiProvider } from 'wagmi'
+import { WagmiProvider } from 'wagmi';
 
 // Setup queryClient
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
-if (!projectId) throw new Error('Project ID is not defined')
+if (!projectId) throw new Error('Project ID is not defined');
 
 // Create modal
-createWeb3Modal(web3modalConfig)
+createWeb3Modal(web3modalConfig);
 
 export default function Web3ModalProvider({
   children,
 }: {
-  children: ReactNode
+  children: ReactNode;
 }) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
-  )
+  );
 }