Add visual elements (#108)

* Add visual elements

* Add more space between Useful Links and connect with us

Author: tovi-fhe

src/components/HomepageFeatures/index.tsx

@@ -93,7 +93,47 @@ function Feature({title, Svg, description, linkTo, buttonTitle}: FeatureItem) {
 export default function HomepageFeatures(): JSX.Element {
     const { colorMode  } = useColorMode();
     return (
-    <section className={styles.features}>
+    <section className={styles.features} style={{ position: 'relative', overflow: 'visible'}}>
+
+      <div className="hide-small-width" style={{
+        position: 'absolute',
+        bottom: '30px',
+        left: '0px',
+        width: '281px',
+        height: '235px',
+        zIndex: -1,
+        opacity: 0.4,
+        overflow: 'visible',
+        
+      }}>
+        <img 
+            src="img/visuals/bottom-left.svg"
+            style={{
+                width: '100%', 
+                height: '100%',
+            }}
+        />
+      </div>
+
+      <div  className="hide-small-width" style={{
+        position: 'absolute',
+        bottom: '20px',
+        right: '0px',
+        width: '281px',
+        height: '235px',
+        zIndex: -1,
+        opacity: 0.4,
+        overflow: 'visible',
+        
+      }}>
+        <img 
+            src="img/visuals/bottom-right.svg"
+            style={{
+                width: '100%', 
+                height: '100%',
+            }}
+        />
+      </div>    
       <div className="container" style={{ marginBottom: "80px"}}>
           <div className="row" style={{ display: 'flex', justifyContent: 'flex-start' }}>
               <Heading as="h1" className="margin-bottom--lg orb-font" style={{ fontSize: 40, fontWeight: 'normal' }}>
@@ -108,12 +148,31 @@ export default function HomepageFeatures(): JSX.Element {
                 </div>
             ))}
           </div>
-          <div className="row" style={{ display: 'flex', justifyContent: 'center', marginTop: '80px'}}>
-              <Heading as="h1" className="text--center  orb-font" style={{ fontSize: 40, fontWeight: 'normal'}}>
+          <div className="row" style={{ overflow: 'visible', display: 'flex', justifyContent: 'center', marginTop: '130px', marginBottom: '80px'}}>
+              <Heading as="h1" className="text--center  orb-font" style={{ overflow: 'visible', position: 'relative', fontSize: 40, fontWeight: 'normal'}}>
                 Connect With US
+                <div style={{
+                        position: 'absolute',
+                        top: '-88px',
+                        left: '-68%',
+                        width: '800px',
+                        height: '205px',
+                        zIndex: -1,
+                        opacity: 0.4,
+                        overflow: 'visible',
+                        
+                    }}>
+                        <img 
+                            src="img/visuals/middle.svg"
+                            style={{
+                                width: '100%', 
+                                height: '100%',
+                            }}
+                        />
+                    </div>                
               </Heading>
           </div>
-          <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '40px', gap: '20px'}}>
+          <div className="row" style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '40px', gap: '20px'}}>
             <div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px' , color: '#0073E6'}}>
               <div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold', color: '#0073E6' }}>Fhenix Developer Updates</div>
               <div style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#003366'}}>Stay up-to-date on the latest Fhenix developer news</div>

src/pages/index.tsx

@@ -97,9 +97,27 @@ function HomepageHeader() {
                       </div>
                   </div>
 
-                  <div className="hide-small-width" style={{marginTop: "0px"}}>
-                  {/* <div className="" style={{marginTop: "-100px"}}> */}
-                  { (colorMode === 'dark') ? <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookDark.svg" style={{maxWidth: '650px'}}/> : <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookLight.svg" style={{maxWidth: '650px'}}/>}
+                  <div className="hide-small-width" style={{marginTop: "40px", position: 'relative', overflow: 'visible'}}>
+                    {/* <div className="" style={{marginTop: "-100px"}}> */}
+                    { (colorMode === 'dark') ? <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookDark.svg" style={{maxWidth: '600px'}}/> : <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookLight.svg" style={{maxWidth: '600px'}}/>}
+                    <div style={{
+                        position: 'absolute',
+                        top: '-25%',
+                        left: '-95px',
+                        width: '600px',
+                        height: '600px',
+                        zIndex: -1,
+                        opacity: 0.4
+                    }}>
+                        <img 
+                            src="img/visuals/top_section_no-book.svg"
+                            style={{
+                                width: '100%', 
+                                height: '100%',
+                                objectFit: 'cover'
+                            }}
+                        />
+                    </div>
                   </div>
               </div>