mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-01-19 14:24:28 +01:00
initial commit
This commit is contained in:
=Mtg_Dev
17
src/utils/Wrapper.tsx
Normal file
17
src/utils/Wrapper.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { QueryClient, QueryClientProvider } from 'react-query'
|
||||
import 'react-multi-carousel/lib/styles.css';
|
||||
import { Provider } from 'react-redux';
|
||||
import { store } from '../redux/store';
|
||||
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
export default function Wrapper(props: any) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Provider store={store}>
|
||||
{props.children}
|
||||
</Provider>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
3
src/utils/helperFunctions.ts
Normal file
3
src/utils/helperFunctions.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export function random(min: number, max: number) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
6
src/utils/hooks.ts
Normal file
6
src/utils/hooks.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
|
||||
import { AppDispatch, RootState } from "../redux/store";
|
||||
|
||||
// Use throughout your app instead of plain `useDispatch` and `useSelector`
|
||||
export const useAppDispatch = () => useDispatch<AppDispatch>();
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
286
src/utils/htmlSkeleton.html
Normal file
286
src/utils/htmlSkeleton.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<nav>
|
||||
<div class="p-16 bg-gray-100 flex items-center">
|
||||
<div class="w-40 h-40 bg-gray-300 rounded-8 mr-16 overflow-hidden">
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-h5 font-bold mr-64">makers.bolt.fun</h2>
|
||||
</div>
|
||||
<div class="sm:max-w-[400px] border shadow-lg sm:p-32">
|
||||
<div class="px-16">
|
||||
<input
|
||||
class="btn bg-gray-100 w-full py-12 px-40 rounded-24 mt-16 placeholder-gray-500"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<button class="btn btn-primary w-full py-12 px-40 rounded-24 my-16">
|
||||
Submit ⚡ app️
|
||||
</button>
|
||||
</div>
|
||||
<ul class="py-16 gap-64 border-t border-b">
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Exlore 🏡</a>
|
||||
</li>
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Hottest 🔥</a>
|
||||
</li>
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Categories 🕹</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="px-16 py-16 flex flex-wrap gap-y-12">
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">About Us</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Support</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Press</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Contacts</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Careers</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Sitemap</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Legal</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Cookies Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="hidden lg:flex py-36 px-32 bg-gray-100 items-center">
|
||||
<h2 class="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2>
|
||||
<ul class="flex gap-32 lg:gap-64">
|
||||
<li class="text-body4"><a href="#">Exlore 🏡</a></li>
|
||||
<li class="text-body4"><a href="#">Hottest 🔥</a></li>
|
||||
<li class="text-body4"><a href="#">Categories 🕹</a></li>
|
||||
</ul>
|
||||
<div class="ml-auto">
|
||||
<button class="btn btn-primary py-12 px-32 lg:px-40">Submit ⚡ app️</button>
|
||||
<span class="chip mx-12 h-full mr-24 p-12">⚡ 2.2k sats </span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="py-[100px]">
|
||||
<hr class="my-40 mb-96" />
|
||||
<div class="flex gap-40 justify-center md:justify-between">
|
||||
<div
|
||||
class="flex-grow rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full object-cover bg-black opacity-40 absolute top-0 left-0 z-[-1]"
|
||||
></div>
|
||||
<h3 class="text-white text-h3 max-w-md">
|
||||
Join the next wave of the Lightning Network in November’s ‘Shock the
|
||||
Web’ hackathon
|
||||
</h3>
|
||||
<a class="btn btn-primary font-regular mt-36">Register Now</a>
|
||||
</div>
|
||||
<div
|
||||
class="hidden flex-grow rounded-20 h-[280px] relative overflow-hidden p-24 md:flex flex-col items-start justify-end"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
|
||||
src="https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1637539200&Signature=QExmgJCGGSES~zIwM-2G8yd7aPR-j5eFnV3tOg6BkSdXVB9AMhHQPbRpbfOv~rD3hdMdSPMkS9kfjyFbAuonltV2zrf5GOwGxrF2GVdhpIGc6RiqGLWVVY8mXysEm6~0fVj~2SK8hec~YnV1h0oHDQiZF5YjGi143pImGmcVERPpB7MiksSoD0Vki6RXamySopj~f-~lUGy2uKRbQKxQ4LCFTz-H9O8vpkZpCVq274FYsqsEtUihwVjniNXV8ukLxdL~rfgf8L9MeiR7gDYYQ9MSLMZKEa~TnQ-JadlngQz78a2T801WaG2xp5hGHYQMtIi1ES-N4FOg5PwEjtIetA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full object-cover bg-black opacity-30 absolute top-0 left-0 z-[-1]"
|
||||
></div>
|
||||
<h3 class="text-white text-h3 max-w-md">
|
||||
Join the next wave of the Lightning Network in November’s ‘Shock the
|
||||
Web’ hackathon
|
||||
</h3>
|
||||
<button class="btn font-regular mt-36">Register Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-40" />
|
||||
<button class="btn btn-primary">Submit ⚡ app️</button>
|
||||
<hr class="my-40" />
|
||||
<span class="chip mx-12"> Wallet </span>
|
||||
<span class="chip-small mx-12 bg-red-100 text-red-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
<span class="chip-small mx-12 bg-primary-100 text-primary-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
|
||||
<hr class="my-40" />
|
||||
<div class="flex gap-12 flex-wrap">
|
||||
<span class="chip"> Art & Collectibles </span
|
||||
><span class="chip"> DeFi </span><span class="chip"> Entertainment </span
|
||||
><span class="chip"> Exchange </span>
|
||||
</div>
|
||||
|
||||
<hr class="my-40" />
|
||||
<h3 class="font-bolder text-body3 mb-20">Hottest ⚡️apps</h3>
|
||||
<div class="flex gap-24">
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-40" />
|
||||
<div class="px-32">
|
||||
<div class="rounded-[40px] bg-gray-50 overflow-hidden">
|
||||
<div class="relative h-[152px] border">
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
<button
|
||||
class="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-24">
|
||||
<div class="flex gap-24 items-center">
|
||||
<div
|
||||
class="flex-shrink-0 w-[93px] h-[93px] rounded-md overflow-hidden"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1637539200&Signature=QExmgJCGGSES~zIwM-2G8yd7aPR-j5eFnV3tOg6BkSdXVB9AMhHQPbRpbfOv~rD3hdMdSPMkS9kfjyFbAuonltV2zrf5GOwGxrF2GVdhpIGc6RiqGLWVVY8mXysEm6~0fVj~2SK8hec~YnV1h0oHDQiZF5YjGi143pImGmcVERPpB7MiksSoD0Vki6RXamySopj~f-~lUGy2uKRbQKxQ4LCFTz-H9O8vpkZpCVq274FYsqsEtUihwVjniNXV8ukLxdL~rfgf8L9MeiR7gDYYQ9MSLMZKEa~TnQ-JadlngQz78a2T801WaG2xp5hGHYQMtIi1ES-N4FOg5PwEjtIetA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-h3 font-regular">{Project Name}</h3>
|
||||
<a class="text-blue-400 font-regular text-body4" href="#"
|
||||
>www.project.com</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex ml-auto gap-16">
|
||||
<button class="btn btn-primary py-12 px-24 rounded-lg my-16">
|
||||
Play 🕹
|
||||
</button>
|
||||
<button class="btn py-12 px-24 rounded-lg my-16">Vote 🔥</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-40 text-body4 leading-normal">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos error ad
|
||||
voluptas. Nostrum in non quia, obcaecati ipsam aut accusantium sunt
|
||||
minus ea similique. Dolor sint minima veritatis delectus, corrupti
|
||||
quod, expedita officia molestias nobis sequi perspiciatis. Laudantium
|
||||
illo quasi a modi blanditiis iusto sequi laboriosam, harum rem beatae
|
||||
eum commodi quo tempora minus asperiores quod libero? Blanditiis,
|
||||
eligendi adipisci.
|
||||
</p>
|
||||
<div class="flex gap-24 mt-24 flex-wrap">
|
||||
<span class="chip-small bg-red-100 text-red-800 font-regular">
|
||||
payments
|
||||
</span>
|
||||
<span class="chip-small bg-primary-100 text-primary-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-40">
|
||||
<h3 class="text-h5 font-bold">Screen Shots</h3>
|
||||
<div class="flex gap-x-24 gap-y-20">
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-40" />
|
||||
<div class="text-center">
|
||||
<h3 class="text-body4 font-regular">
|
||||
Are you the creator of this project?
|
||||
</h3>
|
||||
<button class="btn py-12 px-24 rounded-lg my-16">Claim 🖐</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
31
src/utils/interfaces.ts
Normal file
31
src/utils/interfaces.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export interface ProjectCategory {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface ProjectCard {
|
||||
id: string;
|
||||
title: string;
|
||||
img: string;
|
||||
category: ProjectCategory;
|
||||
votes_count: number;
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export type Image = string;
|
||||
|
||||
export interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
website?: string;
|
||||
description: string;
|
||||
tags: Tag[];
|
||||
cover_image: Image;
|
||||
thumbnail_image: Image;
|
||||
screenShots: Image[];
|
||||
votes_count: number;
|
||||
}
|
||||
Reference in New Issue
Block a user