og particles simplified and spacing

efdevcon · Jan 2, 2024 · ac08412 · ac08412
1 parent ae8c6b9
commit ac08412
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 19 deletions.
diff --git a/devcon/public/assets/images/dc7-og.png b/devcon/public/assets/images/dc7-og.png
diff --git a/devcon/src/components/domain/index/hero/Hero.tsx b/devcon/src/components/domain/index/hero/Hero.tsx
@@ -227,13 +227,13 @@ export const Hero = () => {
           <motion.div className={css['backdrop']} style={{ x: transformX, y: transformY }}>
             <Image src={DC7Backdrop} alt="Infinite Garden leading to Southeast Asia" priority />
 
-            <div className="absolute top-0 w-full h-[25vh]">
+            {/* <div className="absolute top-0 w-full h-[25vh]">
               <Fireflies settings={{ count: 200, speed: 0.1, radius: 2 }} id="upper-fireflies" />
             </div>
 
             <div className="absolute bottom-0 w-full h-[35vh]">
               <Fireflies settings={{ count: 200, speed: 0.3, radius: 2 }} id="bottom-fireflies-2" />
-            </div>
+            </div> */}
 
             {/* <div className="absolute bottom-0 w-full h-[20vh] overflow-hidden">
               <Fireflies id="lower-fireflies" />
@@ -250,20 +250,20 @@ export const Hero = () => {
 
           <motion.div className={css['left']} style={{ x: transformLeftX, y: transformLeftY }}>
             <Image src={DC7Left} alt="Left Bush" priority />
-            <div className="absolute top-0 h-full w-[20vw]">
+            {/* <div className="absolute top-0 h-full w-[20vw]">
               <Fireflies settings={{ count: 150, speed: 0.5, radius: 2.5 }} id="left-fireflies" />
-            </div>
+            </div> */}
           </motion.div>
           <motion.div className={css['right']} style={{ x: transformLeftX, y: transformLeftY }}>
             <Image className={css['right']} src={DC7Right} alt="Right Bush" priority />
-            <div className="absolute top-0 right-0 h-full w-[20vw]">
+            {/* <div className="absolute top-0 right-0 h-full w-[20vw]">
               <Fireflies settings={{ count: 150, speed: 0.5, radius: 2.5 }} id="right-fireflies" />
-            </div>
+            </div> */}
           </motion.div>
 
-          {/* <div className="absolute bottom-0 w-full h-full">
+          <div className="absolute bottom-0 w-full h-full">
             <Fireflies settings={{ color: 'rgba(236, 196, 94, 1)' }} id="lower-fireflies" />
-          </div> */}
+          </div>
 
           {/* <div className="absolute left-0 h-full w-[40vh] overflow-hidden">
             <Fireflies id="left-fireflies" />
@@ -297,8 +297,8 @@ export const Hero = () => {
                   <Image src={DC7Logo} alt="Devcon 7 Logo" priority />
                 </div>
                 <div className="relative">
-                  <div className="absolute left-[45%] bottom-[20%] w-full h-full z-10">
-                    <Butterflies2 />
+                  <div className="absolute left-[45%] bottom-[0%] w-full h-full z-10 hidden lg:block">
+                    <Butterflies />
                   </div>
                   <Image
                     className={css['dc7-logo-text']}
@@ -310,7 +310,7 @@ export const Hero = () => {
               </div>
               <div className={css['right']}>
                 <div className={css['butterflies']}>
-                  <Butterflies />
+                  <Butterflies2 />
                 </div>
                 <Image className={css['dc7-logo-text']} src={DC7OverlayRight} alt="Event location" priority />
               </div>

diff --git a/devcon/src/components/domain/index/hero/dc7/fireflies.js b/devcon/src/components/domain/index/hero/dc7/fireflies.js
@@ -105,7 +105,7 @@ function setOpacity(color, opacity) {
 export const Fireflies = props => {
   React.useEffect(() => {
     new Animation(`#${props.id}`, {
-      count: 100,
+      count: 75,
       color: 'rgba(236, 196, 94, 1)',
       //   color: 'rgba(236, 196, 255, 1)',
       speed: 0.6,

diff --git a/devcon/src/components/domain/index/hero/dc7/particles.module.scss b/devcon/src/components/domain/index/hero/dc7/particles.module.scss
@@ -111,7 +111,7 @@ $borboleta-2-oval:3s;
         animation: borboleta-gfx-upright-loop $borboleta-2-radial linear infinite;
     }
 
-    --butterfly-color: #f8f57f;
+    --butterfly-color: #e2e53a;
 
     .borboleta-anim{
         $circle:radial-gradient(closest-side at 50% 50%,var(--butterfly-color) 50%,transparentize(white,1) 50%);

diff --git a/devcon/src/components/domain/seo/SEO.tsx b/devcon/src/components/domain/seo/SEO.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import Head from 'next/head'
-import { useTranslations } from 'next-intl'
+// import { useTranslations } from 'next-intl'
 import { useRouter } from 'next/router'
 import { Twitter } from './Twitter'
 import { SITE_URL } from 'utils/constants'
 import { usePageContext } from 'context/page-context'
-import { EventMetadata } from './EventMetadata'
+// import { EventMetadata } from './EventMetadata'
 
 interface SEOProps {
   title?: string
@@ -34,8 +34,9 @@ export function SEO(props: SEOProps) {
   }
 
   const globalTitle = 'Devcon 2024' // Bogotá, Oct 11 → 14'
-  const globalDescription = 'Devcon is an intensive introduction for new Ethereum explorers, a global family reunion for those already a part of our ecosystem, and a source of energy and creativity for all.'
-  const globalImage = 'https://www.devcon.org/assets/images/og-graph.png'
+  const globalDescription =
+    'Devcon is an intensive introduction for new Ethereum explorers, a global family reunion for those already a part of our ecosystem, and a source of energy and creativity for all.'
+  const globalImage = 'https://www.devcon.org/assets/images/dc7-og.png'
   const canonical = props.canonicalUrl || ''
 
   let description = globalDescription

diff --git a/devcon/src/pages/index.tsx b/devcon/src/pages/index.tsx
@@ -196,14 +196,14 @@ export default pageHOC(function Index(props: any) {
         {/* <div className="clear-bottom border-bottom"></div> */}
 
         <div className="section">
-          <div className="relative pt-8">
+          <div className="relative pt-9">
             <div className={`${css['scrolling-text-background']} ${css['alternate']}`}>
               {/* <InfiniteScroller nDuplications={2} speed="150s">
                 <p className="bold rotate-x-180">ROAD TO DEVCON&nbsp;</p>
               </InfiniteScroller> */}
             </div>
 
-            <div className="rich-text">
+            <div className="rich-text mb-7">
               <TinaMarkdown content={data.pages.section5?.title}></TinaMarkdown>
             </div>