This commit is contained in:
2025-09-16 14:24:25 +02:00
parent 13ecc4d2ec
commit 273cb24a47
10 changed files with 55 additions and 105 deletions

BIN
public/images/logomark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 112 KiB

View File

@@ -5,7 +5,7 @@ const baseStyles = {
solid:
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
outline:
'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm transition-colors',
}
const variantStyles = {
@@ -16,7 +16,8 @@ const variantStyles = {
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
},
outline: {
gray: 'border-gray-300 text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-white',
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
white: 'border-gray-300 text-white hover:border-gray-400 active:bg-gray-100 active:text-white/80',
},
}

View File

@@ -17,7 +17,7 @@ export function CallToAction() {
>
<source src="/videos/cta.mp4" type="video/mp4" />
</video>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-40 z-10"></div>
<div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
<CircleBackground color="#fff" className="animate-spin-slower" />
</div>
@@ -31,10 +31,10 @@ export function CallToAction() {
build your own. Ready to own your intelligence?
</p>
<div className="mt-8 flex justify-center gap-x-6">
<Button variant="solid" href="#">
<Button variant="solid" color="cyan" href="#">
Book a Meeting
</Button>
<Button href="#" variant="outline">
<Button href="#" variant="outline" color="white">
Join the Waitlist
</Button>
</div>

View File

@@ -1,7 +1,7 @@
"use client";
import { H2, P, CP } from "@/components/Texts";
import { Button } from "@/components/ui/Button";
import { Button } from "@/components/Button";
export function GetStarted() {
const items = [
@@ -58,7 +58,7 @@ export function GetStarted() {
{/* Title + Button Row */}
<div className="flex items-center justify-between">
<h3 className="text-xl font-semibold">{item.title}</h3>
<Button variant="outline" href={item.href}>
<Button variant="outline" href={item.href} color="white">
{item.buttonText}
</Button>
</div>

View File

@@ -27,7 +27,7 @@ export function GridStats() {
<P color="light" className="mt-6">
Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
</P>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" color="white">Explore TFGrid →</Button>
</div>
</div>

View File

@@ -122,7 +122,7 @@ export function Header() {
<MobileNavLink href="/#faqs">FAQs</MobileNavLink>
</div>
<div className="mt-8 flex flex-col gap-4">
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white">
Docs
</Button>
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>

File diff suppressed because one or more lines are too long

View File

@@ -93,7 +93,7 @@ function Review({
{...props}
>
<blockquote className="text-white">
{React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
{React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })}
<CT color="light" className="mt-4 text-lg/6 font-semibold">
{title}
</CT>

View File

@@ -1,59 +0,0 @@
import Link from 'next/link'
import clsx from 'clsx'
const baseStyles = {
solid:
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
outline:
'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm transition-colors',
}
const variantStyles = {
solid: {
primary: 'bg-[#005eff] text-white hover:bg-[#005eff]/90 active:bg-[#005eff]/80',
white: 'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
},
outline: {
primary: 'border-[#005eff] text-[#005eff] hover:border-[#005eff]/80 hover:text-[#005eff]/80 active:bg-gray-100 active:text-[#005eff]/70',
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
},
}
type ButtonProps = (
| { variant?: 'solid'; color?: keyof typeof variantStyles.solid }
| { variant: 'outline'; color?: keyof typeof variantStyles.outline }
) & (
| Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
| (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
href?: undefined
})
)
export function Button({ className, ...props }: ButtonProps) {
props.variant ??= 'solid'
if (props.variant === 'solid') {
props.color ??= 'primary'
} else {
props.color ??= 'gray'
}
let variantClass: string | undefined;
if (props.variant === 'outline') {
variantClass = variantStyles.outline[props.color as keyof typeof variantStyles.outline];
} else if (props.variant === 'solid') {
variantClass = variantStyles.solid[props.color as keyof typeof variantStyles.solid];
}
className = clsx(
baseStyles[props.variant],
variantClass,
className,
)
return typeof props.href === 'undefined' ? (
<button className={className} {...props} />
) : (
<Link className={className} {...props} />
)
}