update content, split sections into separate components for better re…

…adability

src/components/ETHDenver/Bounties.tsx

@@ -0,0 +1,157 @@
+import React, { FC } from "react";
+
+import AnimateSpawn from "../Common/AnimateSpawn";
+import TwitterIcon from "@site/static/img/ethdenver/twitter.svg";
+import { motion } from "framer-motion";
+import transitions from "@site/static/transitions.json";
+import Link from "@docusaurus/Link";
+
+const Bounties: FC<{
+  id: string;
+}> = ({ id }) => {
+  return (
+    <section className="container-10 py-20 md:py-40" id={id}>
+      <AnimateSpawn
+        className="flex flex-col md:flex-row mb-20 md:mb-40"
+        variants={transitions.container}
+      >
+        <div className="md:w-1/2">
+          <motion.h2
+            className="tw-heading-alt-2 mb-6 md:mb-8"
+            variants={transitions.item}
+          >
+            <span className="text-gradient-base text-gradient-denver">
+              ETHDenver Bounties
+            </span>
+            <br />
+            Get Your Hack <br />
+            On
+          </motion.h2>
+          <motion.img
+            src="/img/ethdenver/motoko-playground.webp"
+            alt=""
+            className="w-full md:hidden mb-6"
+            variants={transitions.fadeIn}
+          />
+          <motion.p className="tw-lead-sm mb-8 text-black-60" variants={transitions.item}>
+          Bring DeFi and SocFi to Bitcoin, go mad with NFTs, or decentralize an Ethereum DAO on the Internet Computer and get rewarded for it. This is your chance to #BUIDL the future internet! 
+          </motion.p>
+          <motion.div
+            className="flex flex-col md:flex-row gap-4 md:gap-8 items-start md:items-center"
+            variants={transitions.item}
+          >
+            <Link
+              href="https://app.buidlbox.io/guidl/dfinity"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button-primary"
+            >
+              Register now
+            </Link>
+            <Link
+              className="link-primary link-with-icon"
+              href="https://twitter.com/DFINITYDev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <TwitterIcon />
+              Follow for Developer related updates
+            </Link>
+          </motion.div>
+        </div>
+        <div className="md:w-1/2 hidden md:block">
+          <img
+            src="/img/ethdenver/motoko-playground.webp"
+            alt=""
+            className="w-full"
+          />
+        </div>
+      </AnimateSpawn>
+
+      <AnimateSpawn className="" variants={transitions.container}>
+        <motion.h3
+          className="tw-heading-5 md:tw-heading-4 mb-8"
+          variants={transitions.item}
+        >
+          Participation Categories:
+        </motion.h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          <motion.div
+            className="bg-white rounded-xl px-6 py-8 flex flex-col gap-4 justify-between"
+            variants={transitions.item}
+          >
+            <div>
+              <h4 className="tw-heading-5 mb-3">
+                Build an onchain AI agent or agent framework plugin
+              </h4>
+              <p className="tw-paragraph text-black-60 mb-6">
+                Challenge: Smart contracts running on ICP can run autonomously, sign transactions on more than 20 blockchains and communicate using HTTPS API calls. Use these features to build an onchain (AI) agent or a plugin for an existing agent framework like ElizaOS or LangChain.
+              </p>
+            </div>
+            <div className="tw-lead">
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">1st place:</span><span>$7,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">2st place:</span><span>$4,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">3st place:</span><span>$2,000</span>
+              </p>
+            </div>
+          </motion.div>
+          <motion.div
+            className="bg-white rounded-xl px-6 py-8 flex flex-col gap-4 justify-between"
+            variants={transitions.item}
+          >
+            <div>
+              <h4 className="tw-heading-5 mb-3">
+                Only possible on ICP
+              </h4>
+              <p className="tw-paragraph text-black-60 mb-6">
+                Challenge: Smart contracts running on ICP can run autonomously, sign transactions on more than 20 blockchains and communicate with the outside world using HTTPS API calls. Use these features to build a Web3 app that couldn't be built anywhere else.
+              </p>
+            </div>
+            <div className="tw-lead">
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">1st place:</span><span>$7,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">2st place:</span><span>$4,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">3st place:</span><span>$2,000</span>
+              </p>
+            </div>
+          </motion.div>
+          <motion.div
+            className="bg-white rounded-xl px-6 py-8 flex flex-col gap-4 justify-between"
+            variants={transitions.item}
+          >
+            <div>
+              <h4 className="tw-heading-5 mb-3">
+                Use vetKeys to store secrets on the blockchain
+              </h4>
+              <p className="tw-paragraph text-black-60 mb-6">
+                Challenge: Blockchains can keep secrets! vetkeys, a coming ICP feature, will let apps host econrypted data at scale. Build applications leveraging onchain encryption with vetKeys to enable private messaging, secret auctions, time-lock encryption, and more.
+              </p>
+            </div>
+            <div className="tw-lead">
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">1st place:</span><span>$7,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">2st place:</span><span>$4,000</span>
+              </p>
+              <p className="text-gradient-base text-gradient-denver inline-block mb-0 flex gap-4 align-baseline">
+                <span className="w-5/12">3st place:</span><span>$2,000</span>
+              </p>
+            </div>
+          </motion.div>
+        </div>
+      </AnimateSpawn>
+    </section>
+  );
+};
+
+export default Bounties;

