Merge pull request reactbkk#64 from reactbkk/add-sponsor

add sponsors

components/NavigationBar.js

@@ -5,7 +5,7 @@ export default function NavigationBar () {
     <nav>
       <NavigationLink href='#about' disabled>About</NavigationLink>
       <NavigationLink href='#tickets'>Tickets</NavigationLink>
-      <NavigationLink href='#sponsors' disabled>Sponsors</NavigationLink>
+      <NavigationLink href='#sponsors'>Sponsors</NavigationLink>
       <NavigationLink href='#speakers'>Speakers</NavigationLink>
       <NavigationLink href='#schedule' disabled>Schedule</NavigationLink>
       <NavigationLink href='#contact'>Contact</NavigationLink>

components/SponsorsSection.js

@@ -0,0 +1,97 @@
+import SectionTitle from './SectionTitle'
+
+const sponsorsGold = [
+  'programmer-thai',
+  'sprin3r'
+]
+const sponsorsSliver = [
+  'cleverse',
+  'integenxe',
+  'omise',
+  'pronto',
+  'taskworld',
+  'thinknet',
+  'wongnai'
+]
+
+export default function TicketsSection () {
+  return (
+    <div className='tickets'>
+      <SectionTitle>Sponsors</SectionTitle>
+
+      <div className='item-sponsors-box'>
+        <div>
+          {sponsorsGold.map(name => (
+            <ItemSponsor
+              key={name}
+              src={`static/sponsor/${name}.svg`}
+              type='gold'
+            />
+          ))}
+        </div>
+        <div>
+          {sponsorsSliver.map(name => (
+            <ItemSponsor
+              key={name}
+              src={`static/sponsor/${name}.svg`}
+              type='sliver'
+            />
+          ))}
+        </div>
+      </div>
+
+      <style jsx>{`
+        .tickets {
+          text-align: center;
+        }
+        .item-sponsors-box {
+          max-width: 960px;
+          text-align: center;
+          margin: 0 auto;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function ItemSponsor ({ src, type }) {
+  return (
+    <div className={`sponsor-item-${type}`}>
+      <img src={src} width='100%' />
+
+      <style jsx>{`
+        .sponsor-item-gold, .sponsor-item-sliver {
+          display: inline-block;
+        }
+        .sponsor-item-gold {
+          width: 80%;
+          max-width: 300px;
+          padding: 0 30px;
+        }
+        .sponsor-item-sliver {
+          width: 30%;
+          max-width: 170px;
+          padding: 0 20px;
+        }
+
+        @media (max-width: 767px) {
+          .sponsor-item-gold {
+            max-width: 40%;
+            padding: 0 10px;
+          }
+          .sponsor-item-sliver {
+            width: 40%;
+            max-width: 150px;
+            padding: 0 10px;
+          }
+        }
+        @media (max-width: 480px) {
+          .sponsor-item-gold {
+            max-width: 100%;
+            padding: 0;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

pages/index.js

@@ -4,13 +4,16 @@ import MainLayout from '../components/MainLayout'
 import SectionSeparator from '../components/SectionSeparator'
 import SpeakersSection from '../components/SpeakersSection'
 import TicketsSection from '../components/TicketsSection'
+import SponsorsSection from '../components/SponsorsSection'
 
 export default () => (
   <MainLayout>
     <HeroUnit />
     <SectionSeparator first />
     <section id='tickets'><TicketsSection /></section>
     <SectionSeparator />
+    <section id='sponsor'><SponsorsSection /></section>
+    <SectionSeparator />
     <section id='speakers'><SpeakersSection /></section>
     <SectionSeparator />
     <section id='contact'><FooterSection /></section>