diff --git a/src/components/Sections/FullWidthSection.tsx b/src/components/Sections/FullWidthSection.tsx
new file mode 100644
index 0000000..52fa4eb
--- /dev/null
+++ b/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) => (
+
+)
+
+export default FullWidthSection;
diff --git a/src/components/SponsorReel/SponsorReel.scss b/src/components/SponsorReel/SponsorReel.scss
deleted file mode 100644
index 6652cef..0000000
--- a/src/components/SponsorReel/SponsorReel.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/src/components/SponsorReel/SponsorReel.tsx b/src/components/SponsorReel/SponsorReel.tsx
deleted file mode 100644
index 694cc3d..0000000
--- a/src/components/SponsorReel/SponsorReel.tsx
+++ /dev/null
@@ -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 {
- render() {
- return (
-
-
Yhteistyössä
-
-
Haluatko kuulla lisää yhteistyöstä kanssamme?
-
- );
- }
-}
-
-export default SponsorReel;
diff --git a/src/components/SponsorReel/index.ts b/src/components/SponsorReel/index.ts
deleted file mode 100644
index 3a66715..0000000
--- a/src/components/SponsorReel/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import SponsorReel from "./SponsorReel";
-export default SponsorReel;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 809820f..882f3b7 100644
--- a/src/components/index.tsx
+++ b/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";
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index 3430a68..ad4cad0 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/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 = ({ events, feed }) => (
-
-
-
-
+
+
+
+ Yhteistyössä:
+
+
+ Haluatko kuulla lisää yhteistyöstä kanssamme?
+
+
>
)