More home page tweaks

Author: hach-que

src/Feature/index.tsx

@@ -25,26 +25,33 @@ export function Feature(props: { children: React.ReactNode }): JSX.Element {
 
   const children = React.Children.toArray(props.children);
 
-  const describer = children.filter(
+  const describerArray = children.filter(
     (x) => isValidElement(x) && x.type === Feature.Describer
-  )[0];
-  const visual = children.filter(
+  );
+  const visualArray = children.filter(
     (x) => isValidElement(x) && x.type === Feature.Visual
-  )[0];
+  );
 
-  if (sideContext.valueOf()) {
+  if (visualArray.length === 0 && describerArray.length === 2) {
+    return (
+      <>
+        <div className={classnames("col", "col--6")}>{describerArray[0]}</div>
+        <div className={classnames("col", "col--6")}>{describerArray[1]}</div>
+      </>
+    );
+  } else if (sideContext.valueOf()) {
     return (
       <>
-        <div className={classnames("col", "col--6")}>{describer}</div>
-        <div className={classnames("col", "col--6")}>{visual}</div>
+        <div className={classnames("col", "col--6")}>{describerArray[0]}</div>
+        <div className={classnames("col", "col--6")}>{visualArray[0]}</div>
       </>
     );
   } else {
     return (
       <>
-        <div className={classnames("col", "col--6")}>{visual}</div>
+        <div className={classnames("col", "col--6")}>{visualArray[0]}</div>
         <div className={classnames("col", "col--6", styles.reorder)}>
-          {describer}
+          {describerArray[0]}
         </div>
       </>
     );

src/pages/index.tsx

@@ -68,11 +68,11 @@ function Home() {
                 <Feature.Describer>
                   <h2>The trusted Epic Online Services integration</h2>
                   <p>
-                    Developed since the initial launch of Epic Online Services,
-                    and with over 3,000 developers and millions of players
-                    worldwide, Redpoint EOS Online Framework is the professional
-                    solution for game developers integrating Epic Online
-                    Services into Unreal Engine games.
+                    Developed since the launch of Epic Online Services, and with
+                    over 3,000 developers and millions of players worldwide,
+                    Redpoint EOS Online Framework is the professional solution
+                    for game developers integrating Epic Online Services into
+                    Unreal Engine games.
                   </p>
                   <p>
                     Our plugin is used everywhere - from the smallest indie
@@ -118,13 +118,6 @@ function Home() {
                     done for desktop, mobile and console platforms.
                   </p>
                 </Feature.Describer>
-                <Feature.Visual>
-                  <a href="#" target="_blank">
-                    <img src="#" className={classnames(styles.featureImage)} />
-                  </a>
-                </Feature.Visual>
-              </Feature>
-              <Feature>
                 <Feature.Describer>
                   <h2>Full console support</h2>
                   <p>
@@ -136,15 +129,10 @@ function Home() {
                     avatars in-game.
                   </p>
                   <p>
-                    With EOS Online Framework, you get to focus on building your
-                    game, not on console-specific code.
+                    With EOS Online Framework, you get to focus more on building
+                    your game and less on platform-specific code.
                   </p>
                 </Feature.Describer>
-                <Feature.Visual>
-                  <a href="#" target="_blank">
-                    <img src="#" className={classnames(styles.featureImage)} />
-                  </a>
-                </Feature.Visual>
               </Feature>
               <Feature>
                 <Feature.Describer>