Skip to content

world first update #3634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reigj1 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

world first update #3634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c273bbc
world first update
reigj1 Oct 22, 2024
ba54838
update hero
reigj1 Oct 22, 2024
538b663
update cards
reigj1 Oct 22, 2024
84a66f2
merge
reigj1 Oct 24, 2024
970c655
update hero and paddings
reigj1 Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions src/components/LandingPage/Hero/Cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,33 @@ export const CardsSection = () => {
className="container-12 mt-30"
variants={transitions.container}
>
{" "}
nn
<article className="bg-[linear-gradient(54deg,_#3B00B9_0%,_#D38ED7_131.95%)] rounded-[32px] text-white overflow-clip mt-6">
<div className="flex flex-col md:flex-row items-stretch">
<div className="basis-1/2 p-1/10 md:py-1/12 md:order-2">
<h4 className="tw-heading-4 md:tw-heading-60">
World Computer capabilities
</h4>
<p className="tw-paragraph md:tw-lead-sm mt-4 md:mt-6 mb-0">
The Internet Computer is pushing the boundaries of what is
possible in blockchain technology today with its revolutionary
capabilities.
</p>
<Link className="button-outline-white-30 mt-4" href="/capabilities">
Get into it
</Link>
</div>

<div className="basis-1/2 relative md:order-1 -mt-[5%] flex justify-center items-center md:mt-0 overflow-hidden">
<img
loading="lazy"
src="img/home/1st.webp"
className="md:absolute w-[75%] translate-x-1/12"
/>
</div>
</div>
</article>
<article
aria-label="powered by chainfusilli"
className="overflow-clip relative bg-[radial-gradient(circle_at_50%,#000,#3B00B9,#1E005D)] rounded-[32px] text-white mt-6"
Expand Down Expand Up @@ -176,7 +203,6 @@ export const CardsSection = () => {
</div>
</div>
</article>

<article className="bg-[linear-gradient(48deg,#4DEDD3_-32.7%,#31A782_33.06%,#3B00B9_129.51%)] rounded-[32px] text-white overflow-clip mt-6">
<div className="flex flex-col md:flex-row items-stretch">
<div className="basis-1/2 p-1/10 md:py-1/12 md:order-2">
Expand All @@ -201,7 +227,6 @@ export const CardsSection = () => {
</div>
</div>
</article>

<article className="bg-[linear-gradient(#3B00B9,#9D80DC)] rounded-[32px] text-white overflow-clip mt-6">
<div className="flex flex-col md:flex-row items-stretch ">
<div className="basis-1/2 relative">
Expand Down Expand Up @@ -236,7 +261,6 @@ export const CardsSection = () => {
</div>
</div>
</article>

<div className="block md:flex gap-4">
<article className="basis-1/2 bg-black rounded-[32px] text-white overflow-clip mt-6">
<div className="md:flex-row items-stretch relative z-1">
Expand Down
223 changes: 193 additions & 30 deletions src/pages/capabilities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ import transitions from "@site/static/transitions.json";
import Layout from "@theme/Layout";
import clsx from "clsx";
import { motion } from "framer-motion";
import React from "react";
import React, { useRef } from "react";
import AnimateSpawn from "../components/Common/AnimateSpawn";
import ShareMeta from "../components/Common/ShareMeta/ShareMeta";
import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero";
import DarkHeroStyles from "../components/Common/DarkHeroStyles";

const SplitCard: React.FC<{
children: React.ReactNode;
Expand Down Expand Up @@ -214,45 +216,206 @@ caused a major chain to hard fork and a loss of 60 million USD.`,
},
];

interface FeatureCardProps {
imageSrc: string;
title: string;
description: string;
badge?: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({
imageSrc,
title,
description,
badge,
}) => {
return (
<article className="flex flex-col justify-start tw-lead-sm md:tw-lead">
<img
loading="lazy"
src={imageSrc}
alt=""
className="aspect-square object-contain ml-0 mr-auto w-[120px] max-w-full max-h-full p-0.5"
/>
<div className="mt-3 w-full">
<span className="text-white">{title} </span>
<span className="text-white/50">{description}</span>
</div>
{badge && (
<div className="self-start rounded-full bg-white mt-4 gap-[10px] text-[0.75rem] md:text-[1rem] text-black/60 px-4 py-0.5 flex">
<img
loading="lazy"
src="/img/features/exclusive.svg"
alt=""
className="aspect-square w-5 "
/>
{badge}
</div>
)}
</article>
);
};

const features = [
{
imageSrc: "/img/features/1a.svg",
title: "Web Native Contracts.",
description:
"The Internet Computer is the first blockchain to host smart contracts capable of processing Web2 interactions at web speed, enabling users to engage directly through seamless web experiences they create.",
badge: "ICP exclusive",
},
{
imageSrc: "/img/features/2a.svg",
title: "Reverse Gas Model.",
description:
"ICP was the first blockchain that allowed smart contracts to pay for their own computation, so users can interact with them seamlessly.",
},
{
imageSrc: "/img/features/3a.svg",
title: "Single public key for verification by users.",
description:
"ICP enables efficient verification, scalability, autonomous evolution, and built-in authentication using a single public key, making it more efficient than traditional blockchains like Ethereum.",
badge: "ICP exclusive",
},
{
imageSrc: "/img/features/4a.svg",
title: "Smart contract state in the order of hundreds of GBs.",
description:
"Most blockchain contracts can practically host a few KB of data, but that is not enough for web applications. ICP is the first first blockchain whose smart contracts can host data in 100s of gigabytes. Many orders of magnitude larger.",
badge: "ICP exclusive",
},
{
imageSrc: "/img/features/5a.svg",
title: "Multichain integration.",
description:
"ICP is the first blockchain with native Bitcoin and Ethereum integration without bridges, enabling decentralized smart contracts to read and write directly to the their network.",
badge: "ICP exclusive",
},
{
imageSrc: "/img/features/6a.svg",
title: "Queries.",
description:
"ICP is the first blockchain that separates smart contract messages into stateful 'Updates' and 'Queries', where queries are faster, cheaper and can be used to create applications that provide a good user experience.",
},
{
imageSrc: "/img/features/7a.svg",
title: "Dynamic Sharding.",
description:
"The Internet Computer was the first blockchain to introduce sharding, and the first to introduce dynamic sharding.",
},
{
imageSrc: "/img/features/8a.svg",
title: "Threshold signing secure under asynchrony.",
description:
"Unlike many protocols that assume a synchronous network, ICP's protocol adapts to real-world conditions by operating under asynchronous communication, enhancing its resilience.",
badge: "ICP exclusive",
},
{
imageSrc: "/img/features/9a.svg",
title: "Automatic upgrades triggered by community voting.",
description:
"ICP is the first blockchain whose protocol and code are fully controlled by a DAO where users control the version of the code being run.",
},
];

function FeaturesPage() {
const heroRef = useRef<HTMLDivElement>(null);
const isDark = useDarkHeaderInHero(heroRef);

return (
<Layout
title="World Computer capabilities"
description="The Internet Computer is 'alien tech' crypto. It extends the
internet by smashing through historical limitations, unlocking new capabilities
for Web3 and the world..."
description="The Internet Computer is pushing the boundaries of what is possible in blockchain technology today with its revolutionary capabilities."
editPath={`https://github.com/dfinity/portal/edit/master/${__filename}`}
>
<ShareMeta image="/img/shareImages/share-features.jpg"></ShareMeta>
<ShareMeta image="/img/shareImages/share-features.webp"></ShareMeta>

<main className="text-black relative overflow-hidden">
<AnimateSpawn
variants={transitions.container}
el={motion.section}
className="overflow-hidden"
<main
style={{
marginTop: `calc(var(--ifm-navbar-height) * -1)`,
}}
className="text-black relative overflow-hidden"
>
{isDark && <DarkHeroStyles bgColor="transparent"></DarkHeroStyles>}
<section
className=" bg-infinite text-white pt-20 pb-24 md:pb-40"
ref={heroRef}
>
<div className="container-10 pt-12 mb-40 md:mb-60 md:pt-30 relative">
<div className="md:w-7/10 lg:w-6/10">
<motion.h1
className="tw-heading-3 md:tw-heading-2 mb-6"
variants={transitions.item}
>
World Computer capabilities
</motion.h1>
<motion.p
className="tw-lead-sm md:tw-lead mb-0"
variants={transitions.item}
>
The Internet Computer provides numerous unique capabilities that
enable it to play the role of World Computer, provide a
foundation for transforming the internet, and deliver
opportunity to builders and users.
</motion.p>
<AnimateSpawn variants={transitions.container} el={motion.section}>
<div className="container-10 pt-12 mb-40 md:mb-60 md:pt-72 relative flex flex-col md:flex-row">
<div className="md:w-[55%]">
<motion.h1
className="tw-heading-3 md:tw-heading-2 mb-6"
variants={transitions.item}
>
World Computer capabilities
</motion.h1>
<motion.p
className="tw-lead-sm md:tw-lead-lg mb-0"
variants={transitions.item}
>
The Internet Computer is pushing the boundaries of what is
possible in blockchain technology today with its revolutionary
capabilities.
</motion.p>
</div>
</div>
</div>
</AnimateSpawn>
<div className="container-12 relative z-1 pointer-events-none mt-72 sm:mt-[30rem] md:mt-0">
<div className="absolute sm:w-8/12 md:w-1/2 bottom-0 translate-y-1/12 md:-translate-y-1/3 -translate-x-1/12 md:translate-x-[93%]">
<img
src="/img/features/hero.webp"
alt="World Computer capabilities"
className="w-full max-w-none"
loading="lazy"
/>
</div>
</div>
</AnimateSpawn>
<AnimateSpawn
variants={transitions.container}
className="pt-24 md:pt-0"
>
<aside className="container-10 flex flex-col md:flex-row md:items-center">
<div className="order-2 md:order-1 md:w-[40%] relative mt-6">
<div className="pointer-events-none md:absolute w-[70%] mx-auto md:w-[110%] -translate-y-1/12 md:-translate-y-1/2">
<motion.img
variants={transitions.fadeIn}
src="/img/features/1st-cup.webp"
alt=""
className="w-full h-full object-cover"
/>
</div>
</div>
<div className="order-1 md:order-2 md:w-[60%] md:mx-12">
<div>
<motion.h3
className="tw-heading-5 text-gradient-purple md:tw-heading-4 mb-4 md:mb-6"
variants={transitions.item}
>
The Internet Computer has pioneered numerous{" "}
<span className="text-white">
World-first 🥇 Innovations{" "}
</span>{" "}
in blockchain and the internet. From including web speed
transactions, seamless smart contracts, and scalable dApps.
For many of these capabilities, ICP is still the only
blockchain that supports them.
</motion.h3>
</div>
</div>
</aside>
</AnimateSpawn>
<AnimateSpawn
className="container-10 grid sm:grid-cols-2 md:grid-cols-3 gap-y-16 sm:gap-x-12 md:gap-x-[4.5rem] md:gap-y-20 mt-20 md:mt-48"
variants={transitions.container}
>
{features.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</AnimateSpawn>
</section>
<AnimateSpawn
className="container-10 text-white relative mb-32 md:mb-20"
className="container-10 text-white relative mt-24 md:mt-40 mb-32 md:mb-20"
el={motion.section}
variants={transitions.container}
>
Expand Down
13 changes: 13 additions & 0 deletions static/img/features/1a.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/features/1st-cup.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading