Setup

website/src/components/Features/Features.js

@@ -0,0 +1,32 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./Features.module.css";
+
+const FeatureList = [
+	{
+		title: "Feature Module",
+		Svg: require("../../../static/img/taq_pink.svg").default,
+		description: <>This is Feature component</>,
+	},
+];
+
+function Feature({ Svg, title, description }) {
+	return (
+		<div>
+			<h3>{title}</h3>
+			<p>{description}</p>
+		</div>
+	);
+}
+
+export default function Features() {
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					<Feature {...FeatureList[0]} />
+				</div>
+			</div>
+		</section>
+	);
+}

website/src/components/Features/Features.module.css

@@ -0,0 +1,12 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+	background-color: var(--ifm-color-bg-purple);
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+}

website/src/components/Header/Header.js

@@ -0,0 +1,25 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./Header.module.css";
+
+export default function Header() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className={clsx("hero hero--primary", styles.heroBanner)}>
+			<div className="container">
+				<h1>{siteConfig.title}</h1>
+				<p className="hero__subtitle">{siteConfig.tagline}</p>
+				<div className={styles.buttons}>
+					<Link
+						className="button button--secondary button--lg"
+						to="/docs/intro"
+					>
+						Docusaurus Tutorial - 5min ⏱️
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
+}

website/src/components/Header/Header.module.css

@@ -0,0 +1,12 @@
+.heroBanner {
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+	.heroBanner {
+		padding: 2rem;
+	}
+}

website/src/components/Hero/Hero.js

@@ -0,0 +1,69 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./Hero.module.css";
+
+const FeatureList = [
+	{
+		title: "Easy to Use",
+		Svg: require("../../../static/img/taq_pink.svg").default,
+		description: (
+			<>
+				Taqueria is designed with Tezos developer productivity in mind. Scaffold
+				a brand new Tezos app complete with Smart Contracts, Wallet Integration,
+				Integration Tests, and deployment actions.
+			</>
+		),
+	},
+	{
+		title: "Focus on What Matters",
+		Svg: require("../../../static/img/taq_orange.svg").default,
+		description: (
+			<>
+				Taqueria pulls together the best tools from the Tezos Blockchain
+				development ecosystem so you can focus on building your vision.
+			</>
+		),
+	},
+	{
+		title: "Open to extension",
+		Svg: require("../../../static/img/taq_purple.svg").default,
+		description: (
+			<>
+				Taqueria is open to extension. Devlope your own Taqueria plugin or bring
+				Taqueria into your development environment of choice. Taqueria ships
+				with a robust CLI and a VSCode Plugin.
+			</>
+		),
+	},
+];
+
+function Feature({ Svg, title, description }) {
+	return (
+		<div className={clsx("col col--4")}>
+			<div className="text--center">
+				<Svg className={styles.featureSvg} alt={title} />
+			</div>
+			<div className="text--center padding-horiz--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	);
+}
+
+export default function Hero() {
+	return (
+		<div>
+			<h3>Hero module</h3>
+			<section className={styles.features}>
+				<div className="container">
+					<div className="row">
+						{FeatureList.map((props, idx) => (
+							<Feature key={idx} {...props} />
+						))}
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}

website/src/components/Hero/Hero.module.css

@@ -0,0 +1,11 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+}

website/src/components/LogoGrid/LogoGrid.js

@@ -0,0 +1,32 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./LogoGrid.module.css";
+
+const FeatureList = [
+	{
+		title: "LogoGrid Module",
+		Svg: require("../../../static/img/taq_pink.svg").default,
+		description: <>This is LogoGrid component</>,
+	},
+];
+
+function Feature({ Svg, title, description }) {
+	return (
+		<div>
+			<h3>{title}</h3>
+			<p>{description}</p>
+		</div>
+	);
+}
+
+export default function LogoGrid() {
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					<Feature {...FeatureList[0]} />
+				</div>
+			</div>
+		</section>
+	);
+}

website/src/components/LogoGrid/LogoGrid.module.css

@@ -0,0 +1,12 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+	background-color: var(--ifm-color-bg-purple);
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+}

website/src/components/WhyTaqueria/WhyTaqueria.js

@@ -0,0 +1,32 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./WhyTaqueria.module.css";
+
+const FeatureList = [
+	{
+		title: "WhyTaqueria Module",
+		Svg: require("../../../static/img/taq_pink.svg").default,
+		description: <>This is WhyTaqueria component</>,
+	},
+];
+
+function Feature({ Svg, title, description }) {
+	return (
+		<div>
+			<h3>{title}</h3>
+			<p>{description}</p>
+		</div>
+	);
+}
+
+export default function WhyTaqueria() {
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					<Feature {...FeatureList[0]} />
+				</div>
+			</div>
+		</section>
+	);
+}

website/src/components/WhyTaqueria/WhyTaqueria.module.css

@@ -0,0 +1,12 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+	background-color: var(--ifm-color-primary);
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+}