diff --git a/public/images/360_F_1663671675_OFF7GuHYNFIJ46vqjdaBoDVj6rwJMWLJ.jpg b/public/images/360_F_1663671675_OFF7GuHYNFIJ46vqjdaBoDVj6rwJMWLJ.jpg new file mode 100644 index 0000000..cb2dac6 Binary files /dev/null and b/public/images/360_F_1663671675_OFF7GuHYNFIJ46vqjdaBoDVj6rwJMWLJ.jpg differ diff --git a/public/images/ChatGPT Image Sep 7, 2025, 11_14_41 PM.png b/public/images/ChatGPT Image Sep 7, 2025, 11_14_41 PM.png new file mode 100644 index 0000000..e8d17ba Binary files /dev/null and b/public/images/ChatGPT Image Sep 7, 2025, 11_14_41 PM.png differ diff --git a/public/images/I been to the doctor he says I'm all right I know he's lying, I'm losing my sight He should have examined the eyes of my mind 2020 vision and walkin' 'round blind.png b/public/images/I been to the doctor he says I'm all right I know he's lying, I'm losing my sight He should have examined the eyes of my mind 2020 vision and walkin' 'round blind.png new file mode 100644 index 0000000..6ea5277 Binary files /dev/null and b/public/images/I been to the doctor he says I'm all right I know he's lying, I'm losing my sight He should have examined the eyes of my mind 2020 vision and walkin' 'round blind.png differ diff --git a/public/images/Untitled design.png b/public/images/Untitled design.png new file mode 100644 index 0000000..34b8a39 Binary files /dev/null and b/public/images/Untitled design.png differ diff --git a/public/images/eye-icon-crayon-chalk-drawing-260nw-2575604137.webp b/public/images/eye-icon-crayon-chalk-drawing-260nw-2575604137.webp new file mode 100644 index 0000000..49e4410 Binary files /dev/null and b/public/images/eye-icon-crayon-chalk-drawing-260nw-2575604137.webp differ diff --git a/public/images/tfdash.png b/public/images/tfdash.png index d5c46ea..d2abb96 100644 Binary files a/public/images/tfdash.png and b/public/images/tfdash.png differ diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 13f9b40..07e90f8 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -1,5 +1,4 @@ import { CallToAction } from '@/components/CallToAction' -import { Faqs } from '@/components/Faqs' import { Hero } from '@/components/Hero' import { Pricing } from '@/components/Pricing' import { PrimaryFeatures } from '@/components/PrimaryFeatures' @@ -16,6 +15,8 @@ import { AppsPreview } from '@/components/Apps' import { FarmerPreview } from '@/components/Farmer' import { TfDashboard } from '@/components/TfDashboard' import { ProductsPreview } from '@/components/Products' +import { CallTo } from '@/components/CallTo' +import { Faqss } from '@/components/Faqs' export default function Home() { @@ -28,7 +29,8 @@ export default function Home() { - + + ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fe2e1c7..bc6c46c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,11 +12,11 @@ const inter = Inter({ export const metadata: Metadata = { title: { - template: '%s - EngageOS', - default: 'EngageOS - Invest at the perfect time.', + template: '%s - ThreeFold', + default: 'ThreeFold - Decentralized internet by everyone, for everyone.', }, description: - 'By leveraging insights from our network of industry insiders, you’ll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.', + 'ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.', } export default function RootLayout({ @@ -25,8 +25,10 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - {children} + + + {children} + ) } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 7005757..92c93e6 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -4,6 +4,8 @@ import clsx from 'clsx' const baseStyles = { solid: 'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors', + glass: + 'rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15', outline: 'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors', } @@ -11,7 +13,7 @@ const baseStyles = { const variantStyles = { solid: { gradient: - 'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95', + 'btn-new-gradient', cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors', white: 'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400', @@ -27,6 +29,9 @@ type ButtonProps = ( variant?: 'solid' color?: keyof typeof variantStyles.solid } + | { + variant: 'glass' + } | { variant: 'outline' color?: keyof typeof variantStyles.outline @@ -41,15 +46,22 @@ type ButtonProps = ( export function Button({ className, ...props }: ButtonProps) { props.variant ??= 'solid' - props.color ??= 'gray' + + if (props.variant !== 'glass') { + props.color ??= 'gray' + } + + let variantClass: string | undefined = undefined + + if (props.variant === 'outline' && props.color) { + variantClass = variantStyles.outline[props.color] + } else if (props.variant === 'solid' && props.color) { + variantClass = variantStyles.solid[props.color] + } className = clsx( baseStyles[props.variant], - props.variant === 'outline' - ? variantStyles.outline[props.color] - : props.variant === 'solid' - ? variantStyles.solid[props.color] - : undefined, + variantClass, className, ) diff --git a/src/components/CallTo.tsx b/src/components/CallTo.tsx new file mode 100644 index 0000000..a6a65f6 --- /dev/null +++ b/src/components/CallTo.tsx @@ -0,0 +1,47 @@ +export function CallTo() { + return ( +
+
+
+
+

+ More Resilient, More Powerful, More Diverse With You +

+

+ Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries. +

+

+ By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people. +

+ + +
+
+
+
+ ) +} diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 7ceba85..42ea41c 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -6,7 +6,7 @@ import { Button } from "./Button"; export function Dashboard() { return ( -
+
{/* Column 1: Title & NODES */} @@ -87,23 +87,23 @@ function StatCard({ }) { return (
{ - e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))'; + e.currentTarget.style.filter = 'brightness(0.8)'; }} onMouseLeave={(e) => { e.currentTarget.style.filter = 'brightness(1)'; }} > -

{label}

+

{label}

{description}

- • + •
{value} {unit && ( diff --git a/src/components/Faq.tsx b/src/components/Faq.tsx new file mode 100644 index 0000000..76261f1 --- /dev/null +++ b/src/components/Faq.tsx @@ -0,0 +1,63 @@ +const faqs = [ + { + question: 'Is this a separate new Internet?', + answer: 'ThreeFold creates a decentralized internet infrastructure that can operate independently, offering alternatives to traditional centralized systems while maintaining compatibility with existing internet protocols.', + }, + { + question: 'Why do we need a new Internet?', + answer: 'The current internet is increasingly centralized and controlled by few entities. ThreeFold provides a more democratic, private, and secure alternative where users and developers have full control over their data and applications.', + }, + { + question: 'How can I participate?', + answer: 'You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.', + }, + { + question: 'How can I get V4 nodes?', + answer: 'Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. Click here to get V4 nodes.', + }, + { + question: 'What can I do with the ThreeFold Grid?', + answer: 'ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs.', + }, + { + question: 'How secure and private is my data?', + answer: 'ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.', + }, + { + question: 'Who should use the ThreeFold Grid?', + answer: 'Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.', + }, +] + +export function Faq () { + return ( +
+
+
+
+

+ Frequently asked questions +

+

+ Can’t find the answer you’re looking for? Reach out to our{' '} + + customer support + {' '} + team. +

+
+
+
+ {faqs.map((faq) => ( +
+
{faq.question}
+
{faq.answer}
+
+ ))} +
+
+
+
+
+ ) +} diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx index 6d730c3..36e39d6 100644 --- a/src/components/Faqs.tsx +++ b/src/components/Faqs.tsx @@ -55,7 +55,7 @@ const faqs = [ ] -export function Faqs() { +export function Faqss () { return (

Frequently asked questions

If you have anything else you want to ask,{' '} reach out to us @@ -83,7 +83,7 @@ export function Faqs() {

    {faqs.map((column, columnIndex) => (
  • diff --git a/src/components/Farmer.tsx b/src/components/Farmer.tsx index b8b0b51..3b9c834 100644 --- a/src/components/Farmer.tsx +++ b/src/components/Farmer.tsx @@ -47,7 +47,7 @@ export function FarmerPreview() { return (
    {/* Gradient Blob Component */} -
    +
    @@ -70,7 +70,7 @@ export function FarmerPreview() { {posts.map((post) => (

    ThreeFold

    -

    Empowering Purpose-Driven Organizations.

    +

    Decentralized internet infrastructure by everyone, for everyone.

    -
    @@ -47,7 +47,7 @@ export function Footer() { required className="w-60 min-w-0 shrink" /> - diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b67f8d6..0db9220 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -136,7 +136,7 @@ export function Header() { -
    diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 6e34978..222377e 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -59,9 +59,7 @@ export function ProductsPreview() { return (
    - {/* Gradient Blob Component */} -
    -
    +
    {/* Left Column - Text (1/3 width) */} @@ -82,26 +80,36 @@ export function ProductsPreview() {
    -
    +
    {products.map(product => ( -
    -
    -
    -
    2 ? 'lg:h-48' : 'lg:h-40'} lg:w-1/4 p-2`}> +
    { + 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)'; + }} + > +
    +
    {`${product.title}
    -
    -

    {product.title}

    -

    +

    +

    {product.title}

    +

    {product.desc}

    -
    ))}
    diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx index fc0960c..8b6c866 100644 --- a/src/components/Spotlight.tsx +++ b/src/components/Spotlight.tsx @@ -38,7 +38,7 @@ export function SpotlightPreview() { ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.

    - +
    {/* Right Column - Stacked Cubes (2/3 width) */} diff --git a/src/components/TfDashboard.tsx b/src/components/TfDashboard.tsx index e39fd24..cea7d28 100644 --- a/src/components/TfDashboard.tsx +++ b/src/components/TfDashboard.tsx @@ -26,7 +26,7 @@ export function TfDashboard() { return (
    -
    +
    diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 4303c54..1834f99 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -228,4 +228,78 @@ .bg-stat-gradient { background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5)); } + + .btn-new-gradient { + background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%); + color: #545853; + } + + .btn-new-gradient:hover { + background: radial-gradient(circle, rgba(230, 245, 236, 0.8) 0%, rgba(172, 193, 232, 0.8) 100%); + color: #545853; + } + + .btn-new-gradient:active { + background: radial-gradient(circle, rgba(230, 245, 236, 0.6) 0%, rgba(172, 193, 232, 0.6) 100%); + color: #545853; + } + + .bg-gradient-soft { + background: #e6f5ec; + background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%); + } + + .bg-gradient-dark { + background: #e6f5ec; + background: radial-gradient(circle, rgb(204, 255, 225) 0%, rgb(156, 186, 240) 100%); + } + + .bg-gradient-neutral { + @apply bg-gradient-to-b from-neutral-50 to-neutral-400; + /* Recommended text colors for good contrast */ + color: #1f2937; /* neutral-800 for light text */ + } + + /* Alternative text color variants */ + .bg-gradient-neutral .text-light { + color: #374151; /* neutral-700 */ + } + + .bg-gradient-neutral .text-medium { + color: #4b5563; /* neutral-600 */ + } + + .bg-gradient-neutral .text-dark { + color: #1f2937; /* neutral-800 */ + } + + /* Text gradient utilities */ + .text-gradient-neutral { + background: linear-gradient(to right, rgb(249, 250, 251), rgb(75, 85, 99)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .text-gradient-neutral-vertical { + background: linear-gradient(to bottom, rgb(249, 250, 251), rgb(126, 126, 126)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Variations with different opacity levels */ + .text-gradient-neutral-light { + background: linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(75, 85, 99, 0.8)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .text-gradient-neutral-dark { + background: linear-gradient(to right, rgba(156, 163, 175, 0.8), rgba(31, 41, 55, 1)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } }