Fix: adjustments post refactor

.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
     "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode
     "react-hooks/exhaustive-deps": "off", // Incorrectly report needed dependency with Next.js router
-    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/no-custom-classname": "error",
     "tailwindcss/classnames-order": "error",
     "@typescript-eslint/no-misused-promises": "off",
     "@typescript-eslint/no-unsafe-assignment": "off",
@@ -28,7 +28,7 @@ module.exports = {
   },
   settings: {
     tailwindcss: {
-      callees: ["cn", "cva"],
+      callees: ["cn"],
       config: "tailwind.config.js",
     },
     next: {

app/(general)/integration/disco/page.tsx

@@ -1,12 +1,14 @@
 "use client"
 
 import Link from "next/link"
-import { turboIntegrations } from "@/data/documentation"
+import { turboIntegrations } from "@/data/turbo-integrations"
 import { LuBook } from "react-icons/lu"
 import { useAccount } from "wagmi"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { WalletConnect } from "@/components/blockchain/wallet-connect"
 import {
@@ -66,18 +68,26 @@ export default function DiscoPage() {
             <IsWalletConnected>
               <IsSignedIn>
                 <section className="flex w-full flex-col gap-y-10">
-                  <div className="container w-full rounded-lg bg-card p-6 shadow">
-                    <h3 className="text-4xl font-bold">Disco Profile</h3>
-                    <hr className="my-4" />
-                    <DiscoProfileBasic address={address} />
-                  </div>
-                  <div className="card container max-w-full">
-                    <h3 className="text-4xl font-bold">
-                      Disco Verifiable Credentials
-                    </h3>
-                    <hr className="my-4" />
-                    <DiscoProfileCredentials address={address} />
-                  </div>
+                  <Card>
+                    <CardHeader>
+                      <h3 className="text-4xl font-bold">Disco Profile</h3>
+                      <Separator className="my-4" />
+                    </CardHeader>
+                    <CardContent>
+                      <DiscoProfileBasic address={address} />
+                    </CardContent>
+                  </Card>
+                  <Card>
+                    <CardHeader>
+                      <h3 className="text-4xl font-bold">
+                        Disco Verifiable Credentials
+                      </h3>
+                      <Separator className="my-4" />
+                    </CardHeader>
+                    <CardContent>
+                      <DiscoProfileCredentials address={address} />
+                    </CardContent>
+                  </Card>
                 </section>
               </IsSignedIn>
               <IsSignedOut>

app/(general)/integration/erc1155/page.tsx

@@ -1,14 +1,22 @@
 "use client"
 
+import Link from "next/link"
 import { turboIntegrations } from "@/data/turbo-integrations"
-import { motion } from "framer-motion"
-import Balancer from "react-wrap-balancer"
+import { LuBook } from "react-icons/lu"
 
-import { FADE_DOWN_ANIMATION_VARIANTS } from "@/config/design"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
 import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import {
+  PageHeader,
+  PageHeaderCTA,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/layout/page-header"
+import { PageSection } from "@/components/layout/page-section"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
-import { LinkComponent } from "@/components/shared/link-component"
+import { LightDarkImage } from "@/components/shared/light-dark-image"
 import {
   Erc1155Deploy,
   Erc1155DeployTest,
@@ -21,72 +29,58 @@ import {
 import { Erc1155SetTokenStorage } from "@/integrations/erc1155/components/erc1155-set-token-storage"
 import { useErc1155TokenStorage } from "@/integrations/erc1155/hooks/use-erc1155-token-storage"
 
+const integrationData = turboIntegrations.erc1155
+
 export default function PageIntegration() {
   const [token] = useErc1155TokenStorage()
 
   return (
-    <>
-      <div className="flex-center flex flex-1 flex-col items-center justify-center">
-        <motion.div
-          animate="show"
-          className="max-w-screen-xl px-5 text-center xl:px-0"
-          initial="hidden"
-          viewport={{ once: true }}
-          whileInView="show"
-          variants={{
-            hidden: {},
-            show: {
-              transition: {
-                staggerChildren: 0.15,
-              },
-            },
-          }}
-        >
-          <motion.h1
-            className="text-gradient-sand my-4 text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-8xl md:leading-[6rem]"
-            variants={FADE_DOWN_ANIMATION_VARIANTS}
-          >
-            {turboIntegrations.erc1155.name}
-          </motion.h1>
-          <motion.p
-            className="my-4 text-lg"
-            variants={FADE_DOWN_ANIMATION_VARIANTS}
-          >
-            <Balancer>{turboIntegrations.erc1155.description}</Balancer>
-          </motion.p>
-          <motion.div
-            className="my-4 text-xl"
-            variants={FADE_DOWN_ANIMATION_VARIANTS}
+    <div className="container relative mt-20">
+      <PageHeader className="pb-8">
+        <LightDarkImage
+          LightImage={integrationData.imgDark}
+          DarkImage={integrationData.imgLight}
+          alt={`${integrationData.name} Logo`}
+          width={100}
+          height={100}
+        />
+        <PageHeaderHeading>{integrationData.name}</PageHeaderHeading>
+        <PageHeaderDescription>
+          {integrationData.description}
+        </PageHeaderDescription>
+        <PageHeaderCTA>
+          <Link
+            href={integrationData.url}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={cn(buttonVariants({ variant: "outline" }))}
           >
-            <LinkComponent isExternal href={turboIntegrations.erc1155.url}>
-              <button className="btn btn-primary">Documentation</button>
-            </LinkComponent>
-          </motion.div>
-        </motion.div>
-      </div>
-      <section className="w-full lg:mt-10">
-        <div className="container flex w-full flex-col items-center">
-          <IsWalletConnected>
-            <div className="flex w-full max-w-screen-lg flex-col gap-y-8">
-              <Erc1155Deploy />
-              <Erc1155DeployTest />
-              <Erc1155SetTokenStorage />
-              {token && (
-                <>
-                  <Erc1155Read address={token} />
-                  <Erc1155WriteMint address={token} />
-                  <Erc1155WriteApprove address={token} />
-                  <Erc1155WriteTransfer address={token} />
-                  <Erc1155WriteBatchTransfer address={token} />
-                </>
-              )}
-            </div>
-          </IsWalletConnected>
-          <IsWalletDisconnected>
-            <WalletConnect />
-          </IsWalletDisconnected>
-        </div>
-      </section>
-    </>
+            <LuBook className="mr-2 h-4 w-4" />
+            Documentation
+          </Link>
+        </PageHeaderCTA>
+      </PageHeader>
+      <PageSection>
+        <IsWalletConnected>
+          <div className="flex w-full max-w-screen-lg flex-col gap-y-8">
+            <Erc1155Deploy />
+            <Erc1155DeployTest />
+            <Erc1155SetTokenStorage />
+            {token && (
+              <>
+                <Erc1155Read address={token} />
+                <Erc1155WriteMint address={token} />
+                <Erc1155WriteApprove address={token} />
+                <Erc1155WriteTransfer address={token} />
+                <Erc1155WriteBatchTransfer address={token} />
+              </>
+            )}
+          </div>
+        </IsWalletConnected>
+        <IsWalletDisconnected>
+          <WalletConnect />
+        </IsWalletDisconnected>
+      </PageSection>
+    </div>
   )
 }

app/(general)/integration/erc20/[chainId]/[address]/page.tsx

@@ -12,12 +12,13 @@ export default function ERC20({
   const { address, chainId } = params
 
   return (
-    <ERC20Read
-      showBalance
-      showImage
-      address={address}
-      chainId={Number(chainId)}
-      className={"max-w-lg"}
-    />
+    <div className="container max-w-xl pt-20">
+      <ERC20Read
+        showBalance
+        showImage
+        address={address}
+        chainId={Number(chainId)}
+      />
+    </div>
   )
 }

app/(general)/integration/erc20/page.tsx

@@ -6,6 +6,7 @@ import { LuBook } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import { WalletConnect } from "@/components/blockchain/wallet-connect"
 import {
   PageHeader,
@@ -17,7 +18,6 @@ import { PageSection } from "@/components/layout/page-section"
 import { IsWalletConnected } from "@/components/shared/is-wallet-connected"
 import { IsWalletDisconnected } from "@/components/shared/is-wallet-disconnected"
 import { LightDarkImage } from "@/components/shared/light-dark-image"
-import { LinkComponent } from "@/components/shared/link-component"
 import { ERC20Deploy } from "@/integrations/erc20/components/erc20-deploy"
 import { ERC20Read } from "@/integrations/erc20/components/erc20-read"
 import { Erc20SetTokenStorage } from "@/integrations/erc20/components/erc20-set-token-storage"
@@ -55,14 +55,14 @@ export default function Erc20Page() {
         </PageHeaderCTA>
       </PageHeader>
       <PageSection>
-        <div className="container w-full max-w-screen-lg">
-          <IsWalletConnected>
-            <div className="flex w-full max-w-screen-lg flex-col gap-y-8">
-              <ERC20Deploy />
-              <Erc20SetTokenStorage />
-              {token && (
-                <>
-                  <div className="card flex flex-col">
+        <IsWalletConnected>
+          <div className="flex w-full max-w-screen-lg flex-col gap-y-8">
+            <ERC20Deploy />
+            <Erc20SetTokenStorage />
+            {token && (
+              <>
+                <Card>
+                  <CardContent className="flex flex-col">
                     <span className="mb-4 text-lg">
                       Access the token page where you can update the url
                       parameters to select which ERC20 token to view
@@ -75,20 +75,20 @@ export default function Erc20Page() {
                     >
                       View Token Page
                     </Link>
-                  </div>
-                  <ERC20Read address={token} />
-                  <ERC20WriteMint address={token} />
-                  <ERC20WriteTransfer address={token} />
-                </>
-              )}
-            </div>
-          </IsWalletConnected>
-          <IsWalletDisconnected>
-            <div className="flex items-center justify-center">
-              <WalletConnect />
-            </div>
-          </IsWalletDisconnected>
-        </div>
+                  </CardContent>
+                </Card>
+                <ERC20Read address={token} />
+                <ERC20WriteMint address={token} />
+                <ERC20WriteTransfer address={token} />
+              </>
+            )}
+          </div>
+        </IsWalletConnected>
+        <IsWalletDisconnected>
+          <div className="flex items-center justify-center">
+            <WalletConnect />
+          </div>
+        </IsWalletDisconnected>
       </PageSection>
     </div>
   )