add
This commit is contained in:
BIN
public/images/logomark.png
Normal file
BIN
public/images/logomark.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
14
public/images/logomark.svg
Normal file
14
public/images/logomark.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 112 KiB |
@@ -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',
|
||||
},
|
||||
}
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
||||
|
@@ -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
@@ -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>
|
||||
|
@@ -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} />
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user