[FILECOIN V3] Improve hero images placement

apps/filecoin-site/src/app/[locale]/(homepage)/components/HeroSection.tsx

@@ -6,14 +6,15 @@ import { PageHeader } from '@filecoin-foundation/ui-filecoin/PageHeader'
 import { PageSection } from '@filecoin-foundation/ui-filecoin/PageSection'
 
 import { PATHS } from '@/constants/paths'
+import { FILECOIN_CLOUD_URL } from '@/constants/siteMetadata'
 
 export function HeroSection() {
   const t = useTranslations('home.hero')
 
   return (
     <PageSection backgroundVariant="transparentDark" paddingVariant="none">
       <div className="space-y-15 py-25 md:py-30">
-        <Announcement centered href="https://filecoin.cloud/">
+        <Announcement centered href={FILECOIN_CLOUD_URL}>
           {t('announcement')}
         </Announcement>
 

apps/filecoin-site/src/app/[locale]/build-on-filecoin/components/HeroSection.tsx

@@ -0,0 +1,56 @@
+import Image from 'next/image'
+
+import { Button } from '@filecoin-foundation/ui-filecoin/Button'
+import { PageHeader } from '@filecoin-foundation/ui-filecoin/PageHeader'
+import { PageSection } from '@filecoin-foundation/ui-filecoin/PageSection'
+import { SectionContent } from '@filecoin-foundation/ui-filecoin/SectionContent'
+
+import { FILECOIN_CLOUD_URL, FILECOIN_DOCS_URL } from '@/constants/siteMetadata'
+
+import { graphicsData } from '@/data/graphicsData'
+
+import { SplitSectionContent } from '@/components/SplitSectionContent'
+
+export function HeroSection() {
+  return (
+    <PageSection backgroundVariant="dark">
+      <header className="grid max-w-full grid-cols-1 lg:grid-cols-3 lg:gap-0">
+        <div className="lg:col-span-2 lg:pr-28">
+          <PageHeader
+            title="Build on Filecoin: open, scalable, verifiable storage"
+            description="Filecoin is a programmable, permissionless network from the ground up with cryptographic verification and global redundancy. Integrate decentralized storage that scales with your needs and safeguards data integrity at every layer."
+            cta={
+              <Button href={FILECOIN_DOCS_URL} variant="primary">
+                Explore documentation
+              </Button>
+            }
+          />
+        </div>
+
+        <Image
+          priority
+          src={graphicsData.cupolaEarthView.data}
+          alt={graphicsData.cupolaEarthView.alt}
+          className="relative mx-auto w-3/4 lg:top-25 lg:left-15 lg:w-full lg:scale-[2]"
+        />
+      </header>
+
+      <div className="lg:mt-80">
+        <SectionContent title="Announcing Filecoin Onchain Cloud">
+          <SplitSectionContent
+            title="Verifiable onchain services with transparent storage, retrieval, and payments"
+            description={[
+              'Filecoin Onchain Cloud allows developers to build composable and verifiable services onchain where storage, pinning, retrieval, and payments are transparent, programmable, and interoperable by default.',
+              'This provides direct, trustless entry points to the Filecoin network so developers can connect data, services, and applications without running their own infrastructure.',
+            ]}
+            cta={[
+              <Button href={FILECOIN_CLOUD_URL} variant="primary">
+                Get started with Filecoin Onchain Cloud
+              </Button>,
+            ]}
+          />
+        </SectionContent>
+      </div>
+    </PageSection>
+  )
+}

apps/filecoin-site/src/app/[locale]/build-on-filecoin/page.tsx

@@ -1,22 +1,15 @@
 import Image from 'next/image'
 
-import { clsx } from 'clsx'
-
 import { StructuredDataScript } from '@filecoin-foundation/ui/StructuredDataScript'
 import { Button } from '@filecoin-foundation/ui-filecoin/Button'
 import { CardGrid } from '@filecoin-foundation/ui-filecoin/CardGrid'
 import { LinkCard } from '@filecoin-foundation/ui-filecoin/LinkCard'
-import { PageHeader } from '@filecoin-foundation/ui-filecoin/PageHeader'
 import { PageSection } from '@filecoin-foundation/ui-filecoin/PageSection'
-import { backgroundVariants } from '@filecoin-foundation/ui-filecoin/Section/Section'
 import { SectionContent } from '@filecoin-foundation/ui-filecoin/SectionContent'
 import { SimpleCard } from '@filecoin-foundation/ui-filecoin/SimpleCard'
 
 import { PATHS } from '@/constants/paths'
-import {
-  FILECOIN_DOCS_URL,
-  FILECOIN_FOUNDATION_URLS,
-} from '@/constants/siteMetadata'
+import { FILECOIN_FOUNDATION_URLS } from '@/constants/siteMetadata'
 
 import { graphicsData } from '@/data/graphicsData'
 
@@ -26,10 +19,10 @@ import { CardGridContainer } from '@/components/CardGridContainer'
 import { ImageGrid } from '@/components/ImageGrid'
 import { Navigation } from '@/components/Navigation/Navigation'
 import { SimpleCardWithLogo } from '@/components/SimpleCardWithLogo'
-import { SplitSectionContent } from '@/components/SplitSectionContent'
 
 import { getInvolvedOptions } from '../community-hub/data/getInvolvedOptions'
 
+import { HeroSection } from './components/HeroSection'
 import { BUILD_ON_FILECOIN_SEO } from './constants/seo'
 import { builtOnFilecoin } from './data/builtOnFilecoin'
 import { developerResources } from './data/developerResources'
@@ -45,50 +38,8 @@ export default function BuildOnFilecoin() {
         structuredData={generateStructuredData(BUILD_ON_FILECOIN_SEO)}
       />
 
-      <div className={clsx('relative isolate', backgroundVariants.dark)}>
-        <Navigation backgroundVariant="transparentDark" />
-        <PageSection backgroundVariant="transparentDark">
-          <PageHeader
-            title="Build on Filecoin: open, scalable, verifiable storage"
-            description="Filecoin is a programmable, permissionless network from the ground up with cryptographic verification and global redundancy. Integrate decentralized storage that scales with your needs and safeguards data integrity at every layer."
-            cta={
-              <Button href={FILECOIN_DOCS_URL} variant="primary">
-                Explore documentation
-              </Button>
-            }
-          />
-        </PageSection>
-
-        <div className="absolute top-30 right-0 hidden h-[60vh] w-[50vw] lg:block">
-          <Image
-            fill
-            priority
-            src={graphicsData.cupolaEarthView.data}
-            alt={graphicsData.cupolaEarthView.alt}
-            className="-z-10 object-contain"
-          />
-        </div>
-
-        <PageSection
-          backgroundVariant="transparentDark"
-          paddingVariant="topNone"
-        >
-          <SectionContent title="Announcing Filecoin Onchain Cloud">
-            <SplitSectionContent
-              title="Verifiable onchain services with transparent storage, retrieval, and payments"
-              description={[
-                'Filecoin Onchain Cloud allows developers to build composable and verifiable services onchain where storage, pining, retrieval, and payments are transparent, programmable, and interoperable by default.',
-                'This provides direct, trustless entry points to the Filecoin network so developers can connect data, services, and applications without running their own infrastructure.',
-              ]}
-              cta={[
-                <Button href="https://filecoin.cloud/" variant="primary">
-                  Get started with Filecoin Onchain Cloud
-                </Button>,
-              ]}
-            />
-          </SectionContent>
-        </PageSection>
-      </div>
+      <Navigation backgroundVariant="dark" />
+      <HeroSection />
 
       <PageSection backgroundVariant="light" paddingVariant="bottomNone">
         <SectionContent

apps/filecoin-site/src/app/[locale]/provide-storage/page.tsx

@@ -32,8 +32,17 @@ export default function ProvideStorage() {
         structuredData={generateStructuredData(PROVIDE_STORAGE_SEO)}
       />
 
+      <Navigation backgroundVariant="dark" />
+
       <div className="relative isolate">
-        <Navigation backgroundVariant="transparentDark" />
+        <Image
+          priority
+          src={graphicsData.colorfulNebula.data}
+          alt={graphicsData.colorfulNebula.alt}
+          className="absolute top-0 left-0 -z-20 h-full w-[200vw] object-cover object-top lg:w-full"
+        />
+        <GradientOverlay variant="dual" />
+
         <PageSection backgroundVariant="transparentDark">
           <PageHeader
             title="Power the world's largest decentralized storage network"
@@ -50,25 +59,18 @@ export default function ProvideStorage() {
               </Button>,
             ]}
           />
+
+          <div className="mt-40">
+            <LogoSection
+              headingTag="h2"
+              title="Join a global network of storage providers"
+              logos={storageProvidersLogos}
+            />
+          </div>
         </PageSection>
-        <Image
-          priority
-          src={graphicsData.colorfulNebula.data}
-          alt={graphicsData.colorfulNebula.alt}
-          className="absolute right-0 bottom-0 -z-20 h-full object-cover"
-        />
-        <GradientOverlay />
       </div>
 
-      <PageSection backgroundVariant="dark" paddingVariant="topNone">
-        <LogoSection
-          headingTag="h2"
-          title="Join a global network of storage providers"
-          logos={storageProvidersLogos}
-        />
-      </PageSection>
-
-      <PageSection backgroundVariant="dark" paddingVariant="topNone">
+      <PageSection backgroundVariant="dark" paddingVariant="topCompact">
         <SectionContent
           centerCTA
           title="Getting started with PDP storage"

apps/filecoin-site/src/app/_components/GradientOverlay.tsx

@@ -1,5 +1,28 @@
-export function GradientOverlay() {
-  return (
-    <div className="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-64 bg-linear-to-b from-transparent via-transparent via-50% to-zinc-950/80" />
-  )
+import { clsx } from 'clsx'
+
+const sharedStyles = 'pointer-events-none absolute -z-10'
+
+const variants = {
+  'to-bottom': clsx(
+    sharedStyles,
+    'inset-x-0 bottom-0 h-full bg-linear-to-b from-transparent via-transparent via-50% to-zinc-950/95',
+  ),
+  'to-top': clsx(
+    sharedStyles,
+    'inset-x-0 top-0 h-full bg-linear-to-t from-transparent via-transparent via-50% to-zinc-950/95',
+  ),
+  dual: clsx(
+    sharedStyles,
+    'inset-0 h-full bg-linear-to-b from-zinc-950/95 via-transparent to-zinc-950/95',
+  ),
+}
+
+type GradientOverlayProps = {
+  variant?: keyof typeof variants
+}
+
+export function GradientOverlay({
+  variant = 'to-bottom',
+}: GradientOverlayProps) {
+  return <div className={variants[variant]} />
 }

apps/filecoin-site/src/app/_components/SiteLayout.tsx

@@ -49,7 +49,7 @@ export function SiteLayout({
         <StructuredDataScript structuredData={ORGANIZATION_SCHEMA_BASE} />
       </head>
       <body className="bg-white font-sans text-base/5.5">
-        <main>{children}</main>
+        <main className="overflow-x-hidden">{children}</main>
         <Footer />
 
         {process.env.NODE_ENV === 'development' && <BreakpointDebugger />}

apps/filecoin-site/src/app/_constants/siteMetadata.ts

@@ -30,6 +30,7 @@ const FILECOIN_DOCS_URLS = {
   storageModel: `${FILECOIN_DOCS_URL}basics/what-is-filecoin/storage-model`,
 } as const
 
+const FILECOIN_CLOUD_URL = 'https://filecoin.cloud'
 const FILECOIN_FOUNDATION_URL = 'https://fil.org'
 const FILECOIN_FOUNDATION_URLS = {
   ecosystemExplorer: {
@@ -131,6 +132,7 @@ export {
   FILECOIN_FOUNDATION_URL,
   FILECOIN_FOUNDATION_URLS,
   FILECOIN_URLS,
+  FILECOIN_CLOUD_URL,
   ORGANIZATION_NAME,
   ROOT_METADATA,
   SEO,

packages/ui-filecoin/src/styles/button.css

@@ -38,7 +38,7 @@
       }
 
       .light-section & {
-        @apply text-zinc-950;
+        @apply bg-white text-zinc-950;
 
         & .button-arrow-icon {
           @apply text-zinc-500;
@@ -54,7 +54,7 @@
       }
 
       .dark-section & {
-        @apply text-zinc-50;
+        @apply bg-zinc-950 text-zinc-50;
 
         & .button-arrow-icon {
           @apply text-zinc-300;