Merge pull request #134 from cardano-foundation/staging

Merge PR #133 into main

src/components/Layout/WelcomeHeroArtworkContest/index.js

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+
+function WelcomeHeroArtworkContest({ title, description }) {
+  const [backgroundImage, setBackgroundImage] = useState(null);
+
+  const handleImageUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setBackgroundImage(e.target.result); // Set the uploaded image as the background
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <header
+      className={clsx("hero hero--primary", styles.heroBanner)}
+      style={{
+        backgroundImage: backgroundImage ? `url(${backgroundImage})` : null,
+      }}
+    >
+      <div className="container">
+        <div className={styles.taglineContainer}>
+          <h1 className="hero__title">{title}</h1>
+          <p className="hero__subtitle">{description}</p>
+        </div>
+
+        <div className={styles.cta}>
+          <Link
+            className={clsx("button button--primary button--lg", styles.button)}
+            to="/where-to-get-ada"
+          >
+            Where to get ada?
+          </Link>
+          <Link
+            className={clsx("button button--primary button--lg", styles.button)}
+            to="/developers"
+          >
+            Start Building
+          </Link>
+        </div>
+
+        {/* File Upload Input */}
+        <input
+          type="file"
+          accept="image/*"
+          onChange={handleImageUpload}
+          className={styles.uploadInput}
+        />
+
+        <div className="sectionCaret">
+          <svg x="0px" y="0px" viewBox="0 0 2000 30">
+            <polygon
+              className="polygon-fill"
+              points="1000,30 0,30 0,0 980,0 "
+            ></polygon>
+            <polygon
+              className="polygon-fill"
+              points="1000,30 2000,30 2000,0 1020,0 "
+            ></polygon>
+          </svg>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default WelcomeHeroArtworkContest;

src/components/Layout/WelcomeHeroArtworkContest/styles.module.css

@@ -0,0 +1,83 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+/* Buttons */
+.cta .button {
+  margin-right: 1rem; /* space between buttons */
+  width: 240px; /* force equal width */
+  font-weight: normal;
+}
+
+html[data-theme="light"] .button {
+  background-color: rgb(255, 255, 255);
+  color: var(--ifm-color-primary);
+}
+
+html[data-theme="dark"] .button {
+  background-color: var(--ifm-button-background-color);
+  color: var(--ifm-button-color);
+}
+
+.cta .button:last-child {
+  margin-right: 0; /* no extra margin to the right of the the last button right: */
+}
+
+.taglineContainer {
+  width: 50%;
+  margin-bottom: 3rem;
+}
+
+/* Banner */
+
+.heroBanner {
+  padding: 4rem 2rem;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 35% 50%;
+  height: 830px;
+}
+
+html[data-theme="light"] .heroBanner {
+  background-image: url(/img/hero-header-welcome-fallback.jpg);
+  /*background-image: linear-gradient(315deg, rgb(91, 123, 202), rgb(10, 56, 166));*/
+}
+
+html[data-theme="dark"] .heroBanner {
+  background-image: url(/img/hero-header-welcome-fallback.jpg);
+}
+
+/* screen size changes */
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+    background-size: cover;
+    background-position: 50% 50%;
+  }
+  .cta .button {
+    margin-bottom: 1rem;
+  }
+  .taglineContainer {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .heroBanner {
+    background-position: 35% 50%;
+  }
+}
+
+@media screen and (min-width: 1950px) {
+  .heroBanner {
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}

src/pages/demo-artwork-contest.js

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Layout from "@theme/Layout";
+import WelcomeHeroArtworkContest from "@site/src/components/Layout/WelcomeHeroArtworkContest";
+import BoundaryBox from "@site/src/components/Layout/BoundaryBox";
+import BackgroundWrapper from "@site/src/components/Layout/BackgroundWrapper";
+import SpacerBox from "@site/src/components/Layout/SpacerBox";
+
+function HomepageHeader() {
+  const { siteTitle } = "useDocusaurusContext()";
+  return (
+    <WelcomeHeroArtworkContest
+      title={["Making the world Work Better For All"]}
+      description="Cardano is a blockchain platform for changemakers, innovators, and visionaries, 
+        with the tools and technologies required to create possibility for the many, as well as the few, 
+        and bring about positive global change."
+    />
+  );
+}
+
+function FeaturedTitleWithText({ title, description, quote, headingDot }) {
+  const [imageSrc, setImageSrc] = useState(null);
+
+  const handleImageUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setImageSrc(e.target.result); // Set the uploaded image as the preview
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <div>
+      <div className="row">
+        <div className="col col--6">
+          <h1 className={headingDot ? "headingDot" : ""}>{title}</h1>
+        </div>
+        <div className="col col--6">
+          {Array.isArray(description) ? (
+            description.map((paragraph, index) => (
+              <p key={index} className="black-text">
+                {paragraph}
+              </p>
+            ))
+          ) : (
+            <p className="black-text">{description}</p>
+          )}
+          <h2 className="red-text">{quote}</h2>
+
+
+
+          {/* Display the uploaded image as a preview */}
+          {imageSrc && (
+            <div>
+              <img
+                src={imageSrc}
+                alt="Preview"
+                style={{ maxWidth: "100%", marginTop: "20px" }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  return (
+    <Layout
+      title="Home | cardano.org"
+      description="An open platform designed to empower billions without economic identity by offering decentralized applications for managing identity, value, and governance."
+    >
+      <HomepageHeader />
+      <main>
+        <BackgroundWrapper backgroundType={"zoom"}>
+          <BoundaryBox>
+            <FeaturedTitleWithText
+              title="Artwork Contest Test Page"
+              description={[
+                "Upload your image here to see how it would look like.",
+                "Toggle dark mode and resize the browser to see how it adapts.",
+              ]}
+              quote={[
+                "Image will not be submitted,",
+                <br key="line1" />, /* FIXME: too hacky */
+                "This happens on your machine only",
+              ]}
+              headingDot={true}
+            />
+            <SpacerBox size="large" />
+          </BoundaryBox>
+        </BackgroundWrapper>
+
+      </main>
+    </Layout>
+  );
+}