Merge pull request #7099 from kishore08-07/add-academy-section

Added academy section to brand page

Author: Rajesh-Nagarajan-11

src/sections/Company/Brand/Brand-components/academy.js

@@ -0,0 +1,98 @@
+import React from "react";
+import styled from "styled-components";
+import { SRLWrapper } from "simple-react-lightbox";
+import { Row, Col } from "../../../../reusecore/Layout";
+import Button from "../../../../reusecore/Button";
+import ColorBox from "../../../../components/ColorBox";
+import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud";
+import AcademyIcon from "../../../../assets/images/academy/academy-layer5.svg";
+import AcademyLight from "../../../../assets/images/academy/academy-layer5-light.svg";
+
+const AcademyWrapper = styled.section`
+  @media (max-width: 575px) {
+    .brandHeader {
+      padding: 3rem 0;
+    }
+  }
+`;
+
+const AcademyBrand = () => {
+  return (
+    <AcademyWrapper>
+      <div className="post-content">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="brand-section">
+          <Col $xs={12} $sm={6}>
+            <h1 className="layerH3">
+              Academy
+            </h1>
+          </Col>
+          <Col $xs={12} $sm={6} className="download-button">
+            <a href="/brand/academy-brand-kit.zip">
+              <Button $primary title="Download Logo Assets" $external={true}>
+                <FiDownloadCloud size={21} className="icon-left" />
+              </Button>
+            </a>
+          </Col>
+          <Col>
+            <p>
+              The Academy mark includes the Academy name & logo, and any word,
+              phrase, image, or other designation that identifies the source or
+              origin of any Layer5 projects. Please don't modify the marks or
+              use them in a confusing way, including suggesting sponsorship or
+              endorsement by Layer5, or in a way that confuses Layer5 with
+              another brand (including your own).
+            </p>
+          </Col>
+        </Row>
+        <Row style={{
+          flexWrap: "wrap"
+        }}>
+          <Col>
+            <h2 className="layerH3 in">
+              Logos
+            </h2>
+          </Col>
+          <SRLWrapper>
+            <Row $Vcenter className="ImgDiv">
+              <Col $xs={12} $sm={4}>
+                <img src={AcademyIcon} style={{ minWidth: "200px" }} alt="Academy Logo" />
+              </Col>
+              <Col $xs={12} $sm={4}>
+                <img src={AcademyLight} style={{ minWidth: "200px" }} alt="AcademyLight Logo" />
+              </Col>
+            </Row>
+          </SRLWrapper>
+        </Row>
+        <Row style={{
+          flexWrap: "wrap"
+        }}>
+          <Col $xs={12}>
+            <h2 className="layerH3 in">
+              Colors
+            </h2>
+          </Col>
+          <Col $xs={12}>
+            <p>
+              The Academy color palette consists of the primary Academy color
+              and additional shades. The Academy logo should be white or
+              monochrome tonal when using a color background.
+            </p>
+          </Col>
+          <Row style={{
+            flexWrap: "wrap"
+          }} className="color-code-wrapper">
+            <ColorBox name="Keppel" R="0" G="179" B="159" colorCode="#00B39F" />
+            <ColorBox name="Caribbean Green" R="0" G="211" B="169" colorCode="#00D3A9" />
+            <div className="white-color-box">
+              <ColorBox name="White" R="255" G="255" B="255" dark colorCode="#FFFFFF" />
+            </div>
+          </Row>
+        </Row>
+      </div>
+    </AcademyWrapper>
+  );
+};
+
+export default AcademyBrand;

src/sections/Company/Brand/index.js

@@ -20,6 +20,7 @@ const KanvasBrand = loadable(() => import("./Brand-components/kanvas"));
 const BrandGuide = loadable(() => import("./Brand-components/brand-guide"));
 const StickFigures = loadable(() => import("./Brand-components/stickfigures"));
 const Catalog = loadable(() => import("./Brand-components/catalog"));
+const Academy = loadable(() => import("./Brand-components/academy"));
 const SocialBackgrounds = loadable(() => import("./Brand-components/social-backgrounds"));
 
 const getDimensions = (ele) => {
@@ -112,6 +113,7 @@ const Brand = () => {
   const kanvasRef = useRef(null);
   const stickfiguresRef = useRef(null);
   const CatalogRef = useRef(null);
+  const AcademyRef = useRef(null);
   const SocialBackgroundsRef = useRef(null);
 
   const sectionRefs = [
@@ -129,7 +131,8 @@ const Brand = () => {
     { section: "Kanvas", ref: kanvasRef },
     { section: "Five", ref: stickfiguresRef },
     { section: "Catalog", ref: CatalogRef },
-    { section: "SocialBackgrounds", ref: SocialBackgroundsRef }
+    { section: "Academy", ref: AcademyRef },
+    { section: "SocialBackgrounds", ref: SocialBackgroundsRef },
   ];
 
   const sectionIdMap = {
@@ -147,6 +150,7 @@ const Brand = () => {
     "meshmaster": meshMasterRef,
     "kanvas": kanvasRef,
     "catalog": CatalogRef,
+    "academy": AcademyRef,
     "five": stickfiguresRef
   };
 
@@ -253,6 +257,9 @@ const Brand = () => {
           <div className="section" id="catalog" ref={CatalogRef}>
             <Catalog />
           </div>
+          <div className="section" id="academy" ref={AcademyRef}>
+            <Academy />
+          </div>
           <div className="section" id="five" ref={stickfiguresRef}>
             <StickFigures />
           </div>
@@ -399,6 +406,16 @@ const Brand = () => {
             >
               <span> Catalog </span>
             </p>
+            <p
+              className={`header_link ${
+                visibleSection === "Academy" ? "selected" : ""
+              }`}
+              onClick={() => {
+                scrollTo(AcademyRef.current, "academy");
+              }}
+            >
+              <span> Academy </span>
+            </p>
             <p
               className={`header_link ${
                 visibleSection === "Five" ? "selected" : ""