Landingpage V2

packages/nextjs/app/brandkit/page.tsx

@@ -1,152 +1,29 @@
-import Image from "next/image";
-import { Manrope, Space_Grotesk } from "@next/font/google";
-import { Inter } from "@next/font/google";
-import { DM_Sans } from "@next/font/google";
+"use client";
 
-const SpaceGrotesk = Space_Grotesk({
-  subsets: ["latin"],
-});
-
-const InterFont = Inter({
-  subsets: ["latin"],
-});
-
-const DmSans = DM_Sans({
-  subsets: ["latin"],
-});
-
-const ManropeFont = Manrope({
-  subsets: ["latin"],
-});
+import { BrandAssetsBanner } from "~~/components/BrandAssets/BrandAssetsBanner";
+import { BrandColor } from "~~/components/BrandAssets/BrandColor";
+import { NetworkLogo } from "~~/components/BrandAssets/NetworkLogo";
+import { ScaffoldFont } from "~~/components/BrandAssets/ScaffoldFont";
+import { DecoreLayout } from "~~/components/DecoreLayout";
+import { Footer } from "~~/components/Landingpage/Footer";
 
 function Page() {
   return (
-    <div className="bg-white">
-      <div
-        className="flex flex-col justify-center items-center py-8 gap-4 md:gap-4 h-[630px]"
-        style={{
-          backgroundImage: `url(/background.svg)`,
-          backgroundPosition: "center",
-          backgroundSize: "cover",
-          backgroundRepeat: "no-repeat",
-        }}
-      >
-        <div className="flex items-center gap-2">
-          <div className="flex relative w-14 h-14 p-3 rounded-full">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/icon.svg" />
-          </div>
-          <p className={`text-3xl m-0 font-medium mt-1 text-[#290C4F] ${SpaceGrotesk.className}`}>Scaffold-Stark</p>
-        </div>
-        <div className="flex flex-col justify-center items-center gap-8 mb-14 px-4 text-black">
-          <h1 className={`text-center text-3xl lg:text-3xl max-w-md lg:max-w-2xl px-3 m-0 ${SpaceGrotesk.className}`}>
-            Media Toolkit{" "}
-          </h1>
-        </div>
-      </div>
-      <div className="flex flex-col justify-center my-12">
-        <span className="px-24 text-[24px] text-gradient-2 font-bold py-5 font-arial">Logo</span>
-        <div className="flex gap-11 justify-center">
-          <div className="border border-[#7646C8] w-5/12">
-            <div className=" flex flex-col justify-center items-center py-10">
-              <Image src="icon.svg" alt="logo" width={80} height={80} />
-            </div>
-            <div className="border-t border-t-[#7646C8] flex justify-center items-center py-6">
-              <a href="/icon.svg" download="icon.svg" className={`text-gradient text-xl ${SpaceGrotesk.className}`}>
-                Download
-              </a>
-            </div>
-          </div>
-          <div className="border border-[#7646C8] w-5/12">
-            <div className="flex gap-4 justify-center items-center py-10">
-              <Image src="icon.svg" alt="logo" width={80} height={80} />
-              <span className={`text-3xl font-medium text-black ${SpaceGrotesk.className}`}>Scaffold-Stark</span>
-            </div>
-            <div className="border-t border-t-[#7646C8] flex justify-center items-center py-6">
-              <a
-                href="/logo-name.png"
-                download="logo-name.png"
-                className={`text-gradient text-xl ${SpaceGrotesk.className}`}
-              >
-                Download
-              </a>
-            </div>
-          </div>
+    <div className="bg-white flex flex-col md:gap-28 gap-12">
+      <BrandAssetsBanner />
+      <NetworkLogo />
+      <ScaffoldFont />
+      <BrandColor />
+      <div className="mt-28">
+        {/* <Image src={"/assets/decore-top.png"} alt="decore" width={10000} height={10000} className="-mb-0.5" /> */}
+        <div className="relative rotate-180">
+          <DecoreLayout />
         </div>
-      </div>
-
-      <div className="flex flex-col justify-center my-12 px-24">
-        <span className="mt-4 text-[24px] text-gradient-2 font-bold font-arial">Typography</span>
-        <div className="w-full mt-6">
-          <div className="flex justify-between border-b border-b-[#E2E8F0] py-6">
-            <div className={`flex flex-col text-black ${DmSans.className}`}>
-              <span className="text-xs">DM Sans By Colophon Foundry</span>
-              <span className="text-2xl">DM Sans</span>
-            </div>
-            <div className="flex justify-center">
-              <a
-                className={`border border-[#9B5584] py-3 px-9 rounded-[14px] text-black ${SpaceGrotesk.className}`}
-                href="https://fonts.google.com/specimen/DM+Sans?query=dm+sans"
-                target="_blank"
-              >
-                Download
-              </a>
-            </div>
-          </div>
-          <div className="flex justify-between border-b border-b-[#E2E8F0] py-6">
-            <div className={`flex flex-col text-black ${InterFont.className}`}>
-              <span className="text-xs">Inter By Rasmus Andersson</span>
-              <span className="text-2xl">Inter</span>
-            </div>
-            <div className="flex justify-center">
-              <a
-                className={`border border-[#9B5584] py-3 px-9 rounded-[14px] text-black ${SpaceGrotesk.className}`}
-                href="https://fonts.google.com/specimen/Inter?query=dm+sans"
-                target="_blank"
-              >
-                Download
-              </a>
-            </div>
-          </div>
-          <div className="flex justify-between border-b border-b-[#E2E8F0] py-6">
-            <div className={`flex flex-col text-black ${ManropeFont.className}`}>
-              <span className="text-xs">Manrope By Mikhail Sharanda</span>
-              <span className="text-2xl">Manrope</span>
-            </div>
-            <div className="flex justify-center">
-              <a
-                className={`border border-[#9B5584] py-3 px-9 rounded-[14px] text-black ${SpaceGrotesk.className}`}
-                href="https://fonts.google.com/specimen/Manrope?query=dm+sans"
-                target="_blank"
-              >
-                Download
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col justify-center mt-12 mb-20 px-24">
-        <span className="my-4 text-[24px] text-gradient-2 font-bold font-arial">Colors</span>
-        <div>
-          <span>Light Theme</span>
-          <div className="w-full flex my-5">
-            <div className="w-1/6 card-1 h-[130px]"></div>
-            <div className="w-1/6 card-2 h-[130px]"></div>
-            <div className="w-1/6 card-3 h-[130px]"></div>
-            <div className="w-1/6 bg-[#00A3FF] h-[130px]"></div>
-            <div className="w-1/6 bg-[#8B45FD] h-[130px]"></div>
-            <div className="w-1/6 bg-[#7800FF] h-[130px]"></div>
-          </div>
+        <div className="bg-[#0F0F0F] py-5 relative z-50 md:block hidden">
+          <Footer />
         </div>
-        <div className="mt-6">
-          <span className="">Dark Theme</span>
-          <div className="w-full flex my-5">
-            <div className="w-1/6 card-2 h-[130px]"></div>
-            <div className="w-1/6 card-3 h-[130px]"></div>
-            <div className="w-1/6 card-4 h-[130px]"></div>
-            <div className="w-1/6 bg-[#0FF] h-[130px]"></div>
-            <div className="w-1/6 bg-[#5368B4] h-[130px]"></div>
-            <div className="w-1/6 bg-[#141A30] h-[130px]"></div>
-          </div>
+        <div className="bg-[#0F0F0F] pt-10 absolute w-full -bottom-[10px] z-50 md:hidden block">
+          <Footer />
         </div>
       </div>
     </div>

packages/nextjs/app/layout.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react";
+import { Inter, Space_Grotesk } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { Metadata } from "next";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
@@ -13,6 +15,17 @@ const title = "Scaffold-Stark";
 const titleTemplate = "%s | Scaffold-Stark ";
 const description = "Built with 🏗 Scaffold-Stark ";
 
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+  display: "swap",
+  variable: "--font-grotesk",
+});
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
   title: {
@@ -48,11 +61,13 @@ export const metadata: Metadata = {
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning>
+    <html suppressHydrationWarning className={`${spaceGrotesk.variable}  ${inter.variable}`}>
       <body>
-        <ThemeProvider enableSystem>
-          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
-        </ThemeProvider>
+        <Suspense fallback={<>Loading...</>}>
+          <ThemeProvider enableSystem>
+            <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
+          </ThemeProvider>
+        </Suspense>
       </body>
     </html>
   );