mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-01-17 13:24:22 +01:00
fix: tournament overview bg on mobile, hackathons page redesign
This commit is contained in:
MTG2000
@@ -39,113 +39,115 @@ export default function NavDesktop() {
|
||||
|
||||
return (
|
||||
<nav className="bg-white py-16 flex items-center w-full min-w-full">
|
||||
<div className="content-container flex items-center">
|
||||
<Link to="/">
|
||||
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
|
||||
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</h2>
|
||||
</Link>
|
||||
<ul className="flex gap-32 xl:gap-64">
|
||||
<li className="relative">
|
||||
<Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Projects
|
||||
</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 '
|
||||
<div className="content-container">
|
||||
<div className="flex items-center">
|
||||
|
||||
<Link to="/">
|
||||
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
|
||||
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
|
||||
</h2>
|
||||
</Link>
|
||||
<ul className="flex gap-32 xl:gap-64">
|
||||
<li className="relative">
|
||||
<Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Projects
|
||||
</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="flex-1"></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"
|
||||
@@ -154,87 +156,89 @@ 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 === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
|
||||
<BsSearch className='scale-125 text-gray-400' />
|
||||
</IconButton>}
|
||||
</motion.div>
|
||||
{curUser !== undefined &&
|
||||
(curUser ?
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
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="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</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>
|
||||
|
||||
:
|
||||
<Button size="sm" color="white" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<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)}
|
||||
/>
|
||||
{currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
|
||||
<BsSearch className='scale-125 text-gray-400' />
|
||||
</IconButton>}
|
||||
</motion.div>
|
||||
{curUser !== undefined &&
|
||||
(curUser ?
|
||||
<Menu
|
||||
align="end"
|
||||
offsetY={4}
|
||||
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="/edit-profile"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/edit-profile");
|
||||
}}
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
⚙️ Settings
|
||||
</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>
|
||||
|
||||
:
|
||||
<Button size="sm" color="white" href="/login">
|
||||
Connect ⚡
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -7,6 +7,9 @@ import SortByFilter from '../../Components/SortByFilter/SortByFilter'
|
||||
import styles from './styles.module.scss'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Fulgur } from 'src/Components/Ads/Fulgur'
|
||||
import { IoLocationOutline } from 'react-icons/io5'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { createRoute } from 'src/utils/routing'
|
||||
|
||||
|
||||
export default function HackathonsPage() {
|
||||
@@ -28,17 +31,38 @@ export default function HackathonsPage() {
|
||||
<meta property="og:title" content={'Hackathons'} />
|
||||
</Helmet>
|
||||
<div
|
||||
className={`page-container pt-16 w-full ${styles.grid}`}
|
||||
className={`page-container pt-16 w-full`}
|
||||
>
|
||||
<aside className='no-scrollbar'>
|
||||
<Link to={createRoute({ type: "tournament", id: 1, tab: 'overview' })}>
|
||||
<div className="rounded-16 min-h-[200px] md:min-h-[240px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
|
||||
<img
|
||||
className="w-full h-full object-cover object-top absolute top-0 left-0 z-[-2]"
|
||||
src='https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public'
|
||||
alt=""
|
||||
/>
|
||||
<div className="w-full h-full object-cover bg-black bg-opacity-60 absolute top-0 left-0 z-[-1]"></div>
|
||||
<div className="max-w-[90%]">
|
||||
<p className="text-body1 font-bolder text-white">Legends of Lightning ⚡️ Tournament</p>
|
||||
<p className="text-body3 font-medium text-white mt-8">1st Oct - 31st Nov, 2022</p>
|
||||
</div>
|
||||
<p className="text-body4 font-medium text-white mt-8">
|
||||
<IoLocationOutline className="mr-8" /> Online
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex gap-16 flex-wrap my-24 justify-between">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<div className="self-center">
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/></div>
|
||||
</div>
|
||||
{/* <aside className='no-scrollbar'>
|
||||
<div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
|
||||
<h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
|
||||
<SortByFilter
|
||||
filterChanged={setSortByFilter}
|
||||
/>
|
||||
{/* <TopicsFilter
|
||||
filterChanged={setTopicsFilter}
|
||||
/> */}
|
||||
/>
|
||||
<Button
|
||||
href='https://airtable.com/shrgXKynON8YWeyyE'
|
||||
newTab
|
||||
@@ -51,7 +75,7 @@ export default function HackathonsPage() {
|
||||
<Fulgur />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</aside> */}
|
||||
<main className="self-start">
|
||||
<HackathonsList
|
||||
currentFilter={sortByFilter}
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function OverviewPage() {
|
||||
const { tournamentDetails, makers, myParticipationInfo } = useTournament()
|
||||
|
||||
return (
|
||||
<Card onlyMd className='flex flex-col gap-42'>
|
||||
<Card onlyMd className='flex flex-col gap-42 bg-white -mx-16 -my-24 md:m-0 px-16'>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
|
||||
<div className='md:col-span-2'>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user