SponsorReel

src/components/Sections/FullWidthSection.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+import { PageSection } from "@components/index";
+
+const StyledSection = styled(PageSection)`
+  display: grid;
+  padding: 24px;
+
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    "title"
+    "content";
+
+  * {
+    grid-area: content;
+  }
+
+  & > h1,
+  & > h2,
+  & > h3,
+  & > h4,
+  & > h5,
+  & > h6 {
+    text-align: center;
+    grid-area: title;
+  }
+`;
+
+const FullWidthSection: React.FC = (props) => (
+  <StyledSection {...props} />
+)
+
+export default FullWidthSection;

src/components/SponsorReel/SponsorReel.scss

@@ -1,35 +0,0 @@
-@import "../../assets/scss/globals";
-
-
-.sponsor-reel {
-  text-align: center;
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-weight: 500;
-    color: color(dark-blue);
-    margin: 1rem 0 4rem;
-    font-size: 14px;
-
-    @media screen and (max-width: 1200px - 1px) {
-      font-size: 16px;
-    }
-  }
-
-  a {
-    color: color(blue1);
-    text-decoration: underline;
-  }
-
-  &-logos {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    margin-bottom: 3rem;
-
-    img {
-      margin: 0.5rem 0.5rem;
-    }
-  }
-}

src/components/SponsorReel/SponsorReel.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import "./SponsorReel.scss";
-import TextAnchor from "../TextAnchor";
-import Anchor from "../Anchor";
-
-export interface SponsorReelProps { }
-export interface SponsorReelState { }
-
-class SponsorReel extends React.Component<SponsorReelProps, SponsorReelState> {
-  render() {
-    return (
-      <div className="sponsor-reel">
-        <h3>Yhteistyössä</h3>
-        <div className="sponsor-reel-logos">
-          <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
-          <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
-          <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
-          <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
-          <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
-        </div>
-        <TextAnchor textColor="blue1" hoverColor="light-turquoise" to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</TextAnchor>
-      </div>
-    );
-  }
-}
-
-export default SponsorReel;

src/components/SponsorReel/index.ts

@@ -1,2 +0,0 @@
-import SponsorReel from "./SponsorReel";
-export default SponsorReel;

src/components/index.tsx

@@ -1,7 +1,6 @@
 export { default as Card } from "./Card";
 export { default as PageLink } from "./PageLink";
 export { default as Button } from "./Button";
-export { default as SponsorReel } from "./SponsorReel";
 export { default as TextAnchor } from "./TextAnchor";
 export { default as PageSection } from "./Sections/PageSection";
 export { default as Divider } from "./Divider";

src/views/FrontPage/FrontPageView.tsx

@@ -1,24 +1,39 @@
 import React from "react";
 import styled from "styled-components";
-import { PageSection, Card, PageLink, SponsorReel, Divider, CardSection, SossoSection } from "@components/index";
+import { Card, PageLink, Divider, CardSection, SossoSection } from "@components/index";
 import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
 import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
+import FullWidthSection from "@components/Sections/FullWidthSection";
 
 interface FrontPageViewProps {
   events: Event[];
   feed: Post[];
 }
 
-const SponsorSection = styled(PageSection)`
-  justify-content: center;
+const SponsorReel = styled.div`
+  text-align: center;
+  & > div {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    margin-top: 1rem;
+    margin-bottom: 4rem;
+
+    & > * {
+      margin: 0 1rem;
+    }
+  }
 
-  color: ${colors.black};
-  background-color: ${colors.white};
   a {
     color: ${colors.blue1};
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 `;
 
@@ -73,10 +88,21 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         </div>
       </CardSection>
 
-      <SponsorSection>
-        <Divider />
-        <SponsorReel />
-      </SponsorSection>
+      <Divider />
+
+      <FullWidthSection>
+        <h6>Yhteistyössä:</h6>
+        <SponsorReel>
+          <div>
+            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
+            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
+            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
+            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
+            <Anchor to="#"><img src="https://placehold.it/200x200" /></Anchor>
+          </div>
+          <Anchor to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Anchor>
+        </SponsorReel>
+      </FullWidthSection>
     </main>
   </>
 )