Index page ux fixes

components/home/HomePageContent.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import SubmissionCarouselSection from "./SubmissionCarouselSection";
+import { HeroHeader } from "./hero";
 import { NowMintingSection } from "./now-minting";
 import { NextMintLeadingSection } from "./next-mint-leading";
 import { BoostedSection } from "./boosted";
@@ -9,6 +10,7 @@ import { ExploreWavesSection } from "./explore-waves";
 export default function HomePageContent() {
   return (
     <div className="tw-overflow-x-hidden tw-border-y-0 tw-border-l-0 tw-border-r tw-border-solid tw-border-iron-900">
+      <HeroHeader />
       <NowMintingSection />
       <SubmissionCarouselSection />
       <div className="tw-mt-10 tw-border tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-pt-10 md:tw-mt-16 md:tw-pt-16">

components/home/hero/HeroHeader.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+export default function HeroHeader() {
+  return (
+    <section className="tw-px-4 tw-pt-10 md:tw-px-6 lg:tw-px-8 md:tw-text-center">
+      <p className="tw-mb-2 tw-text-[11px] tw-font-medium tw-uppercase tw-tracking-[0.2em] tw-text-iron-500">
+        6529
+      </p>
+      <h1 className="tw-mb-3 tw-text-3xl tw-font-bold tw-leading-tight tw-tracking-tight tw-text-iron-200 md:tw-text-4xl">
+        Where art meets community
+      </h1>
+      <p className="tw-mb-0 tw-mx-auto tw-max-w-xl tw-text-sm tw-leading-relaxed tw-text-iron-400 md:tw-text-base">
+       Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores explicabo culpa.
+      </p>
+    </section>
+  );
+}

components/home/hero/index.ts

@@ -1 +1,2 @@
 export { default as CarouselHeader } from "./CarouselHeader";
+export { default as HeroHeader } from "./HeroHeader";

components/home/now-minting/NowMintingCountdownActive.tsx

@@ -12,34 +12,33 @@ export default function NowMintingCountdownActive({
   countdown,
 }: NowMintingCountdownActiveProps) {
   return (
-    <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-iron-800/40 tw-p-4 tw-text-left md:tw-p-5">
-      <div className="tw-via-white/12 tw-pointer-events-none tw-absolute tw-inset-x-6 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-white/0 tw-to-white/0" />
-      <div className="tw-mb-3 tw-flex tw-items-center tw-justify-between">
-        <span className="tw-text-sm tw-font-semibold tw-text-iron-300">
+    <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-white/5 tw-bg-iron-900/40 tw-p-3 tw-text-left md:tw-p-4">
+      <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
+        <span className="tw-text-xs tw-font-semibold tw-text-iron-300">
           {countdown.title}
         </span>
         {countdown.isActive && (
-          <div className="tw-flex tw-items-center tw-gap-2 tw-rounded-full tw-border tw-border-success/20 tw-bg-success/10 tw-px-2.5 tw-py-1">
+          <div className="tw-flex tw-items-center tw-gap-1.5 tw-rounded-full tw-border tw-border-success/20 tw-bg-success/10 tw-px-2 tw-py-0.5">
             <span className="tw-relative tw-flex tw-h-2 tw-w-2">
               <span className="tw-absolute tw-inline-flex tw-h-full tw-w-full tw-animate-ping tw-rounded-full tw-bg-success/60" />
               <span className="tw-relative tw-inline-flex tw-h-2 tw-w-2 tw-rounded-full tw-bg-success" />
             </span>
-            <span className="tw-text-[11px] tw-font-semibold tw-text-success/80">
+            <span className="tw-text-[10px] tw-font-semibold tw-text-success/80">
               Live
             </span>
           </div>
         )}
       </div>
-      <div className="tw-mb-4 tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-border tw-border-white/5 tw-bg-iron-950 tw-p-4 tw-shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]">
-        <div className="tw-text-2xl tw-font-bold tw-tabular-nums tw-text-iron-50">
+      <div className="tw-mb-3 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-border tw-border-white/5 tw-bg-iron-950/80 tw-p-3 tw-shadow-[inset_0_1px_2px_rgba(0,0,0,0.5)]">
+        <div className="tw-text-xl tw-font-bold tw-tabular-nums tw-text-iron-50 md:tw-text-2xl">
           <LiveCountdown targetTimestampSeconds={countdown.targetDate} />
         </div>
       </div>
 
       {countdown.showMintBtn && (
         <Link
           href="/the-memes/mint"
-          className="tw-flex tw-h-12 tw-w-full tw-items-center tw-justify-center tw-gap-x-1.5 tw-whitespace-nowrap tw-rounded-lg tw-border-0 tw-bg-iron-200 tw-px-3.5 tw-py-2.5 tw-text-base tw-font-semibold tw-text-iron-950 tw-no-underline tw-ring-1 tw-ring-inset tw-ring-white tw-transition tw-duration-300 tw-ease-out focus:tw-z-10 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset desktop-hover:hover:tw-bg-iron-300 desktop-hover:hover:tw-text-iron-950 desktop-hover:hover:tw-ring-iron-300"
+          className="tw-flex tw-h-10 tw-w-full tw-items-center tw-justify-center tw-gap-x-1.5 tw-whitespace-nowrap tw-rounded-lg tw-border-0 tw-bg-iron-200 tw-px-3 tw-py-2 tw-text-sm tw-font-semibold tw-text-iron-950 tw-no-underline tw-ring-1 tw-ring-inset tw-ring-white tw-transition tw-duration-300 tw-ease-out focus:tw-z-10 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset desktop-hover:hover:tw-bg-iron-300 desktop-hover:hover:tw-text-iron-950 desktop-hover:hover:tw-ring-iron-300"
         >
           Mint
           <ArrowRightIcon

components/home/now-minting/NowMintingCountdownError.tsx

@@ -2,14 +2,13 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 export default function NowMintingCountdownError() {
   return (
-    <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-black/40 tw-p-4 md:tw-p-5 tw-text-left tw-shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]">
-      <div className="tw-pointer-events-none tw-absolute tw-inset-x-6 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-white/0 tw-via-[#C9A879]/25 tw-to-white/0" />
-      <div className="tw-flex tw-items-start tw-gap-4">
-        <div className="tw-mt-0.5 tw-flex tw-h-9 tw-w-9 md:tw-h-10 md:tw-w-10 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-[#C9A879]/10 tw-ring-1 tw-ring-[#C9A879]/20">
+    <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-white/5 tw-bg-iron-900/40 tw-p-3 tw-text-left md:tw-p-4">
+      <div className="tw-flex tw-items-start tw-gap-3">
+        <div className="tw-mt-0.5 tw-flex tw-h-8 tw-w-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-[#C9A879]/10 tw-ring-1 tw-ring-[#C9A879]/20">
           <ExclamationTriangleIcon className="tw-size-5 tw-text-[#C9A879]" />
         </div>
         <div className="tw-flex tw-flex-col tw-gap-1">
-          <span className="tw-text-base tw-font-semibold tw-text-[#C9A879]">
+          <span className="tw-text-sm tw-font-semibold tw-text-[#C9A879]">
             Error fetching mint information
           </span>
           <span className="tw-text-sm tw-leading-relaxed tw-text-iron-100">

components/home/now-minting/NowMintingCountdownFinalized.tsx

@@ -2,14 +2,13 @@ import ClockIcon from "@/components/utils/icons/ClockIcon";
 
 export default function NowMintingCountdownFinalized() {
   return (
-    <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-black/40 tw-p-4 md:tw-p-5 tw-text-left tw-shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]">
-      <div className="tw-pointer-events-none tw-absolute tw-inset-x-6 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-white/0 tw-via-white/12 tw-to-white/0" />
-      <div className="tw-flex tw-items-start tw-gap-4">
-        <div className="tw-mt-0.5 tw-flex tw-h-9 tw-w-9 md:tw-h-10 md:tw-w-10 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-white/5 tw-ring-1 tw-ring-white/10">
+    <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-white/5 tw-bg-iron-900/40 tw-p-3 tw-text-left md:tw-p-4">
+      <div className="tw-flex tw-items-start tw-gap-3">
+        <div className="tw-mt-0.5 tw-flex tw-h-8 tw-w-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-white/5 tw-ring-1 tw-ring-white/10">
           <ClockIcon className="tw-h-5 tw-w-5 tw-text-iron-300" />
         </div>
         <div className="tw-flex tw-flex-col tw-gap-2">
-          <p className="tw-mb-0 tw-text-base tw-font-semibold tw-text-iron-100">
+          <p className="tw-mb-0 tw-text-sm tw-font-semibold tw-text-iron-100">
             Mint phase complete
           </p>
           <p className="tw-mb-0 tw-text-sm tw-leading-relaxed tw-text-iron-400">

components/home/now-minting/NowMintingCountdownLoading.tsx

@@ -1,11 +1,10 @@
 export default function NowMintingCountdownLoading() {
   return (
-    <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-black/40 tw-p-4 md:tw-p-5 tw-text-left tw-shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]">
-      <div className="tw-pointer-events-none tw-absolute tw-inset-x-6 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-white/0 tw-via-white/10 tw-to-white/0" />
-      <div className="tw-flex tw-flex-col tw-gap-3">
+    <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-white/5 tw-bg-iron-900/40 tw-p-3 tw-text-left md:tw-p-4">
+      <div className="tw-flex tw-flex-col tw-gap-2">
         <div className="tw-h-3 tw-w-28 tw-animate-pulse tw-rounded tw-bg-iron-700/70" />
-        <div className="tw-h-8 tw-w-44 tw-animate-pulse tw-rounded tw-bg-iron-700/70" />
-        <div className="tw-h-12 tw-w-full tw-animate-pulse tw-rounded-lg tw-bg-iron-700/70" />
+        <div className="tw-h-7 tw-w-44 tw-animate-pulse tw-rounded tw-bg-iron-700/70" />
+        <div className="tw-h-10 tw-w-full tw-animate-pulse tw-rounded-lg tw-bg-iron-700/70" />
       </div>
     </div>
   );

components/home/now-minting/NowMintingCountdownSoldOut.tsx

@@ -2,14 +2,13 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline";
 
 export default function NowMintingCountdownSoldOut() {
   return (
-    <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-black/40 tw-p-4 md:tw-p-5 tw-text-left tw-shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]">
-      <div className="tw-pointer-events-none tw-absolute tw-inset-x-6 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-white/0 tw-via-white/15 tw-to-white/0" />
-      <div className="tw-flex tw-items-start tw-gap-4">
-        <span className="tw-mt-0.5 tw-flex tw-h-9 tw-w-9 md:tw-h-10 md:tw-w-10 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-success/10 tw-ring-1 tw-ring-success/20">
+    <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-white/5 tw-bg-iron-900/40 tw-p-3 tw-text-left md:tw-p-4">
+      <div className="tw-flex tw-items-start tw-gap-3">
+        <span className="tw-mt-0.5 tw-flex tw-h-8 tw-w-8 tw-flex-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-success/10 tw-ring-1 tw-ring-success/20">
           <CheckCircleIcon className="tw-size-5 tw-text-success/80 tw-flex-shrink-0" />
         </span>
         <div className="tw-flex tw-flex-col tw-gap-2">
-          <span className="tw-text-base tw-font-semibold tw-text-success">
+          <span className="tw-text-sm tw-font-semibold tw-text-success">
             Mint complete
           </span>
           <span className="tw-text-sm tw-leading-relaxed tw-text-iron-100">

components/home/now-minting/NowMintingDetails.tsx

@@ -17,20 +17,18 @@ export default function NowMintingDetails({ nft }: NowMintingDetailsProps) {
     if (value <= 0) return "N/A";
     return `${value.toFixed(5)} ETH`;
   };
+  const floorPrice = formatEth(nft.floor_price);
 
   return (
     <div className="tw-w-full">
-      <div className="tw-flex tw-flex-col tw-gap-6">
+      <div className="tw-flex tw-flex-col tw-gap-5">
         <NowMintingHeader
           cardNumber={nft.id}
           title={nft.name}
           artistHandle={nft.artist_seize_handle}
           artistName={nft.artist}
         />
-        <NowMintingStatsGrid
-          nftId={nft.id}
-          floorPrice={formatEth(nft.floor_price)}
-        />
+        <NowMintingStatsGrid nftId={nft.id} floorPrice={floorPrice} />
         <NowMintingDetailsAccordion
           nftId={nft.id}
           mintDate={nft.mint_date}

components/home/now-minting/NowMintingDetailsAccordion.tsx

@@ -28,12 +28,12 @@ export default function NowMintingDetailsAccordion({
   ];
 
   return (
-    <details className="tw-group tw-border-x-0 tw-border-b tw-border-t tw-border-solid tw-border-iron-800 tw-pb-6 tw-pt-6">
+    <details className="tw-group tw-border-t tw-border-solid tw-border-b-0 tw-border-x-0 tw-border-iron-800 tw-pt-4">
       <summary className="tw-flex tw-cursor-pointer tw-items-center tw-justify-between tw-gap-2 tw-text-sm tw-font-medium tw-text-iron-400 tw-transition-colors tw-duration-300 desktop-hover:hover:tw-text-iron-50">
         <span>Edition Details</span>
         <ChevronRightIcon className="tw-size-4 tw-transition-transform group-open:tw-rotate-90" />
       </summary>
-      <div className="tw-mt-4 tw-pb-4">
+      <div className="tw-mt-4">
         <div className="tw-space-y-3 tw-text-sm">
           {details.map(({ label, value }) => (
             <div key={label} className="tw-flex tw-justify-between">
@@ -45,7 +45,7 @@ export default function NowMintingDetailsAccordion({
             <span className="tw-text-iron-500">Distribution Plan</span>
             <Link
               href={`/the-memes/${nftId}/distribution`}
-              className="tw-text-iron-100 tw-transition-colors tw-duration-300 hover:tw-text-primary-400"
+              className="tw-text-iron-100 tw-transition-colors tw-duration-300 hover:tw-text-iron-50"
             >
               View
             </Link>

components/home/now-minting/NowMintingHeader.tsx

@@ -28,39 +28,41 @@ export default function NowMintingHeader({
 
   return (
     <div className="tw-flex tw-flex-col">
-      <span className="tw-mb-2 tw-text-[11px] tw-uppercase tw-leading-4 tw-tracking-[0.2em] tw-text-iron-500">
-        Card #{cardNumber}
-      </span>
-
       <Link
         href={`/the-memes/${cardNumber}`}
         className="tw-text-xl tw-font-semibold tw-leading-tight tw-text-iron-50 tw-no-underline tw-transition-colors tw-duration-300 desktop-hover:hover:tw-text-iron-200 sm:tw-text-2xl md:tw-text-3xl"
       >
         {title}
       </Link>
 
-      <div className="tw-mt-4 tw-flex tw-items-center tw-gap-2">
-        {profile?.pfp ? (
-          <Image
-            src={resolveIpfsUrl(profile.pfp)}
-            alt={artistName}
-            width={24}
-            height={24}
-            className="tw-size-6 tw-flex-shrink-0 tw-rounded-md tw-bg-iron-900 tw-object-contain"
-          />
-        ) : (
-          <div className="tw-size-6 tw-flex-shrink-0 tw-rounded-md tw-bg-iron-900 tw-object-contain" />
-        )}
-        <span className="tw-text-md tw-font-semibold tw-text-white tw-transition-colors tw-duration-300 desktop-hover:hover:tw-text-opacity-80">
-          {hasHandle ? (
-            <ArtistProfileHandle
-              nft={{ artist_seize_handle: artistHandle } as BaseNFT}
+      <div className="tw-mt-3 tw-flex tw-flex-wrap tw-items-center tw-gap-2">
+        <span className="tw-inline-flex tw-items-center tw-rounded-full tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950/60 tw-px-2.5 tw-py-1 tw-text-xs tw-font-medium tw-uppercase tw-tracking-[0.08em] tw-text-iron-500">
+          Card #{cardNumber}
+        </span>
+        <span className="tw-inline-flex tw-items-center tw-gap-2 tw-rounded-full tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950/60 tw-px-2.5 tw-py-1">
+          {profile?.pfp ? (
+            <Image
+              src={resolveIpfsUrl(profile.pfp)}
+              alt={artistName}
+              width={16}
+              height={16}
+              className="tw-size-4 tw-flex-shrink-0 tw-rounded-sm tw-bg-iron-900 tw-object-contain"
             />
           ) : (
-            artistName
+            <div className="tw-size-4 tw-flex-shrink-0 tw-rounded-sm tw-bg-iron-900 tw-object-contain" />
           )}
+          <span className="tw-text-sm tw-font-medium tw-text-iron-200 tw-transition-colors tw-duration-300 desktop-hover:hover:tw-text-iron-100">
+            {hasHandle ? (
+              <ArtistProfileHandle
+                nft={{ artist_seize_handle: artistHandle } as BaseNFT}
+              />
+            ) : (
+              artistName
+            )}
+          </span>
         </span>
       </div>
+
     </div>
   );
 }