Merge pull request #1034 from voluntarily/VP1872-Launch-Launch-launch

Vp1872 launch launch launch

components/Act/ActListSection.js

@@ -6,7 +6,7 @@ import ActSearchInput from './ActSearchInput'
 import ActMenu from './ActMenu'
 import ActCard from './ActCard'
 import styled from 'styled-components'
-import { List } from 'antd'
+import { List, Card } from 'antd'
 import { useRouter } from 'next/router'
 
 const escapeRegex = require('../../server/util/regexUtil')
@@ -80,31 +80,42 @@ export const ActListSection = () => {
       <ActSearchInput value={search} onSearch={handleSearch} loading={activities.loading} />
       <SidebarGrid>
         <ActMenu acts={acts} onClick={handleMenu} />
-        <List
+        <div>
+          <List
           // grid={{ gutter: 16, column: 3 }}
-          grid={{
-            gutter: 16,
-            xs: 1,
-            sm: 2,
-            md: 2,
-            lg: 3,
-            xl: 3,
-            xxl: 3
-          }}
-          dataSource={acts}
-          loading={activities.loading}
-          pagination={{
-            defaultCurrent: 1,
-            defaultPageSize: 12,
-            hideOnSinglePage: true
+            grid={{
+              gutter: 16,
+              xs: 1,
+              sm: 2,
+              md: 2,
+              lg: 3,
+              xl: 3,
+              xxl: 3
+            }}
+            dataSource={acts}
+            loading={activities.loading}
+            pagination={{
+              defaultCurrent: 1,
+              defaultPageSize: 12,
+              hideOnSinglePage: true
             // size: 'small'
-          }}
-          renderItem={(act) => (
-            <List.Item>
-              <ActCard act={act} />
-            </List.Item>
-          )}
-        />,
+            }}
+            renderItem={(act) => (
+              <List.Item>
+                <ActCard act={act} />
+              </List.Item>
+            )}
+          />
+          <Card>Cant find what you want?
+            <a
+              target='_blank'
+              rel='noopener noreferrer'
+              href='https://voluntarily.atlassian.net/servicedesk/customer/portal/2/group/3/create/17'
+            >
+            Suggest an activity here
+            </a>
+          </Card>
+        </div>
       </SidebarGrid>
     </>
   )

components/Act/ActMenu.js

@@ -1,6 +1,8 @@
 import { Menu } from 'antd'
 import styled from 'styled-components'
 
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 /**
  *
  * @param {*} acts - array of activities with offerOrg
@@ -45,7 +47,7 @@ const ActivityMenu = styled(Menu)`
 
 const ActMenu = ({ acts, onClick }) => {
   const [counts, orgs] = countOfferOrgs(acts)
-
+  const router = useRouter()
   return (
     <ActivityMenu>
       <Menu
@@ -61,6 +63,13 @@ const ActMenu = ({ acts, onClick }) => {
               </Menu.Item>
             )
           })}
+
+          <Menu.Item key='back'>
+            <Link href={`/a/${router.query.type}`}>
+           See all
+            </Link>
+          </Menu.Item>
+
         </Menu.ItemGroup>
         {/* <Menu.ItemGroup className='color'>More filters</Menu.ItemGroup> */}
       </Menu>

components/Home/HomeTabs.js

@@ -59,12 +59,13 @@ export const HomeTabs = ({ person, onChange, defaultTab }) =>
   <VTabs defaultActiveKey={defaultTab} onChange={onChange}>
     <TabPane tab={homeDiscoverTab} key='discover' style={{ overflow: 'visible' }}>
       <ProfilePanel>
+        <PersonalGoalSection />
         <RecommendedOpsSection />
       </ProfilePanel>
     </TabPane>
     <TabPane tab={homeActiveTab} key='active' style={{ overflow: 'visible' }}>
       <ProfilePanel>
-        <PersonalGoalSection />
+
         <ActiveOpsSection />
         <InterestedOpsSection />
       </ProfilePanel>

components/LandingPageComponents/Hero.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { LearnMoreButton, SignUpButton } from '../../components/VTheme/Buttons'
+import { HeroItem, HeroText } from '../VTheme/VTheme'
 // import { Button } from 'antd'
 // const Search = Input.Search
 