src/components/ETHDenver/CtaCard.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import LinkArrowRight from "../Common/Icons/LinkArrowRight";
+import GradientBackground from "./GradientBackground";
+
+export const CtaCard = ({ title, description, href, backgroundColor, backgroundSegments = [[1, 2, 3]] }: { title: string, description: string, backgroundColor: string[], backgroundSegments: number[][], href: string }) => {
+  return (
+    <Link
+      className="relative link-primary text-black link-with-icon no-underline cursor-pointer hover:-translate-y-2 transition-transform overflow-hidden rounded-xl"
+      href={href}
+    >
+      <GradientBackground
+        color1={backgroundColor[0]}
+        color2={backgroundColor[1]}
+        segments={backgroundSegments}
+        isFullWidth={false}
+      />
+      <article className="relative z-2 flex flex-col gap-8 justify-between items-start p-6 aspect-[1/1.1] md:aspect-[1/1.3]">
+        <h3 className="tw-heading-alt-2 mb-3">
+          <span dangerouslySetInnerHTML={{ __html: title }} />
+        </h3>
+
+        <div>
+          <p className="md:tw-lead text-black-60 mb-2">
+            {description}
+          </p>
+          <div className="button-round-icon mt-auto !bg-transparent !text-black !border-black/20 hover:!bg-black/10 hover:!border-black">
+            <LinkArrowRight />
+          </div>
+        </div>
+
+      </article>
+    </Link>
+  );
+};
+
+export default CtaCard;

