GitFOSS

@@ -122,6 +122,7 @@ function generateDescription(base: string, idx: number): string {
 
 const HomeView: ReactView<HomeViewProps> = (props) => {
   const { commonProps } = props;
+
   const primary = features.slice(0, 4); // top 4 features in cards
   const rest = features.slice(4); // remaining features in sections
 

@@ -225,105 +226,107 @@ const HomeView: ReactView<HomeViewProps> = (props) => {
               aria-label={`Feature: ${f.title}`}
               style={{ padding: "40px 0", minHeight: "80vh" }}
             >
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 48,
-                  flexWrap: "wrap",
-                }}
-              >
-                {isEven && (
-                  <>
-                    <div style={{ flex: 1, minWidth: 260 }}>
-                      <img
-                        src={imageSrc}
-                        alt={`${f.title} illustration`}
-                        style={{
-                          width: "100%",
-                          height: "auto",
-                          borderRadius: 24,
-                        }}
-                      />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 260 }}>
-                      <h1 style={{ margin: 0, fontSize: 48 }}>{f.title}</h1>
-                      <h3
-                        className="feature-desc"
-                        style={{
-                          color: "#777777",
-                          lineHeight: 1.4,
-                          fontWeight: "normal",
-                        }}
+              <style>{`
+                .feature-section {
+                  display: flex;
+                  align-items: center;
+                  gap: 48;
+                  flex-wrap: wrap;
+                }
+                .is-even {
+                  flex-direction: row-reverse;
+                }
+              `}</style>
+              {isEven && (
+                <div className="feature-section is-even">
+                  <div style={{ flex: 1, minWidth: 260 }}>
+                    <img
+                      src={imageSrc}
+                      alt={`${f.title} illustration`}
+                      style={{
+                        width: "100%",
+                        height: "auto",
+                        borderRadius: 24,
+                      }}
+                    />
+                  </div>
+                  <div style={{ flex: 1, minWidth: 260 }}>
+                    <h1 style={{ margin: 0, fontSize: 48 }}>{f.title}</h1>
+                    <h3
+                      className="feature-desc"
+                      style={{
+                        color: "#777777",
+                        lineHeight: 1.4,
+                        fontWeight: "normal",
+                      }}
+                    >
+                      {genDesc}
+                    </h3>
+                    <div
+                      className="cta"
+                      style={{ display: "flex", gap: 8, marginTop: 16 }}
+                    >
+                      <Button
+                        as="a"
+                        href={buildRouteLink(AppRoute.AUTH_REGISTER, {})}
                       >
-                        {genDesc}
-                      </h3>
-                      <div
-                        className="cta"
-                        style={{ display: "flex", gap: 8, marginTop: 16 }}
+                        Register
+                      </Button>
+                      <Button
+                        as="a"
+                        href={buildRouteLink(AppRoute.AUTH_LOGIN, {})}
                       >
-                        <Button
-                          as="a"
-                          href={buildRouteLink(AppRoute.AUTH_REGISTER, {})}
-                        >
-                          Register
-                        </Button>
-                        <Button
-                          as="a"
-                          href={buildRouteLink(AppRoute.AUTH_LOGIN, {})}
-                        >
-                          Login
-                        </Button>
-                      </div>
+                        Login
+                      </Button>
                     </div>
-                  </>
-                )}
-                {!isEven && (
-                  <>
-                    <div style={{ flex: 1, minWidth: 260 }}>
-                      <h1 style={{ margin: 0, fontSize: 48 }}>{f.title}</h1>
-                      <h3
-                        className="feature-desc"
-                        style={{
-                          color: "#777777",
-                          lineHeight: 1.4,
-                          fontWeight: "normal",
-                        }}
+                  </div>
+                </div>
+              )}
+              {!isEven && (
+                <div className="feature-section is-odd">
+                  <div style={{ flex: 1, minWidth: 260 }}>
+                    <h1 style={{ margin: 0, fontSize: 48 }}>{f.title}</h1>
+                    <h3
+                      className="feature-desc"
+                      style={{
+                        color: "#777777",
+                        lineHeight: 1.4,
+                        fontWeight: "normal",
+                      }}
+                    >
+                      {genDesc}
+                    </h3>
+                    <div
+                      className="cta"
+                      style={{ display: "flex", gap: 8, marginTop: 16 }}
+                    >
+                      <Button
+                        as="a"
+                        href={buildRouteLink(AppRoute.AUTH_REGISTER, {})}
                       >
-                        {genDesc}
-                      </h3>
-                      <div
-                        className="cta"
-                        style={{ display: "flex", gap: 8, marginTop: 16 }}
+                        Register
+                      </Button>
+                      <Button
+                        as="a"
+                        href={buildRouteLink(AppRoute.AUTH_LOGIN, {})}
                       >
-                        <Button
-                          as="a"
-                          href={buildRouteLink(AppRoute.AUTH_REGISTER, {})}
-                        >
-                          Register
-                        </Button>
-                        <Button
-                          as="a"
-                          href={buildRouteLink(AppRoute.AUTH_LOGIN, {})}
-                        >
-                          Login
-                        </Button>
-                      </div>
-                    </div>
-                    <div style={{ flex: 1, minWidth: 260 }}>
-                      <img
-                        src={imageSrc}
-                        alt={`${f.title} illustration`}
-                        style={{
-                          width: "100%",
-                          height: "auto",
-                          borderRadius: 24,
-                        }}
-                      />
+                        Login
+                      </Button>
                     </div>
-                  </>
-                )}
-              </div>
+                  </div>
+                  <div style={{ flex: 1, minWidth: 260 }}>
+                    <img
+                      src={imageSrc}
+                      alt={`${f.title} illustration`}
+                      style={{
+                        width: "100%",
+                        height: "auto",
+                        borderRadius: 24,
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
             </section>
           );
         })}