diff --git a/components/GiftShop/Card/index.module.scss b/components/GiftShop/Card/index.module.scss new file mode 100644 index 0000000..88f3164 --- /dev/null +++ b/components/GiftShop/Card/index.module.scss @@ -0,0 +1,152 @@ +@use 'styles/colors'; + +.root { + width: 35rem; + flex-shrink: 0; + display: flex; + height: 270px; + margin-top: 20px; + padding: 14px; + text-decoration: none; + color: black; + border: 1px solid transparentize(black, 0.9); + border-radius: 8px; +} + +.image { + flex-shrink: 0; + max-width: 300px; + height: 100%; + object-fit: cover; + border-radius: 4px; +} + +.content { + margin-left: 15px; +} + +.main { + grid-area: main; + display: flex; + flex-direction: column; +} + +.name { + flex-shrink: 0; + font-size: 25px; + font-weight: 700; +} + +.subtitle { + flex-grow: 1; + margin-top: 5px; + margin-bottom: 15px; + font-weight: 600; + opacity: 0.5; +} + +.info { + grid-area: info; +} + +.bits { + display: flex; + align-items: center; + margin-left: 1px; + font-weight: 900; + color: colors.$purple; +} + +.bit { + flex-shrink: 0; + height: 26px; + margin-right: 8px; +} + +.time { + display: flex; + align-items: center; + margin: 8px 0 0 3px; + font-weight: 900; +} + +.timeInfo { + flex-shrink: 0; + height: 19px; + margin-right: 10px; +} + +.participants { + display: flex; + align-items: center; + margin: 8px 0 0 4px; + font-weight: 900; +} + +.participant { + flex-shrink: 0; + height: 19px; + margin-right: 10px; +} + +.tags { + flex-shrink: 0; + display: flex; + margin-top: 12px; + overflow-x: auto; +} + +.tag { + flex-shrink: 0; + padding: 6px 12px; + font-size: 14px; + font-weight: 700; + color: colors.$blue; + background: transparentize(colors.$blue, 0.9); + border-radius: 4px; + + & + & { + margin-left: 8px; + } +} + +.view { + margin-top: 15px; + justify-self: end; + align-self: end; + display: flex; + justify-content: center; + align-items: center; + position: relative; + max-width: 250px; + min-width: 200px; + width: 100%; + height: 50px; + text-align: center; + font-size: 18px; + font-weight: 700; + color: white; + background: colors.$blue; + border-radius: 4px; + transition: opacity 0.3s; + + &:hover { + opacity: 0.7; + } +} + +.viewInfo { + $right: 17px; + $width: 26px; + + position: absolute; + top: 50%; + right: $right; + width: $width; + transform: translateY(-50%); + transition: transform 0.3s; + + .view:hover & { + transform: translate($right + $width, -50%); + } +} diff --git a/components/GiftShop/Card/index.tsx b/components/GiftShop/Card/index.tsx new file mode 100644 index 0000000..7c95459 --- /dev/null +++ b/components/GiftShop/Card/index.tsx @@ -0,0 +1,45 @@ +import Link from 'next/link' +import { Svg } from 'react-optimized-image' + +import bit from 'images/icons/bit.svg' +import right from 'images/icons/arrow-right.svg' +import macbook from 'images/macbook.svg' + +import styles from './index.module.scss' + +const Prizes = () => { + return ( + <> + + + + + + The Cure + + This prize allows you to eliminate ED in your body. Your + welcome. + + + + + + 100,000 + + + + Health + + + + Buy Now + + + + + + + ) +} + +export default Prizes diff --git a/components/GiftShop/Header/index.module.scss b/components/GiftShop/Header/index.module.scss new file mode 100644 index 0000000..1508b86 --- /dev/null +++ b/components/GiftShop/Header/index.module.scss @@ -0,0 +1,111 @@ +@use 'styles/colors'; + +$border-radius: 30px; + +.root { + display: flex; + justify-content: space-around; + align-items: center; + padding: 20px 0; + background: colors.$purple; + border-radius: 0 0 $border-radius $border-radius; +} + +.info { + color: white; +} + +.title { + font-size: 40px; + font-weight: 900; +} + +.subtitle { + color: white; + margin-top: 8px; + font-size: 30px; + font-weight: 700; + opacity: 0.5; +} + +.subtitleSmall { + color: black; + text-align: center; + margin-top: 10px; + margin-bottom: 10px; +} + +.balance { + $height: 54px; + display: flex; + align-items: center; + min-width: 170px; + max-width: max-content; + height: $height; + margin-top: 30px; + padding: 0 16px 0 8px; + font-size: 30px; + font-weight: 900; + background: transparentize(white, 0.7); + border-radius: $height / 2; +} + +.bit { + flex-shrink: 0; + height: 46px; + margin-right: 12px; +} + +.popular { + margin: 25px 0; + border-radius: 5px; + border-color: black; + border-width: 10px; + background-color: white; + padding: 20px; +} + +.art { + flex-shrink: 0; + display: block; + height: 300px; + margin: auto; +} + +.buy { + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + position: relative; + height: 50px; + margin-top: 12px; + text-align: center; + font-size: 18px; + font-weight: 700; + color: white; + background: colors.$blue; + border-radius: 4px; + transition: opacity 0.3s; + cursor: pointer; + + &:hover { + opacity: 0.7; + } +} + +.buyInfo { + $right: 17px; + $width: 26px; + + position: absolute; + top: 50%; + right: $right; + width: $width; + transform: translateY(-50%); + transition: transform 0.3s; + + .buy:hover & { + transform: translate($right + $width, -50%); + } +} diff --git a/components/GiftShop/Header/index.tsx b/components/GiftShop/Header/index.tsx new file mode 100644 index 0000000..487492c --- /dev/null +++ b/components/GiftShop/Header/index.tsx @@ -0,0 +1,43 @@ +import { useRecoilValue } from 'recoil' +import Img, { Svg } from 'react-optimized-image' + +import formatNumber from 'lib/format/number' +import userState from 'state/user' + +import bit from 'images/icons/bit.svg' +import macbook from 'images/macbook.svg' +import right from 'images/icons/arrow-right.svg' + +import styles from './index.module.scss' + +const GiftShopHeader = () => { + const user = useRecoilValue(userState) + + return ( +
+
+

Gift Shop

+

+ Spend Your Hard Earned, Or Paid To Win Bits Here! +

+

+ + Balance: {formatNumber(user?.bits ?? 0)} +

+
+
+

Our Most Popular Prize!

+
+

2018 Apple Macbook Pro

+ + + Buy! + + +
+
+
+ ) +} + +export default GiftShopHeader diff --git a/components/GiftShop/index.module.scss b/components/GiftShop/index.module.scss new file mode 100644 index 0000000..b2a3745 --- /dev/null +++ b/components/GiftShop/index.module.scss @@ -0,0 +1,9 @@ +.root { + display: grid; + grid: + 'filters summary' auto + 'filters results' 1fr / + 300px 1fr; + gap: 0 80px; + padding: 40px 50px; +} diff --git a/components/GiftShop/index.tsx b/components/GiftShop/index.tsx new file mode 100644 index 0000000..be00151 --- /dev/null +++ b/components/GiftShop/index.tsx @@ -0,0 +1,22 @@ +import { NextPage } from 'next' + +import Header from './Header' +import Filters from '../Hackathons/Filters' +import Summary from '../Hackathons/Summary' +import Results from '../Hackathons/Results' + +import styles from './index.module.scss' +import Prizes from './Card' + +const GiftShop: NextPage = () => ( + <> +
+
+ + + +
+ +) + +export default GiftShop diff --git a/images/bits/header.png b/images/bits/header.png index e8986e8..d79caa7 100644 Binary files a/images/bits/header.png and b/images/bits/header.png differ diff --git a/images/home/bits-art.png b/images/home/bits-art.png index 80ce38c..697f2c8 100644 Binary files a/images/home/bits-art.png and b/images/home/bits-art.png differ diff --git a/images/home/header-art.png b/images/home/header-art.png index e8c78f6..9e83271 100644 Binary files a/images/home/header-art.png and b/images/home/header-art.png differ diff --git a/images/home/person.svg b/images/home/person.svg index a21544c..d51cf6c 100644 --- a/images/home/person.svg +++ b/images/home/person.svg @@ -1,14 +1 @@ - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/images/icons/arrow-right.svg b/images/icons/arrow-right.svg index bf23d39..7fac99d 100644 --- a/images/icons/arrow-right.svg +++ b/images/icons/arrow-right.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/bell.svg b/images/icons/bell.svg index 43613d0..0c476a3 100644 --- a/images/icons/bell.svg +++ b/images/icons/bell.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/bit.svg b/images/icons/bit.svg index ca074f2..38325a6 100644 --- a/images/icons/bit.svg +++ b/images/icons/bit.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/images/icons/check-circle.svg b/images/icons/check-circle.svg index c6d255f..93096bb 100644 --- a/images/icons/check-circle.svg +++ b/images/icons/check-circle.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/images/icons/check.svg b/images/icons/check.svg index 051a6bf..71835d9 100644 --- a/images/icons/check.svg +++ b/images/icons/check.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/chevron-down.svg b/images/icons/chevron-down.svg index ce97146..24e9932 100644 --- a/images/icons/chevron-down.svg +++ b/images/icons/chevron-down.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/date.svg b/images/icons/date.svg index 017f270..4f4bce2 100644 --- a/images/icons/date.svg +++ b/images/icons/date.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/images/icons/github.svg b/images/icons/github.svg index 83d1348..56f6dba 100644 --- a/images/icons/github.svg +++ b/images/icons/github.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/plus.svg b/images/icons/plus.svg index b569b2c..fb7ea52 100644 --- a/images/icons/plus.svg +++ b/images/icons/plus.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/search.svg b/images/icons/search.svg index b4ba8d9..df82e90 100644 --- a/images/icons/search.svg +++ b/images/icons/search.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/shop.svg b/images/icons/shop.svg index 5dd4094..0089a4e 100644 --- a/images/icons/shop.svg +++ b/images/icons/shop.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/icons/stars.svg b/images/icons/stars.svg index d16e897..5579a9c 100644 --- a/images/icons/stars.svg +++ b/images/icons/stars.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/images/icons/user.svg b/images/icons/user.svg index ca1fc35..3e5c7b8 100644 --- a/images/icons/user.svg +++ b/images/icons/user.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/images/macbook.svg b/images/macbook.svg new file mode 100644 index 0000000..90008a5 --- /dev/null +++ b/images/macbook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/manage/general.svg b/images/manage/general.svg index 6b3f329..1436694 100644 --- a/images/manage/general.svg +++ b/images/manage/general.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/images/manage/organizers.svg b/images/manage/organizers.svg index c61c2b0..57c8683 100644 --- a/images/manage/organizers.svg +++ b/images/manage/organizers.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/images/manage/teams.svg b/images/manage/teams.svg index cd882c5..75ec7f7 100644 --- a/images/manage/teams.svg +++ b/images/manage/teams.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e719390..bef6d7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3784,7 +3784,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.3.1", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5267,8 +5266,6 @@ "dependencies": { "@firebase/database": "^0.8.1", "@firebase/database-types": "^0.6.1", - "@google-cloud/firestore": "^4.5.0", - "@google-cloud/storage": "^5.3.0", "@types/node": "^10.10.0", "dicer": "^0.3.0", "jsonwebtoken": "^8.5.1", diff --git a/pages/shop.tsx b/pages/shop.tsx new file mode 100644 index 0000000..19b1f75 --- /dev/null +++ b/pages/shop.tsx @@ -0,0 +1 @@ +export { default } from 'components/GiftShop'