src/components/ETHDenver/GradientBackground.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+
+const GradientBackground = ({ color1, color2, segments, isFullWidth = false }: { color1: string, color2: string, segments: number[][], isFullWidth: boolean }) => {
+  // watch mouse move for parallax effect
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const x = e.clientX / window.innerWidth;
+      const y = e.clientY / window.innerHeight;
+      document.documentElement.style.setProperty('--gradient-x', `${x}`);
+      document.documentElement.style.setProperty('--gradient-y', `${y}`);
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <div
+      className="absolute z-0 top-0 left-0 w-full h-full"
+      style={{
+        display: 'grid',
+        gridTemplateRows: `repeat(${segments.length}, 1fr)`,
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {segments.map((row, rowIndex) => (
+        <div
+          key={rowIndex}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: row.map(fr => `${fr}fr`).join(' '),
+          }}
+        >
+          {row.map((_, colIndex) => (
+            <div
+              className="relative overflow-hidden"
+              key={colIndex}
+            >
+              <div
+                className={`absolute top-0 left-0 h-full 
+                ${isFullWidth
+                    ? 'w-[100vw]'
+                    : 'w-[200%]'}
+                `}
+                style={{
+                  willChange: 'background',
+                  background: `radial-gradient(circle, ${color1} calc(30% * var(--gradient-x)), ${color2} calc(max(70%, 90% * var(--gradient-y))))`,
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default GradientBackground;

src/components/ETHDenver/Hero.tsx

@@ -0,0 +1,110 @@
+import React, { FC } from "react";
+
+import AnimateSpawn from "../Common/AnimateSpawn";
+import Link from "@docusaurus/Link";
+import TwitterIcon from "@site/static/img/ethdenver/twitter.svg";
+import { motion } from "framer-motion";
+import transitions from "@site/static/transitions.json";
+import GradientBackground from "./GradientBackground";
+
+const Hero: FC<{
+  id: string;
+  heroRef: React.RefObject<HTMLDivElement>;
+}> = ({ id, heroRef }) => {
+  return (
+    <section id={id} className="relative">
+      <div className="absolute top-0 right-0 bottom-0 left-0 -z-1">
+        <GradientBackground
+          color1="#5015FF"
+          color2="#D897B4"
+          segments={[
+            [1, 2, 4]
+          ]}
+          isFullWidth={true}
+        />
+      </div>
+      <AnimateSpawn variants={transitions.container}>
+        <div
+          className="overflow-hidden text-black pt-20"
+          ref={heroRef}
+        >
+          <div className="container-12 pt-12 mb-20 md:mb-20 md:pt-36">
+
+            <div className="uppercase mb-16 md:mb-0">
+              <motion.h1
+                className="tw-heading-alt-1 text-right text-[18vw] md:text-[10vw]"
+                variants={transitions.slideInFromRight}
+              >
+                <span className="block">UNIFYING WEB3</span>
+                <span className="block">AND AI</span>
+              </motion.h1>
+            </div>
+
+            <div className="flex justify-between items-end flex-col md:flex-row gap-8 mb-10 md:mb-16 ">
+              <div className="md:w-5/10">
+                <motion.h2
+                  className="tw-lead md:tw-heading-3 mb-6 md:mb-8"
+                  variants={transitions.item}
+                >
+                  ETHDenver 2025<br />
+                  <time dateTime="2025-02-23">February 23</time> – <time dateTime="2025-03-02">March 2</time>
+                </motion.h2>
+                <motion.p
+                  className="tw-lead-sm md:tw-lead text-black-60 mb-8"
+                  variants={transitions.item}
+                >
+                  Lightning fast and fully on-chain dapps runningon the Internet Computer blockchain, the only true World Computer that enables a end-to-end  decentralization.
+                </motion.p>
+
+                <motion.p
+                  className="flex flex-col md:flex-row gap-8"
+                  variants={transitions.item}
+                >
+                  <Link
+                    href="#"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="button-primary"
+                  >
+                    Join the Hackathon
+                  </Link>
+                  <Link
+                    className="link-with-icon"
+                    href="https://x.com/dfinity"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <TwitterIcon className="w-6 h-6" />
+                    Follow us for event updates
+                  </Link>
+                </motion.p>
+
+              </div>
+
+              <motion.div
+                className="w-full md:w-3/12"
+                variants={transitions.item}
+              >
+                <Link
+                    href="https://app.buidlbox.io/guidl/dfinity"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className=""
+                >
+                  <img 
+                    src="/img/ethdenver/logo-ethdenver.png"
+                    alt="Logo ETHDenver"
+                    className="w-full pb-2" 
+                  />
+                </Link>
+              </motion.div>
+            </div>
+
+          </div>
+        </div>
+      </AnimateSpawn>
+    </section>
+  );
+};
+
+export default Hero;