aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-26 01:34:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature/list-your-product-ui

Browse Source
This commit is contained in:
MTG2000
2022-09-25 10:37:34 +03:00
parent a01c8dfa15 74c89c309c
commit 757dcb2c5e
21 changed files with 230 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,33 +6,24 @@ 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-body3 font-medium text-white mt-8">12th Oct - 7th Dec, 2022</p>
<p className="text-body4 text-white mt-8"><IoLocationOutline className="mr-8" /> Online</p>
</>,
img: "https://i.ibb.co/bRY635n/wide.png",
img: "https://i.ibb.co/3S35g6T/wide.jpg",
link: {
content: "Register Now",
url: createRoute({ type: "tournament", id: 1, tab: 'overview' }),
url: createRoute({ type: "tournament", id: 1 }),
},
}
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,
@@ -76,22 +67,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} 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}
@@ -104,7 +94,7 @@ export default function Header() {
<Button color="white" href={headerLinks[1].link.url} newTab={headerLinks[1].link.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">