forked from ourworld_web/www_engage_os
add pngs
This commit is contained in:
parent
b9b2148417
commit
f63e3229c7
BIN
public/images/3nodes.png
Normal file
BIN
public/images/3nodes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
public/images/capacity.png
Normal file
BIN
public/images/capacity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
public/images/rewards.png
Normal file
BIN
public/images/rewards.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
@ -21,7 +21,7 @@ const logos = [
|
||||
export function AppsPreview() {
|
||||
return (
|
||||
<div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
|
||||
<div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-20 md:pt-0">
|
||||
<div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
|
||||
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
@ -67,7 +67,7 @@ export function AppsPreview() {
|
||||
}}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
>
|
||||
<Image src={logo} alt="" unoptimized />
|
||||
<Image src={logo} alt="" unoptimized className="hover:backdrop-opacity-100 opacity-90" />
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
@ -1,29 +1,96 @@
|
||||
"use client";
|
||||
import { Button } from "./Button";
|
||||
import Image from "next/image";
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Host A Node',
|
||||
href: '#',
|
||||
description1:
|
||||
'All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.',
|
||||
description2: '',
|
||||
imageUrl:
|
||||
'./images/3nodes.png',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Offer Capacity',
|
||||
href: '#',
|
||||
description1: 'The capacity of the node gets registered on the ThreeFold Blockchain and is available for users on the TF Marketplace.',
|
||||
description2: '',
|
||||
imageUrl:
|
||||
'./images/capacity.png',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Earn Rewards',
|
||||
href: '#',
|
||||
description1:
|
||||
'Farmers earn rewards for their used resources, enabling a fair and transparent peer-to-peer economy.',
|
||||
description2: '',
|
||||
imageUrl:
|
||||
'./images/rewards.png',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
export function FarmerPreview() {
|
||||
|
||||
return (
|
||||
<section className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
|
||||
<section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
|
||||
{/* Gradient Blob Component */}
|
||||
<div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
|
||||
<div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="lg:flex lg:items-center lg:justify-between lg:px-8">
|
||||
{/* Left Column - Text (1/3 width) */}
|
||||
<div className="lg:col-span-1 flex text-center lg:text-left order-1 lg:order-1">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
|
||||
<div className="lg:col-span-1 flex max text-center lg:text-left order-1 lg:order-1">
|
||||
<div className="max-w-xl">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
|
||||
Contribute to the Decentralized Internet in 3 Steps
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Column - Stacked Cubes (2/3 width) */}
|
||||
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
|
||||
<Button variant="outline" className=" text-white px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
|
||||
<Button variant="outline" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
|
||||
Become A Farmer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto mt-10 grid max-w-2xl h-3/4 grid-cols-1 gap-8 lg:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
||||
{posts.map((post) => (
|
||||
<article
|
||||
key={post.id}
|
||||
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-state-gradient px-8 lg:pt-12"
|
||||
>
|
||||
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10"
|
||||
style={{
|
||||
filter: 'brightness(1)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(1)';
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
<h3 className="mt-12 text-lg/6 font-semibold text-white">
|
||||
<a href={post.href}>
|
||||
<span className="absolute inset-10" />
|
||||
{post.title}
|
||||
</a>
|
||||
</h3>
|
||||
< div className="max-w-2/3">
|
||||
<p className="mt-4 text-sm font-light text-gray-700">{post.description1}</p>
|
||||
<p className=" text-sm font-light text-gray-700">{post.description2}</p>
|
||||
</div>
|
||||
<img alt="" src={post.imageUrl} className="w-1/2 h-full translate-x-20 -translate-32 transform object-cover object-top-left lg:translate-x-50 lg:-translate-20 opacity-70 hover:opacity-95" />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -13,7 +13,7 @@ export function StackSectionPreview() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
|
||||
{/* Left Column - Text (1/3 width) */}
|
||||
<div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
|
||||
A Decentralized Infrastructure Layer
|
||||
</h2>
|
||||
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
|
||||
|
||||
97
src/components/ui/Blog.tsx
Normal file
97
src/components/ui/Blog.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Boost your conversion rate',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
|
||||
date: 'Mar 16, 2020',
|
||||
datetime: '2020-03-16',
|
||||
author: {
|
||||
name: 'Michael Foster',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'How to use search engine optimization to drive sales',
|
||||
href: '#',
|
||||
description: 'Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
|
||||
date: 'Mar 10, 2020',
|
||||
datetime: '2020-03-10',
|
||||
author: {
|
||||
name: 'Lindsay Walton',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Improve your customer experience',
|
||||
href: '#',
|
||||
description:
|
||||
'Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
|
||||
date: 'Feb 12, 2020',
|
||||
datetime: '2020-02-12',
|
||||
author: {
|
||||
name: 'Tom Cook',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
export default function Example() {
|
||||
return (
|
||||
<div className="bg-white py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
|
||||
From the blog
|
||||
</h2>
|
||||
<p className="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
||||
{posts.map((post) => (
|
||||
<article
|
||||
key={post.id}
|
||||
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80"
|
||||
>
|
||||
<img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 size-full object-cover" />
|
||||
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40" />
|
||||
<div className="absolute inset-0 -z-10 rounded-2xl inset-ring inset-ring-gray-900/10" />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
|
||||
<time dateTime={post.datetime} className="mr-8">
|
||||
{post.date}
|
||||
</time>
|
||||
<div className="-ml-4 flex items-center gap-x-4">
|
||||
<svg viewBox="0 0 2 2" className="-ml-0.5 size-0.5 flex-none fill-white/50">
|
||||
<circle r={1} cx={1} cy={1} />
|
||||
</svg>
|
||||
<div className="flex gap-x-2.5">
|
||||
<img alt="" src={post.author.imageUrl} className="size-6 flex-none rounded-full bg-white/10" />
|
||||
{post.author.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mt-3 text-lg/6 font-semibold text-white">
|
||||
<a href={post.href}>
|
||||
<span className="absolute inset-0" />
|
||||
{post.title}
|
||||
</a>
|
||||
</h3>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
BIN
src/images/3nodes.png
Normal file
BIN
src/images/3nodes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1017 KiB |
Loading…
Reference in New Issue
Block a user