@@ -29,122 +30,6 @@ max-width: 80rem;
   }
 `
 
-// start left hand video side
-const HeroItem = styled.div`
-position: relative;
-padding: 1.5rem;
-    width: 100%;
-    background-color: black;
-    height:40vh;
-    min-height: 400px;
-    max-height: 450px;
-    overflow: hidden;
-    border-radius: 24px;
-    
- box-shadow:  20px 20px 60px #d9d9d9; 
-        img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-
-    z-index: 0;
-    object-fit: cover;
-    object-position: center;
-    }
-  
-
-@media screen and (min-width: 1025px) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-:hover {
-  box-shadow: 1px 1px 12px 2px rgba(10,10,10,0.1);
-  transform: scale(1.04);
-  
-  h1 {
-    -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-    color: #FFD9FB;
-  }
-}
-}
-
-    @media screen and (max-width: 1024px) {
-  border-radius: 0;
-  height:50vh;
-  img {
-    height: 100%;
-
-    object-position: center top;
-  }
-  }
-  @media screen and (max-width: 768px) {
-height:50vh;
-  }
- 
-
-
-`
-
-// end left hand video side
-
-const HeroText = styled.section`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-    height: 100%;
-    align-items: flex-start;
-    justify-content: flex-end;
-z-index: 100;
-
-
-    h1 {
-font-weight: 600;
-font-size: 2rem;
-line-height: 1.5;
-letter-spacing: -0.2px;
-z-index: 100;
-
-color: white;
-}
-p {
-  min-height: 60px;
-  font-size: 1.25rem;
-  font-weight: 400;
-letter-spacing: 0;
-z-index: 100;
-margin-bottom: 0;
-
-color: white;
-}
-
-  @media screen and (min-width: 768px) and (max-width: 1025px) {
-    padding: 1.5rem;
-    h1 {
-    font-size:2.5rem;
-  }
-    p {
-      font-size: 1.5rem;
-  line-height: 1.5;
-  min-height: initial;
-
- }
-  }
-  @media screen and (max-width: 768px) {
-  h1 {
-    font-size: 2rem;
-    line-height: 1.5;
-    margin-bottom: 0;
-    
-  }
-  p {
-    font-size: 1.5rem;
-  }
-  }
-  
-`
-
 const CTAGrid = styled.section`
 max-width: 80rem;
 border-radius: 24px;

components/LandingPageComponents/WhoSection.js

@@ -0,0 +1,107 @@
+
+import React from 'react'
+import styled from 'styled-components'
+import { H2, TripleGrid, HeroText, HeroItemStatic } from '../VTheme/VTheme'
+import { FormattedMessage } from 'react-intl'
+
+const PersonaBox = styled.section`
+@media screen and (max-width: 1300px) {
+  margin: 0 1rem;
+}
+ 
+`
+
+const PersonaHeader = styled.div`
+margin: 4rem 0;
+text-align: center;
+
+h2 {
+  font-weight: 700;
+  
+}
+
+@media screen and (max-width: 768px) {
+  margin-top: 2rem;
+}
+`
+const ComingSoonTag = styled.p`
+position: absolute;
+z-index: 1200;
+background-color: black;
+padding: 0.5rem 1rem;
+border-radius: 120px;
+font-weight: 700;
+color: white;
+font-size: 1.2rem;
+
+
+`
+
+const WhoSection = () => (
+  <PersonaBox>
+    <PersonaHeader>
+      <H2>Who we help</H2>
+    </PersonaHeader>
+    <TripleGrid>
+      <HeroItemStatic>
+
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.schools'
+              defaultMessage='Schools'
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.schools'
+              defaultMessage='Connect your class or school with industry volunteers and experts'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/school.png' />
+      </HeroItemStatic>
+      <HeroItemStatic>
+        <ComingSoonTag>Coming Soon</ComingSoonTag>
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.communities'
+              defaultMessage='Communities'
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.communities'
+              defaultMessage='White label the site to manage your volunteers safely'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/community.png' />
+      </HeroItemStatic>
+      <HeroItemStatic>
+        <ComingSoonTag>Coming Soon</ComingSoonTag>
+        <HeroText>
+          <h1>
+            <FormattedMessage
+              id='who.title.business'
+              defaultMessage='Small businesses '
+            />
+          </h1>
+          <p>
+            <FormattedMessage
+              id='who.body.business'
+              defaultMessage='Connect with experts to mentor and give free advice'
+            />
+          </p>
+
+        </HeroText>
+        <img src='/static/img/landing-pages/business.png' />
+      </HeroItemStatic>
+    </TripleGrid>
+
+  </PersonaBox>
+)
+export default WhoSection