added header & footer

jvc-byte · Oct 8, 2024 · 5d1268e · 5d1268e
1 parent 8162dd1
commit 5d1268e
Show file tree

Hide file tree

Showing 19 changed files with 255 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
   </picture>
 </p>
 
-# Sealed Trust 🛡🚂
+# Sealed Trust 🛡
 
 
 <br />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sealed-trust",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "build": "next build",
     "check": "biome check --write .",
@@ -26,6 +26,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.2.0",
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.7",
@@ -34,15 +36,14 @@
     "@wagmi/cli": "latest",
     "autoprefixer": "^10.4.19",
     "bufferutil": "^4.0.7",
+    "daisyui": "^4.12.12",
     "encoding": "^0.1.13",
-    "lokijs": "^1.5.12",
     "jsdom": "^24.1.0",
+    "lokijs": "^1.5.12",
     "pino-pretty": "^10.2.0",
     "postcss": "^8.4.38",
     "supports-color": "^9.4.0",
     "tailwindcss": "^3.4.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.2.0",
     "typescript": "^5.3.3",
     "utf-8-validate": "^6.0.3",
     "vitest": "^2.0.1"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/background.png b/public/images/background.png
diff --git a/public/copy-api-key.png → public/images/copy-api-key.png b/public/copy-api-key.png → public/images/copy-api-key.png
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/app/global.css b/src/app/global.css
@@ -3,26 +3,16 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  /* Palette */
-  --palette-bg-black: #fff;
-  --palette-bg-white: rgb(21, 26, 38);
-
-  /* Indicates that the element can be rendered using 
-   * the operating system dark color scheme. 
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme */
-  color-scheme: light;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
 html {
   height: 100%;
   scroll-behavior: smooth;
+  background-image: url('https://wallpapers.com/images/high/dark-teal-1920-x-1080-background-ov60286uuglabgvg.webp'); /* Replace with the actual image URL */
+  background-size: cover; /* Ensures the image covers the entire background */
+  background-position: center; /* Centers the image */
+  background-repeat: no-repeat; /* Prevents the image from repeating */
+  background-attachment: fixed; /* Keeps the image fixed while scrolling */
+  margin: 0;
+  padding: 0;
 }
 
 html .font-robotoMono {
@@ -64,10 +54,6 @@ ul {
   z-index: 0;
 }
 
-.ockConnectWallet_Container span {
-  color: #030712;
-}
-
 /* i believe this is necessary because 
 of a div added by rainbowkit provider */
 body > div {
@@ -82,4 +68,24 @@ a {
 
 .templateSection > div {
   max-width: 100%;;
+}
+
+/* Navbar Styling */
+
+.navbar{
+  background-color: rgb(19, 23, 33);
+  padding: 20px;
+  border-radius: 0.5rem;
+  margin-top: 2rem;
+  box-shadow: 0 4px 8px rgba(92, 190, 197, 0.2), 0 6px 20px rgba(92, 190, 197, 0.19);
+}
+
+.footer {
+  background-color: rgb(19, 23, 33);
+  padding: 2rem;
+  padding-bottom: 2rem;
+  border-radius: 0.5rem;
+  margin-top: 2rem;
+  margin-bottom: 5rem;
+  box-shadow: 0 4px 8px rgba(92, 190, 197, 0.2), 0 6px 20px rgba(92, 190, 197, 0.19);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,11 +19,11 @@ export const viewport = {
 };
 
 export const metadata: Metadata = {
-  title: 'Onchain App Template',
-  description: 'Built with OnchainKit',
+  title: 'SEALED TRUST | Seamless Transaction',
+  description: 'Your Money Safety, Our Concern',
   openGraph: {
-    title: 'Onchain App Template',
-    description: 'Built with OnchainKit',
+    title: 'SEALED TRUST',
+    description: 'Your MOney Safety, Our Concern',
     images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
   },
 };
@@ -33,7 +33,7 @@ export default function RootLayout({
 }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="flex items-center justify-center">
+      <body className="body container">
         <OnchainProviders>{children}</OnchainProviders>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,50 +2,48 @@
 import Footer from 'src/components/Footer';
 import TransactionWrapper from 'src/components/TransactionWrapper';
 import WalletWrapper from 'src/components/WalletWrapper';
-import { ONCHAINKIT_LINK } from 'src/links';
-import OnchainkitSvg from 'src/svg/OnchainkitSvg';
 import { useAccount } from 'wagmi';
-import LoginButton from '../components/LoginButton';
-import SignupButton from '../components/SignupButton';
+import Header from 'src/components/Header';
 
 export default function Page() {
-  const { address } = useAccount();
 
   return (
-    <div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
-      <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
-        <div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
-          <a
-            href={ONCHAINKIT_LINK}
-            title="onchainkit"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <OnchainkitSvg />
-          </a>
-          <div className="flex items-center gap-3">
-            <SignupButton />
-            {!address && <LoginButton />}
-          </div>
-        </div>
-      </section>
-      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
-        <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
-          <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
-            <p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
-              npm install @coinbase/onchainkit
-            </p>
-          </div>
-        </div>
-        {address ? (
-          <TransactionWrapper address={address} />
-        ) : (
-          <WalletWrapper
-            className="w-[450px] max-w-full"
-            text="Sign in to transact"
-          />
-        )}
-      </section>
+    <div className="">
+      <Header />
+      <div>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore aspernatur nesciunt sapiente iste suscipit totam. Ex ut, consequatur quis iste maiores aperiam non earum a! Ea aliquid optio dicta reiciendis!
+          Minima veritatis placeat blanditiis tempora velit aliquam, obcaecati ullam amet ea autem voluptatibus possimus alias dicta earum vitae numquam, saepe consectetur neque ipsum? Possimus laborum consectetur eius optio odio sint!
+          Est laudantium voluptatem excepturi fugit qui hic sed omnis dolor perspiciatis quod quibusdam ipsum consequuntur sit officia reiciendis dolores, eos incidunt minus. Illo eveniet dolorum nam fugiat ut quis delectus!
+          Modi optio nostrum cupiditate obcaecati, harum, consequatur laudantium nihil culpa iure quo molestias aperiam ad similique dolorem suscipit dolorum ullam. Laboriosam odit delectus quae consequatur quis adipisci officiis fuga similique.
+          Quibusdam, voluptates? Explicabo, enim? Quod est nemo tempore nulla consequatur commodi nihil, ea animi ullam quae amet! Quidem unde, itaque vitae delectus, maxime pariatur nesciunt dolorem inventore ducimus dolore quaerat!
+          Deleniti ut exercitationem eaque. Minus facere hic maxime, ab odit in accusamus dolore, sapiente provident sunt obcaecati beatae. Repudiandae qui quidem sapiente animi tempore rerum sint sed aliquid doloremque incidunt?
+          Quasi optio nam beatae tempore distinctio soluta delectus architecto cumque sequi nisi dolore illo aliquam quia magnam, velit consequatur. Quia voluptatibus error hic harum dignissimos blanditiis et officiis eos necessitatibus!
+          Quidem ea inventore excepturi nesciunt nostrum rem magnam vitae quas! Voluptates eius quae placeat, facere nostrum ipsam vel ipsum perspiciatis culpa autem sequi odio cupiditate dolore? Vero reiciendis eveniet sapiente?
+          Delectus ad sapiente at unde, aut aliquid. Ad doloremque voluptas perspiciatis sint delectus, ipsum, praesentium pariatur, id voluptatum ex ipsa non accusantium dignissimos ducimus esse. Odio possimus nam laboriosam aliquam.
+          Consectetur vitae quo repellendus, necessitatibus beatae alias! Odit eveniet sit quas, sequi earum in laudantium officia animi consectetur saepe. Nam laboriosam voluptatem et dignissimos eaque laborum suscipit molestias, maxime fugit.
+          Labore neque ex expedita maxime dicta blanditiis praesentium! Iure, quae. Enim maiores qui ducimus blanditiis, deserunt unde ex fugit est. Quam exercitationem ut ad sequi illum autem aliquid eaque dolorum!
+          Quae enim inventore odio voluptas pariatur recusandae aliquid asperiores alias facere aperiam modi, ipsa tempora rem nobis voluptates totam iure explicabo neque. Officiis est consectetur quidem architecto, ullam esse suscipit!
+          Aspernatur voluptates adipisci corrupti sit quaerat recusandae omnis, exercitationem nesciunt ipsa fugiat alias provident, iusto natus amet veniam, fuga illum quisquam officiis atque nisi iste illo labore? Nemo, cumque velit.
+          Dolor, nisi sint fugiat perspiciatis nesciunt quaerat natus culpa ad maxime dolorem nihil numquam temporibus. Debitis neque tenetur, vero ratione totam pariatur corporis facere iure, voluptas exercitationem, quidem est doloribus?
+          Iusto veniam dolorem, accusantium tempora vitae, commodi nisi ex illo quia temporibus iste, neque eveniet delectus corporis distinctio vero quod! Reiciendis impedit ad reprehenderit amet dignissimos ex odio ipsum totam.
+          Nam atque adipisci natus possimus ratione modi harum vel labore provident perspiciatis aut quas numquam alias, quam, sapiente inventore odit doloribus dicta. Voluptates necessitatibus voluptatem itaque esse quo cupiditate voluptatibus.
+          Repudiandae amet velit perspiciatis dicta, error beatae provident deserunt qui nihil, blanditiis cum? Quod, laboriosam? Modi eius molestias sed illo esse facilis laborum quasi, id, ab repellat sapiente, eveniet cum?
+          Sapiente eligendi sequi a sit unde incidunt exercitationem perspiciatis minus vitae dignissimos molestias saepe, laudantium laboriosam impedit? Expedita, voluptate ullam nostrum nemo veniam deserunt corporis voluptatibus suscipit doloribus unde molestiae.
+          Repellendus asperiores molestias quod, dicta sunt accusamus sequi quo, optio doloribus tempora labore sint. Dolore sequi exercitationem vero debitis velit est quos incidunt, modi ab harum assumenda possimus, dicta qui!
+          Voluptatum impedit illo aperiam repudiandae obcaecati ipsum veniam, fugit quibusdam sequi quasi assumenda debitis. Sed perspiciatis alias minima deserunt neque corporis corrupti. Perferendis aliquam eveniet excepturi atque? Corrupti, repudiandae facere?
+          Enim minima dignissimos cum beatae doloribus id quisquam tenetur exercitationem error quo, dolore laboriosam! Voluptatem eaque reprehenderit possimus voluptate facilis et magni consectetur aspernatur sint impedit repudiandae, saepe sed voluptas!
+          Ipsa, accusantium at. Exercitationem nam delectus error consequuntur modi veritatis aliquid nihil aperiam doloremque quam possimus excepturi porro nulla ex minima voluptatum minus, ipsam odit tenetur, ea voluptates dolore praesentium!
+          Omnis, illo eos. Maxime nulla iure nihil neque totam iste saepe vel eius omnis blanditiis expedita, odio ipsa distinctio doloribus molestiae quidem iusto commodi magnam a at minus facere quia.
+          Fuga dolorum accusantium, sapiente quam illum dicta, quis voluptatem, eos rem perspiciatis eaque ut quos! Aperiam laudantium ex aut rerum perspiciatis nisi natus? Aliquid hic exercitationem modi architecto quisquam officia.
+          Voluptatibus ad expedita at aliquam provident fugiat. Rem quidem magni veniam aut, blanditiis expedita amet nisi facilis nam enim consectetur, mollitia cupiditate dolor ad corporis asperiores eveniet omnis nihil hic.
+          Maiores expedita ad dolorum voluptas suscipit maxime, rerum accusamus recusandae. Distinctio quasi beatae eveniet necessitatibus exercitationem alias suscipit et voluptatem sit enim reprehenderit omnis pariatur, nam reiciendis amet accusantium aut?
+          Quas, ullam provident voluptatum sit aliquam cumque quisquam sed quidem excepturi nihil dolore et aliquid inventore iste temporibus dolorem explicabo in vitae iure a veniam sunt! Ducimus laudantium sint quibusdam.
+          Nostrum temporibus, neque sint eos tempore quisquam, veritatis deserunt quibusdam ducimus nemo enim repudiandae iusto, aperiam odit ipsa blanditiis quos commodi reiciendis? Obcaecati, explicabo omnis corrupti quae dolorum numquam at!
+          Minima blanditiis neque officiis repudiandae aspernatur fugit soluta illum voluptatem iure excepturi eligendi vero, culpa quidem ipsa eius corporis quae cupiditate doloremque nesciunt aut nisi inventore vel? Nesciunt, officiis ad.
+        </p>
+        <p className='text-orange-500 font-black md: italic hover:not-italic text-9xl fixed top-1/2 left-8 right-0'>Development in progress</p>
+      </div>
       <Footer />
     </div>
   );

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,7 +19,7 @@ const docLinks = [
 
 export default function Footer() {
   return (
-    <section className="mt-auto mb-2 flex w-full flex-col flex-col-reverse justify-between gap-2 md:mt-8 md:mb-6 md:flex-row">
+    <section className="footer mt-auto mb-2 flex w-full flex-col flex-col-reverse justify-evenly gap-2 md:mt-8 md:mb-6 md:flex-row">
       <aside className="flex items-center pt-2 md:pt-0">
         <h3 className="mr-2 mb-2 text-m md:mb-0">
           Built with love by{' '}
@@ -30,7 +30,7 @@ export default function Footer() {
             title="OnchainKit"
             className="font-semibold hover:text-indigo-600"
           >
-            OnchainKit
+            jvcByte
           </a>
         </h3>
       </aside>
@@ -50,6 +50,9 @@ export default function Footer() {
           </li>
         ))}
       </ul>
+      <div>
+        <p>© 2024</p>
+      </div>
     </section>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
       </picture>
     </p>
-    # Sealed Trust 🛡🚂
+    # Sealed Trust 🛡
     <br />
@@ Expand Down @@