feat(HomePage): add HomepageFeatures2 and OurSponsors section (#6)

Co-authored-by: Zig Blathazar <[email protected]>

docusaurus.config.ts

@@ -130,7 +130,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `<div>Powered by <a href="https://dezh.tech/">Dezh Technologies</a></div>❤️`,
+      copyright: `<div>Powered by <a href="https://tonion.tech/">Tonion</a></div>`,
     },
     prism: {
       theme: prismThemes.vsLight,

package.json

@@ -27,7 +27,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "react-tooltip": "^5.27.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

src/components/Home/HomepageFeatures/index.tsx

@@ -2,8 +2,7 @@ import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCode,faChartLine,faCube, IconDefinition, faCodeCommit } from '@fortawesome/free-solid-svg-icons';
-import { faLock } from '@fortawesome/fontawesome-free-solid';
+import { faCode,faLock,IconDefinition,  } from '@fortawesome/free-solid-svg-icons';
 import { faNpm } from '@fortawesome/free-brands-svg-icons';
 
 

src/components/Home/HomepageFeatures2/index.tsx

@@ -0,0 +1,108 @@
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCode,
+  faLock,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { faNpm } from "@fortawesome/free-brands-svg-icons";
+
+type FeatureItem = {
+  title: string;
+  Svg: IconDefinition;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Easy to use",
+    Svg: faCode,
+    description: (
+      <>
+        You don't need to be an expert to use Tonion toolkit. All fo our tools
+        are readable and well documented.
+      </>
+    ),
+  },
+  {
+    title: "Accessible from NPM (Soon)",
+    Svg: faNpm,
+    description: (
+      <>
+        Tonion offers a robust CLI tool for managing/building Tact and TON
+        projects. Tonion CLI is accessible from NPM.
+      </>
+    ),
+  },
+  {
+    title: "Secure",
+    Svg: faLock,
+    description: (
+      <>All Tonion contract and tools are strongly tested on each change!</>
+    ),
+  },
+  ,
+  {
+    title: "Secure",
+    Svg: faLock,
+    description: (
+      <>All Tonion contract and tools are strongly tested on each change!</>
+    ),
+  },
+  ,
+  {
+    title: "Secure",
+    Svg: faLock,
+    description: (
+      <>All Tonion contract and tools are strongly tested on each change!</>
+    ),
+  },
+  ,
+  {
+    title: "Secure",
+    Svg: faLock,
+    description: (
+      <>All Tonion contract and tools are strongly tested on each change!</>
+    ),
+  },
+];
+
+function Feature({ title, Svg, description }: FeatureItem) {
+  return (
+    <div className={clsx("col col--6")}>
+      <div className="text--left padding-horiz--md">
+        <div className="bg-secondary-100 rounded-full w-[50px] h-[50px] p-4 mb-5">
+          <FontAwesomeIcon icon={Svg} className="text-secondary-600 size-5 " />
+        </div>
+
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures2(): JSX.Element {
+  return (
+    <section className={clsx(styles.features, "m-auto")}>
+      <div className="container m-auto justify-center"> 
+      <div className="md:max-w-[320px] w-full mx-auto justify-center">
+            <h2 className="text-center "> Features you'll love</h2>
+          <p className="text-gray-500">
+            A responsive documentation template built for everyone who wants to
+            create a plugin.
+          </p>
+          </div>
+        <div className="row">
+
+
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Home/HomepageFeatures2/styles.module.css

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

src/components/Home/HomepageSyntax/index.tsx

@@ -18,7 +18,7 @@ export default function HomepageSyntax( props : SyntaxItem): JSX.Element {
       <div className="container w-full ">
         <div className="flex lg:flex-row flex-col">
           <div className='items-start lg:w-1/2 w-full'>
-            <Tag title='DO NOT REPEAT YOUR SELF!' className={'[&>div>span]:text-[13px] [&>div]:px-[13px] mb-4'}/>
+            <Tag title='DO NOT REPEAT YOUR SELF!'  className={'[&>div>span]:text-[13px] [&>div]:px-[13px] mb-4'}/>
             <h2 className='text-gray-900'>{props.title}</h2>
             <p className='text-gray-500'>{props.description}</p>
             <Link className={'text-secondary-500 underline flex my-auto items-center hover:!text-gray-900 w-fit'} href='/docs'>Read Docs

src/components/Home/OurSponsors/index.tsx

@@ -0,0 +1,20 @@
+
+
+export default function OurSponsors(): JSX.Element {
+    return(
+<div className="max-w-3xl mx-auto px-5 my-10">
+  <div className="flex flex-col justify-center">
+    <div className="text-center">
+      <h2 className="font-semibold text-3xl">Our Sponsors</h2>
+      <p className="max-w-md mx-auto mt-2 text-gray-500">
+        We are thankful to each and every company sponsored our plugin which
+        helped us to continue working on it.
+      </p>
+    </div>
+    <div className="flex flex-wrap items-center justify-center gap-10 mt-2 md:justify-around">
+      <div className="text-gray-400 ">Logo</div>
+    </div>
+  </div>
+</div>
+    )
+}

src/components/SyntaxHighlighter/CodeDisplay.tsx

@@ -13,7 +13,7 @@ const CodeDisplay = ({ codeString, language = 'javascript', theme = 'light' }) =
         <div className="code-display-dot yellow"></div>
         <div className="code-display-dot green"></div>
       </div>
-      <SyntaxHighlighter language={language} style={style} className="!my-0 rounded-t-none !bg-white  !mb-4">
+      <SyntaxHighlighter language={language} style={style} className="!my-0 rounded-t-none !bg-white  !mb-4 max-h-[300px] h-full">
         {codeString}
       </SyntaxHighlighter>
     </div>

src/components/Tag/index.tsx

@@ -1,24 +1,50 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import clsx from "clsx";
-
+import { Tooltip } from "react-tooltip";
 
 type TagItem = {
-    title: string;
-    svg?: IconDefinition;
-    className?: string;
+  title: string;
+  svg?: IconDefinition;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
-
-export default function Tag({title, svg, className}: TagItem) {
-    return (
-        <div className={clsx("flex justify-left items-left", className)}>
-            <div className="flex items-center gap-4  button button--lg bg-secondary-100  text-secondary-700 rounded-[20px] hover:text-secondary-900">
-            <span className="my-auto text-left whitespace-nowrap overflow-hidden overflow-ellipsis ">
-              {title}
-            </span>
-            {svg && <FontAwesomeIcon icon={svg} />}
-          </div>
-        </div>
-    );
+
+export default function Tag(tag: TagItem) {
+  return (
+    <div className={clsx("flex justify-left items-left", tag.className)}>
+      <div className="flex items-center gap-4  button button--lg bg-secondary-100  text-secondary-700 rounded-[20px] hover:text-secondary-700">
+        <span className="my-auto text-left whitespace-nowrap overflow-hidden overflow-ellipsis ">
+          {tag.title}
+        </span>
+        {tag.svg && tag.onClick ? (
+          <>
+            <button
+              onClick={tag.onClick}
+              className="bg-transparent border-none"
+              data-tooltip-id="my-tooltip"
+            >
+              <FontAwesomeIcon
+                icon={tag.svg}
+                className="size-4 text-secondary-700 hover:text-secondary-900"
+              />
+            </button>
+            <Tooltip
+              id="my-tooltip"
+              delayHide={500}
+              delayShow={100}
+              place="top"
+              className="!rounded-2xl !text-sm !py-1 !px-2"
+              events={["click"]}
+            >
+              Copied!
+            </Tooltip>
+          </>
+        ) : (
+          tag.svg && <FontAwesomeIcon icon={tag.svg} className="ml-2" />
+        )}
+      </div>
+    </div>
+  );
 }