feat: build Fulgur Ad Card, fix scrollbar gutter problem, change SortBy Filter in hackathonsPage, fix overflow search input

This commit is contained in:
MTG2000
2022-07-05 16:28:20 +03:00
parent 309fef3b08
commit 28f0aef690
10 changed files with 299 additions and 212 deletions

View File

@@ -0,0 +1,26 @@
import Button from 'src/Components/Button/Button'
import Logo from './fulgur_logo.svg'
import Lines from './lines-h.png'
export default function Fulgur() {
return (
<div className='p-24 pt-48 bg-black rounded-16 relative'>
<img src={Lines} alt="" className='w-full absolute top-0 left-0' />
<div className="flex flex-col gap-24 relative">
<img src={Logo} alt="Fulgur Ventures Logo" className='w-10/12 max-w-[230px] ' />
<div>
<h3 className="text-white font-bolder text-body1">Turn your hackathon project into a startup</h3>
<p className="text-white font-medium mt-8 text-body4">Schedule an office hour with Fulgur Ventures</p>
</div>
<Button
href='https://calendly.com/olegmikh/fulgur-open-hour'
newTab
fullWidth
color='white'>
Schedule a meeting
</Button>
</div>
</div>
)
}

View File

@@ -0,0 +1,79 @@
<svg width="230" height="86" viewBox="0 0 230 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M130.962 27.4841H115.367V22.7812H133.173L130.962 27.4841ZM115.367 49.1355V31.0265H129.182L126.91 35.7599H120.525V49.1967L115.367 49.1355Z" fill="url(#paint0_linear_1354_57564)"/>
<path d="M140.203 48.83C139.227 48.9358 138.239 48.8204 137.314 48.4925C136.389 48.1647 135.55 47.6328 134.861 46.9367C133.793 45.311 133.306 43.3745 133.48 41.4398V29.3774H138.699V41.4398C138.59 41.8168 138.585 42.2158 138.684 42.5953C138.783 42.9747 138.982 43.321 139.261 43.5983C139.54 43.8754 139.888 44.0735 140.269 44.1719C140.651 44.2702 141.052 44.2653 141.431 44.1578H142.997V29.3774H148.215V48.83H140.203Z" fill="url(#paint1_linear_1354_57564)"/>
<path d="M150.793 48.83V29.3774H155.981V44.1578H162.121V48.83H150.793Z" fill="url(#paint2_linear_1354_57564)"/>
<path d="M174.249 34.0497C173.567 34.0469 172.894 34.1806 172.266 34.443C171.638 34.7054 171.07 35.0909 170.595 35.5766C170.107 36.0361 169.719 36.5902 169.455 37.2047C169.191 37.8192 169.057 38.4813 169.06 39.1495C169.063 39.8107 169.205 40.464 169.475 41.0683C169.744 41.6727 170.135 42.215 170.626 42.6614C171.099 43.1378 171.664 43.5155 172.285 43.7725C172.908 44.0294 173.575 44.1604 174.249 44.1578V36.7676H179.436V48.9827H173.696C172.401 48.9713 171.12 48.6942 169.938 48.1688C168.755 47.6434 167.693 46.8809 166.819 45.9289C165.86 45.0752 165.09 44.0307 164.561 42.8631C164.033 41.6952 163.756 40.4302 163.749 39.1495C163.811 36.5773 164.866 34.1276 166.695 32.3083C168.525 30.4888 170.987 29.4394 173.574 29.3774H179.345V34.0497H174.249Z" fill="url(#paint3_linear_1354_57564)"/>
<path d="M188.677 48.83C187.701 48.9358 186.713 48.8204 185.788 48.4925C184.863 48.1647 184.025 47.6328 183.335 46.9367C182.266 45.311 181.78 43.3745 181.955 41.4398V29.3774H187.173V41.4398C187.065 41.8168 187.06 42.2158 187.158 42.5953C187.258 42.9747 187.457 43.321 187.736 43.5983C188.015 43.8754 188.362 44.0735 188.744 44.1719C189.125 44.2702 189.527 44.2653 189.905 44.1578H191.347V29.3774H196.567V48.83H188.677Z" fill="url(#paint4_linear_1354_57564)"/>
<path d="M198.775 36.7678H205.561C205.736 36.7762 205.912 36.7478 206.075 36.6847C206.24 36.6216 206.388 36.525 206.512 36.4012C206.739 36.1197 206.863 35.7695 206.863 35.4088C206.863 35.0479 206.739 34.6979 206.512 34.4162C206.382 34.2931 206.227 34.1973 206.059 34.1344C205.889 34.0714 205.71 34.0427 205.53 34.0498H198.775V29.3776H206.543C207.373 29.3482 208.201 29.5256 208.944 29.8936C209.69 30.2615 210.331 30.8083 210.81 31.4846C211.649 32.6153 212.091 33.9887 212.068 35.3935C212.065 36.0519 211.941 36.704 211.701 37.3173C211.455 37.9122 211.052 38.4295 210.533 38.8137C211.076 39.1934 211.492 39.7249 211.73 40.3407C211.977 41.079 212.091 41.8539 212.068 42.631V48.7386H206.881V44.1579C206.987 43.3816 206.79 42.5945 206.328 41.9592C205.684 41.5421 204.914 41.3587 204.149 41.44H198.775V36.7678Z" fill="url(#paint5_linear_1354_57564)"/>
<path d="M115.367 59.7934H120.709L106.587 85.8421L92.4961 59.7934H97.8378L106.587 76.2838L115.367 59.7934Z" fill="url(#paint6_linear_1354_57564)"/>
<path d="M133.511 71.0618H120.064V66.2979H133.511V71.0618ZM120.064 73.7795H133.511V78.5129H125.283V81.2309H133.511V85.8421H120.064V73.7795Z" fill="url(#paint7_linear_1354_57564)"/>
<path d="M144.377 66.2981C145.353 66.199 146.338 66.3176 147.263 66.645C148.187 66.9727 149.026 67.5008 149.719 68.1914C150.78 69.8201 151.266 71.7543 151.1 73.6883V85.8424H145.881V73.78C145.989 73.403 145.994 73.004 145.895 72.6246C145.796 72.2451 145.597 71.8988 145.319 71.6215C145.04 71.3444 144.692 71.1462 144.31 71.0479C143.929 70.9496 143.528 70.9545 143.149 71.062H141.706V85.8424H136.487V66.2981H144.377Z" fill="url(#paint8_linear_1354_57564)"/>
<path d="M152.819 74.757V70.0848H165.099V74.757H152.819ZM158.959 77.1695V78.5132C158.853 79.2895 159.051 80.0766 159.512 80.7119C160.155 81.1338 160.926 81.3175 161.691 81.231H165.19V85.8422H160.463C159.511 85.9311 158.552 85.8073 157.654 85.4797C156.756 85.1521 155.944 84.6291 155.275 83.9489C154.166 82.3591 153.626 80.445 153.74 78.5132V77.2305L158.959 77.1695ZM158.959 66.4507V71.1229H153.74V66.4507H158.959Z" fill="url(#paint9_linear_1354_57564)"/>
<path d="M174.615 85.8421C173.64 85.9479 172.651 85.8325 171.726 85.5046C170.802 85.1766 169.963 84.6447 169.275 83.9488C168.206 82.3231 167.719 80.3866 167.893 78.4519V66.2979H173.111V78.5129C173.005 79.2894 173.203 80.0765 173.664 80.7118C174.307 81.1337 175.079 81.3173 175.844 81.2309H177.287V66.2979H182.505V85.8421H174.615Z" fill="url(#paint10_linear_1354_57564)"/>
<path d="M184.716 73.7799H191.5C191.676 73.7901 191.852 73.7628 192.017 73.6995C192.18 73.6364 192.329 73.5387 192.453 73.4133C192.704 73.1391 192.838 72.7767 192.821 72.4056C192.831 72.0498 192.712 71.7026 192.484 71.4283C192.355 71.3022 192.2 71.2044 192.032 71.1413C191.862 71.0782 191.681 71.0511 191.5 71.0619H184.716V66.298H192.484C193.314 66.2688 194.139 66.4462 194.885 66.814C195.63 67.1819 196.271 67.7287 196.751 68.4052C197.609 69.5607 198.051 70.9694 198.009 72.4056C198.007 73.0612 197.893 73.7117 197.671 74.3294C197.423 74.9649 197.01 75.5236 196.474 75.948C197.017 76.3277 197.433 76.8592 197.671 77.4749C197.916 78.2131 198.03 78.9881 198.009 79.7653V85.8728H192.821V81.17C192.927 80.3938 192.73 79.6064 192.268 78.9712C191.626 78.5493 190.854 78.3656 190.089 78.4521H184.716V73.7799Z" fill="url(#paint11_linear_1354_57564)"/>
<path d="M214.065 71.0618H200.619V66.2979H214.065V71.0618ZM200.619 73.7795H214.065V78.5129H205.837V81.2309H214.065V85.8421H200.619V73.7795Z" fill="url(#paint12_linear_1354_57564)"/>
<path d="M223.213 66.2979V69.3517C223.302 70.2854 223.715 71.1595 224.379 71.8252L226.498 74.1461L227.909 75.6425C228.819 76.7333 229.318 78.1042 229.322 79.5208C229.385 80.3829 229.274 81.2489 228.995 82.0672C228.716 82.8857 228.273 83.6399 227.695 84.2847C227.216 84.7665 226.64 85.1431 226.005 85.3904C225.371 85.6375 224.692 85.7498 224.01 85.7201H216.244V81.1699H223.028C223.183 81.171 223.337 81.1356 223.475 81.0667C223.614 80.9977 223.735 80.897 223.826 80.7728C224.066 80.4457 224.185 80.0469 224.164 79.643C224.103 79.1849 223.899 78.7575 223.581 78.4214L221.34 76.1616C220.523 75.3022 219.812 74.3488 219.221 73.3216C218.477 72.1921 218.053 70.884 217.994 69.5349V66.2979H223.213Z" fill="url(#paint13_linear_1354_57564)"/>
<path d="M75.1821 22.3232H92.1281L52.9559 85.8421L26.7389 43.364H43.6848L52.8946 58.3885L75.1821 22.3232ZM65.4198 22.3232H13.7532L21.7043 35.2102H57.4687L65.4198 22.3232ZM78.3442 0H0L5.15745 8.27578L9.27114 14.9331H69.0729L78.3442 0Z" fill="url(#paint14_linear_1354_57564)"/>
<defs>
<linearGradient id="paint0_linear_1354_57564" x1="115.367" y1="35.9937" x2="133.173" y2="35.9937" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint1_linear_1354_57564" x1="133.445" y1="39.1262" x2="148.215" y2="39.1262" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint2_linear_1354_57564" x1="150.793" y1="39.1072" x2="162.121" y2="39.1072" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint3_linear_1354_57564" x1="163.749" y1="39.1836" x2="179.436" y2="39.1836" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint4_linear_1354_57564" x1="181.92" y1="39.1262" x2="196.567" y2="39.1262" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint5_linear_1354_57564" x1="198.775" y1="39.06" x2="212.071" y2="39.06" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint6_linear_1354_57564" x1="92.4961" y1="72.8224" x2="120.709" y2="72.8224" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint7_linear_1354_57564" x1="120.064" y1="76.0735" x2="133.511" y2="76.0735" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint8_linear_1354_57564" x1="136.487" y1="76.0568" x2="151.132" y2="76.0568" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint9_linear_1354_57564" x1="152.819" y1="76.1639" x2="165.19" y2="76.1639" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint10_linear_1354_57564" x1="167.858" y1="76.0925" x2="182.505" y2="76.0925" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint11_linear_1354_57564" x1="184.716" y1="76.0873" x2="198.011" y2="76.0873" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint12_linear_1354_57564" x1="200.619" y1="76.0735" x2="214.065" y2="76.0735" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint13_linear_1354_57564" x1="216.244" y1="76.0148" x2="229.339" y2="76.0148" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
<linearGradient id="paint14_linear_1354_57564" x1="0" y1="42.9364" x2="92.1281" y2="42.9364" gradientUnits="userSpaceOnUse">
<stop offset="0.35" stop-color="#FF783C"/>
<stop offset="1" stop-color="#FF4154"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@@ -0,0 +1 @@
export { default as Fulgur } from './Fulgur'

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@@ -40,113 +40,114 @@ export default function NavDesktop() {
const navigate = useNavigate()
return (<nav className="bg-white w-full flex fixed top-0 left-0 py-16 px-32 items-center z-[2010]">
<a href="https://bolt.fun/">
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
</h2>
</a>
<ul className="flex gap-32 xl:gap-64">
<li className="relative">
<Link to={'/products'} className='text-body4 font-bold hover:text-primary-600'>
Products
</Link>
</li>
<li>
<Menu
offsetY={28}
menuButton={
<MenuButton
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
</MenuButton>
}
menuClassName='!rounded-12 !p-8 !border-gray-200'
menuStyle={{ border: '1px solid' }}
>
<MenuItem
href="/blog"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/blog");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
return (
<nav className="bg-white flex py-16 px-32 items-center w-full min-w-full">
<a href="https://bolt.fun/">
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
</h2>
</a>
<ul className="flex gap-32 xl:gap-64">
<li className="relative">
<Link to={'/products'} className='text-body4 font-bold hover:text-primary-600'>
Products
</Link>
</li>
<li>
<Menu
offsetY={28}
menuButton={
<MenuButton
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
</MenuButton>
}
menuClassName='!rounded-12 !p-8 !border-gray-200'
menuStyle={{ border: '1px solid' }}
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
{/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
<span className="text-body2">🏼</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</MenuItem>
<MenuItem
<MenuItem
href="/blog"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/blog");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
{/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
<span className="text-body2">🏼</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</MenuItem>
<MenuItem
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">💬</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 text-gray-600 mt-4">
Coming soon
</p>
</div>
</MenuItem>
<MenuItem
href="/hackathons"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hackathons");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">🏆</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</MenuItem>
</Menu>
</li>
<li className="relative">
<a
href={'https://bolt.fun/guide/'}
target="_blank"
rel="noreferrer"
className='text-body4 font-bold hover:text-primary-600'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">💬</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 text-gray-600 mt-4">
Coming soon
</p>
</div>
</MenuItem>
<MenuItem
href="/hackathons"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hackathons");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">🏆</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</MenuItem>
</Menu>
</li>
<li className="relative">
<a
href={'https://bolt.fun/guide/'}
target="_blank"
rel="noreferrer"
className='text-body4 font-bold hover:text-primary-600'
>
Guide
</a>
</li>
<li className="relative">
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
Donate
</Link>
</li>
</ul>
Guide
</a>
</li>
<li className="relative">
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
Donate
</Link>
</li>
</ul>
<div className="ml-auto"></div>
<div className="flex-1"></div>
<motion.div
animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
className="flex"
>
<motion.div
animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
className="flex"
>
{/* <Button
{/* <Button
color="primary"
size="md"
className="lg:px-40"
@@ -155,75 +156,75 @@ export default function NavDesktop() {
>
Submit App
</Button> */}
{/* {isWalletConnected ?
{/* {isWalletConnected ?
<Button className="ml-16 py-12 px-16 lg:px-20">Connected <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></Button>
: <Button className="ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button>
} */}
{currentSection === 'products' && <IconButton className='mr-16 self-center' onClick={openSearch}>
<BsSearch className='scale-125 text-gray-400' />
</IconButton>}
</motion.div>
{curUser !== undefined &&
(curUser ?
<Menu
menuClassName='!p-8 !rounded-12'
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
<MenuItem
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
Profile
</MenuItem>
<MenuItem
href="/logout"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/logout");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
Logout
</MenuItem>
</Menu>
:
<Link to='/login' className="font-bold hover:text-primary-800 hover:underline">
Login <FiLogIn />
</Link>)
}
<div className="relative h-24">
<motion.div
initial={{
opacity: 0,
x: '100%'
}}
animate={searchOpen ? {
opacity: 1,
x: '0',
transition: { type: "spring", stiffness: 70 }
} : {
opacity: 0,
x: '100%',
transition: {
ease: "easeIn"
}
}}
className='absolute top-0 right-0 flex items-center h-full'
>
<Search
width={326}
isOpen={searchOpen}
onClose={() => setSearchOpen(false)}
onResultClick={() => setSearchOpen(false)}
/>
{currentSection === 'products' && <IconButton className='mr-16 self-center' onClick={openSearch}>
<BsSearch className='scale-125 text-gray-400' />
</IconButton>}
</motion.div>
</div>
</nav>
{curUser !== undefined &&
(curUser ?
<Menu
menuClassName='!p-8 !rounded-12'
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
<MenuItem
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
Profile
</MenuItem>
<MenuItem
href="/logout"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/logout");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
Logout
</MenuItem>
</Menu>
:
<Link to='/login' className="font-bold hover:text-primary-800 hover:underline">
Login <FiLogIn />
</Link>)
}
<div className="relative h-36">
<motion.div
initial={{
opacity: 0,
y: '0'
}}
animate={searchOpen ? {
opacity: 1,
y: '0',
transition: { type: "spring", stiffness: 70 }
} : {
opacity: 0,
y: '-120px',
transition: {
ease: "easeIn"
}
}}
className='absolute top-0 right-0 flex items-center h-full'
>
<Search
width={326}
isOpen={searchOpen}
onClose={() => setSearchOpen(false)}
onResultClick={() => setSearchOpen(false)}
/>
</motion.div>
</div>
</nav>
);
}

View File

@@ -73,8 +73,8 @@ export default function NavMobile() {
return (
<div className={`${styles.navMobile} w-screen z-[2010]`}>
<nav className={`bg-white fixed top-0 left-0 h-[67px] w-full p-16 px-32 flex justify-between items-center z-[2010]`}>
<div className={`${styles.navMobile}`}>
<nav className={`bg-white h-[67px] w-full p-16 px-32 flex justify-between items-center`}>
<a href="https://bolt.fun/">
<img className='h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
</a>
@@ -118,7 +118,7 @@ export default function NavMobile() {
</IconButton>
</nav>
<div className="fixed left-0 pointer-events-none z-[2010] w-full min-h-[calc(100vh-76px)]">
<div className="fixed left-0 pointer-events-none z-[2010] w-full min-h-[calc(100vh-76px)]">
{drawerOpen && (
<div
onClick={() => toggleDrawerOpen()}

View File

@@ -40,40 +40,29 @@ export const navLinks = [
export default function Navbar() {
const dispatch = useAppDispatch();
// const { isWalletConnected, isMobileScreen } = useAppSelector((state) => ({
// isWalletConnected: state.wallet.isConnected,
// isMobileScreen: state.ui.isMobileScreen
// }));
const isLargeScreen = useMediaQuery(MEDIA_QUERIES.isLarge)
useEffect(() => {
const nav = document.querySelector("nav");
let oldPadding = '';
if (nav) {
const navStyles = getComputedStyle(nav);
if (navStyles.display !== "none") {
dispatch(setNavHeight(nav.clientHeight));
oldPadding = document.body.style.paddingTop
document.body.style.paddingTop = `${nav.clientHeight}px`;
}
}
return () => {
document.body.style.paddingTop = oldPadding
}
}, [dispatch])
return (
<>
<div className="sticky top-0 left-0 w-full z-[2010]">
{(isLargeScreen) ?
<NavDesktop />
:
<NavMobile />
}
</>
</div>
);
}

View File

@@ -38,36 +38,19 @@ export default function SortByFilter({ filterChanged }: Props) {
return (
<>
{
isMdScreen ?
<div className='bg-white border-2 rounded-12 p-16'>
< p className="text-body2 font-bolder text-black mb-16" > Sort By</p >
<ul className='flex flex-col gap-4'>
{filters.map((f, idx) => <li
key={f.value}
className={`
p-12 rounded-8 cursor-pointer font-bold
active:scale-95 transition-transform
${f.value === selected ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
onClick={() => filterClicked(f.value)}
role='button'
>
{f.text}
</li>)}
</ul>
</div >
:
<AutoComplete
isClearable
isMulti={false}
placeholder='Sort By'
options={filters}
labelField='text'
valueField='value'
size='lg'
onChange={(o) => filterClicked(o ? o.value : null)} />
}</>
<ul className='flex flex-wrap gap-8'>
{filters.map((f, idx) => <li
key={f.value}
className={`
text-primary-600 rounded-48 px-16 py-8 cursor-pointer font-medium text-body5
active:scale-95 transition-transform
${f.value === selected ? 'bg-primary-100' : 'bg-gray-100 hover:bg-gray-200'}`}
onClick={() => filterClicked(f.value)}
role='button'
>
{f.text}
</li>)}
</ul>
)
}

View File

@@ -7,6 +7,7 @@ import HackathonsList from '../../Components/HackathonsList/HackathonsList'
import SortByFilter from '../../Components/SortByFilter/SortByFilter'
import styles from './styles.module.scss'
import { Helmet } from 'react-helmet'
import { Fulgur } from 'src/Components/Ads/Fulgur'
export default function HackathonsPage() {
@@ -54,6 +55,9 @@ export default function HackathonsPage() {
>
List Your Hackathon
</Button>
<div className="hidden md:block">
<Fulgur />
</div>
</div>
</aside>
<main className="self-start">

View File

@@ -4,6 +4,10 @@ $screen-xs-min: 320px;
@import "./tw.scss", "./shared.scss", "./vendors.scss", "./scrollbar.scss";
html {
scrollbar-gutter: stable;
}
body {
overflow-x: hidden;
background-color: #ffffff;