fix: home page firefox related style issues (#2263)

* fix firefox related style issues * adjust component spawn sequence
dfinity · Dec 8, 2023 · 09b8078 · 09b8078
1 parent c3acdff
commit 09b8078
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/src/components/LandingPage/Hero/ChatWidget.tsx b/src/components/LandingPage/Hero/ChatWidget.tsx
@@ -69,7 +69,7 @@ export const ChatWidget: React.FC<{
               key={i}
               className={clsx(
                 "row-start-1 col-start-1 transition-opacity duration-500 delay-200",
-                widgetLoaded && placeholderIndex === i
+                fontLoaded && widgetLoaded && placeholderIndex === i
                   ? "opacity-100"
                   : "opacity-0"
               )}

diff --git a/src/components/LandingPage/Hero/Hero.tsx b/src/components/LandingPage/Hero/Hero.tsx
@@ -34,7 +34,7 @@ const Hero: React.FC<{
       <ParticleAnimation />
 
       <div className="pt-40 pb-8 md:pt-52 md:pb-30 md:grid relative mt-[-72px] md:mt-[-111px]">
-        <div className="container-10 col-start-1 row-start-1">
+        <div className="container-10 col-start-1 row-start-1 w-full">
           <div className="md:w-7/10 lg:w-8/10">
             <h1
               className="

diff --git a/src/components/LandingPage/NewsletterSection/NewsletterSection.tsx b/src/components/LandingPage/NewsletterSection/NewsletterSection.tsx
@@ -4,12 +4,17 @@ import Newsletter from "../../Common/Newsletter/Newsletter";
 const NewsletterSection: React.FC = () => {
   return (
     <section
-      className="mt-20 mb-20 md:mt-52 md:mb-30 container-12"
+      className="mt-20 mb-20 md:mt-30 md:mb-30 container-12"
       id="subscribe"
     >
       <div className="bg-gradient-100 from-[#3B00B9] to-[#2586B6DE] rounded-xl md:rounded-[32px] overflow-hidden relative">
-        <div className="pl-6 md:pl-0 md:absolute right-0 top-0 bottom-0 flex ml-auto">
-          <img src="/img/home/newsletter-home.webp" alt="" loading="lazy" />
+        <div className="pl-6 md:pl-0 md:absolute right-0 top-0 bottom-0 flex ml-auto justify-end">
+          <img
+            src="/img/home/newsletter-home.webp"
+            alt="Subscribe to newsletter"
+            loading="lazy"
+            className="object-contain object-right"
+          />
         </div>
         <div className="container-10 flex items-center w-full">
           <div className="relative mt-6 md:max-w-[600px] mr-auto mb-10 md:my-20">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -37,13 +37,7 @@ export default function Home(): JSX.Element {
       editPath={`https://github.com/dfinity/portal/edit/master/${__filename}`}
     >
       <Hero
-        headline={
-          <>
-            CYPHER
-            <wbr />
-            SPACE AS CLOUD
-          </>
-        }
+        headline={<>CYPHER&#8203;SPACE AS CLOUD</>}
         aiPlaceholders={[
           "Is the Internet Computer decentralized?",
           "What can I do with ICP token?",
@@ -53,10 +47,12 @@ export default function Home(): JSX.Element {
         <CardsSection />
         <NewsSection />
         <VisionSection>
-        Say hello to super advanced blockchain, reimagined as an infinite smart contract cloud, 
-        hosting not just tokens, but all the data, content, logic, computation and user experiences 
-        of web3 social media, game, metaverse and DeFi, alongside enterprise services, fully on-chain, 
-        realizing World Computer "full stack decentralization" on a public network for the first time.
+          Say hello to super advanced blockchain, reimagined as an infinite
+          smart contract cloud, hosting not just tokens, but all the data,
+          content, logic, computation and user experiences of web3 social media,
+          game, metaverse and DeFi, alongside enterprise services, fully
+          on-chain, realizing World Computer "full stack decentralization" on a
+          public network for the first time.
           <CollapsedVisionSection>
             A network formed by the IC protocol, created through a relentless
             R&D operation incorporating hundreds of person-years development