ourworld_web/www_engage_os
21
0
Fork 1
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add all

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-04 16:57:37 +02:00
parent 0eee1629c6
commit 045486365d
8 changed files with 277 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Spotlight.tsx
View File

@@ -1,10 +1,14 @@
"use client";
import React from "react";
import { cn } from "@/lib/utils";
import { Spotlight } from "@/components/ui/spotlight";
import { Logomark } from "@/components/Logo";
import { Button } from "@/components/Button";
export function SpotlightPreview() {
return (
<div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-black/[0.96] antialiased md:items-center md:justify-center">
<div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
<div
className={cn(
"pointer-events-none absolute inset-0 [background-size:40px_40px] select-none",
@@ -17,15 +21,33 @@ export function SpotlightPreview() {
fill="white"
/>
<div className="relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0">
<h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl">
Spotlight <br /> is the new trend.
<div className="flex justify-center mb-6">
<div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Announcing The New TF Marketplace.{' '}
<a href="#" className="font-semibold text-white hover:text-gray-200">
<span aria-hidden="true" className="absolute inset-0" />
Read more <span aria-hidden="true">&rarr;</span>
</a>
</div>
</div>
<h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
Built by Everyone <br /> for Everyone.
</h1>
<p className="mx-auto mt-4 max-w-lg text-center text-base font-normal text-neutral-300">
Spotlight effect is a great way to draw attention to a specific part
of the page. Here, we are drawing the attention towards the text
section of the page. I don&apos;t know why but I&apos;m running out of
copy.
<p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-300">
ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
</p>
<div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<Button href="/login" variant="outline" color="gray">
Start Building
</Button>
<Button href="#" variant="outline" color="gray">
Start Hosting
</Button>
<Button href="#" variant="solid" color="white">
How it Works →
</Button>
</div>
</div>
</div>
);