aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-02-22 06:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: update feed page navs, header image color, join discord card image

Browse Source
This commit is contained in:
MTG2000
2022-09-19 13:07:45 +03:00
parent 4bcffa7403
commit 0365419fb7
7 changed files with 64 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/join-discord-card.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

12
src/Components/Navbar/NavDesktop.tsx
View File

@@ -52,7 +52,12 @@ export default function NavDesktop() {
Projects
</Link>
</li>
<li>
<li className="relative">
<Link to={'/hackathons'} className='text-body4 font-bold hover:text-primary-600'>
Events
</Link>
</li>
{/* <li>
<Menu
offsetY={28}
menuButton={
@@ -72,8 +77,7 @@ export default function NavDesktop() {
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>
<span className="text-body2">✍🏼</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
@@ -121,7 +125,7 @@ export default function NavDesktop() {
</div>
</MenuItem>
</Menu>
</li>
</li> */}
<li className="relative">
<a
href={'https://bolt.fun/guide/'}

12
src/Components/Navbar/NavMobile.tsx
View File

@@ -166,7 +166,15 @@ export default function NavMobile() {
Projects
</Link>
</li>
<li>
<li className="relative">
<Link
to={'/hackathons'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Events
</Link>
</li>
{/* <li>
<button
className='text-body4 font-bold hover:text-primary-600 w-full flex justify-between'
onClick={() => toggleCommunityOpen()}
@@ -237,7 +245,7 @@ export default function NavMobile() {
</Link>
</div>
</motion.div>}
</li>
</li> */}
<li className="relative">
<a
href={'https://bolt.fun/guide/'}

26
src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
View File

@@ -35,21 +35,19 @@ export default function HackathonsPage() {
className={`page-container`}
>
<div className={`w-full`}>
<div className="rounded-16 min-h-[280px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
<img
className="w-full h-full object-cover object-center absolute top-0 left-0 z-[-2]"
src={bannerData.img}
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%]">
{bannerData.title}
<Link to={createRoute({ type: "tournament", id: 12 })}>
<div className="rounded-16 min-h-[280px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end mb-24">
<img
className="w-full h-full object-cover object-center absolute top-0 left-0 z-[-2]"
src={bannerData.img}
alt=""
/>
<div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<div className="max-w-[90%]">
{bannerData.title}
</div>
</div>
<Button href={bannerData.link.url} color="white" className="mt-24">
{bannerData.link.content}
</Button>
</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">

41
src/features/Posts/pages/FeedPage/FeedPage.tsx
View File

@@ -14,7 +14,9 @@ import { FaDiscord } from 'react-icons/fa'
import { FiArrowRight } from 'react-icons/fi'
import { capitalize } from 'src/utils/helperFunctions'
import { bannerData } from 'src/features/Projects/pages/ExplorePage/Header/Header'
import { PAGES_ROUTES } from 'src/utils/routing'
import { createRoute, PAGES_ROUTES } from 'src/utils/routing'
import { Link } from 'react-router-dom'
import { IoLocationOutline } from 'react-icons/io5'
export default function FeedPage() {
@@ -47,21 +49,19 @@ export default function FeedPage() {
<div
className={`page-container`}
>
<div className="rounded-16 min-h-[280px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end mb-24">
<img
className="w-full h-full object-cover object-center absolute top-0 left-0 z-[-2]"
src={bannerData.img}
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%]">
{bannerData.title}
<Link to={createRoute({ type: "tournament", id: 12 })}>
<div className="rounded-16 min-h-[280px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end mb-24">
<img
className="w-full h-full object-cover object-center absolute top-0 left-0 z-[-2]"
src={bannerData.img}
alt=""
/>
<div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<div className="max-w-[90%]">
{bannerData.title}
</div>
</div>
<Button href={bannerData.link.url} color="white" className="mt-24">
{bannerData.link.content}
</Button>
</div>
</Link>
<div className={`w-full ${styles.grid}`}>
<div id="title">
{tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
@@ -70,10 +70,8 @@ export default function FeedPage() {
<span> {tagFilter.title}</span>
</p>}
<h1 className="text-h2 font-bolder">{
tagFilter ?
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
:
"Stories ✍🏼"
tagFilter &&
<>{tagFilter.icon} {capitalize(tagFilter.title)}</>
}</h1>
</div>
<div id="sort-by">
@@ -91,6 +89,7 @@ export default function FeedPage() {
</div>
<aside id='categories' className='no-scrollbar'>
<div className="pb-16 md:overflow-y-scroll sticky-side-element">
<h1 className="text-h2 font-bolder mb-24">Discover</h1>
<Button
href={PAGES_ROUTES.blog.writeStory}
color='primary'
@@ -112,9 +111,9 @@ export default function FeedPage() {
<TrendingCard />
<div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
style={{
backgroundImage: `url(${bannerData.img})`,
backgroundImage: `url("assets/images/join-discord-card.jpg")`,
backgroundSize: 'cover',
backgroundPosition: "left"
backgroundPosition: "center"
}}
>
<div className="absolute bg-black inset-0 opacity-10"></div>

34
src/features/Projects/pages/ExplorePage/Header/Header.tsx
View File

@@ -6,12 +6,14 @@ import CustomDot from "./CustomDot/CustomDot";
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback, useEffect, useState } from "react";
import { createRoute } from "src/utils/routing";
import { IoLocationOutline } from "react-icons/io5";
export const bannerData = {
title:
<>
<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>
<p className="text-body4 text-white mt-8"><IoLocationOutline className="mr-8" /> Online</p>
</>,
img: "https://i.ibb.co/bRY635n/wide.png",
link: {
@@ -21,18 +23,7 @@ export const bannerData = {
}
const headerLinks = [
{
title:
<>
<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>
</>,
img: "https://i.ibb.co/bRY635n/wide.png",
link: {
content: "Register Now",
url: createRoute({ type: "tournament", id: 1, tab: 'overview' }),
},
},
bannerData,
{
title: <p className="text-body1 font-bolder text-white">Explore a fun directory of lightning web apps</p>,
img: Assets.Images_ExploreHeader1,
@@ -75,22 +66,21 @@ export default function Header() {
<div className="relative group">
<div className="overflow-hidden" ref={emblaRef}>
<div className="w-full flex gap-16">
<div className="flex-[0_0_100%] rounded-20 min-h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
<div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
<img
className="w-full h-full object-cover object-center absolute top-0 left-0 z-[-2]"
src={bannerData.img}
className="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
src={headerLinks[0].img}
alt=""
/>
<div className="w-full h-full object-cover bg-gradient-to-tr from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<div className="max-w-[90%]">
{bannerData.title}
{headerLinks[0].title}
</div>
<Button href={bannerData.link.url} color="white" className="mt-24">
{bannerData.link.content}
<Button color="white" href={headerLinks[0].link.url} newTab className="mt-24">
{headerLinks[0].link.content}
</Button>
</div>
{/* <div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
<div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
<img
className="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
src={headerLinks[1].img}
@@ -103,7 +93,7 @@ export default function Header() {
<Button color="white" href={headerLinks[1].link.url} newTab className="mt-24">
{headerLinks[1].link.content}
</Button>
</div> */}
</div>
</div>
</div>
<div className="absolute inset-x-0 bottom-8 flex justify-center gap-4 md:hidden">

4
src/utils/routing/routes.ts
View File

@@ -37,7 +37,7 @@ type RouteOptions =
| {
type: "tournament",
id: string | number
tab: 'overview' | 'events' | 'makers' | 'projects'
tab?: 'overview' | 'events' | 'makers' | 'projects'
}
export function createRoute(options: RouteOptions) {
@@ -72,7 +72,7 @@ export function createRoute(options: RouteOptions) {
if (options.type === 'tournament')
return `/tournaments/${options.id}/${options.tab}`
return `/tournaments/${options.id}` + (options.tab ? `/${options.tab}` : "")
return ""
}