home page changes for ideas

anish1617 · Apr 28, 2022 · bb159d1 · bb159d1
1 parent fd391e0
commit bb159d1
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -2,8 +2,9 @@
 import { useState } from 'react';
 import { Link } from "react-router-dom";
 import { BsTwitter, BsGithub } from 'react-icons/bs';
+import { FaLightbulb } from 'react-icons/fa';
 import { IoAddSharp, IoShareSocial } from 'react-icons/io5';
-import { MdManageSearch, MdClose } from 'react-icons/md';
+import { MdManageSearch, MdClose, MdLightbulb } from 'react-icons/md';
 import SocialShare from 'common/components/SocialShare';
 import { Modal } from "common";
 
@@ -51,6 +52,17 @@ const HeaderNav = ({ showBrowse }) => {
  <span className="btn-label">Create</span>
  </a>
  </li>
+ <li>
+ <a
+ href="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/atapas/react-play"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="app-header-btn app-header-btn--default"
+ >
+ <FaLightbulb className="icon" />
+ <span className="btn-label">Idea</span>
+ </a>
+ </li>
  <li>
  <a
  href="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/atapas/react-play"

diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
@@ -6,6 +6,7 @@ import { RiSlideshow4Line } from "react-icons/ri";
 import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
 import { BsGithub } from "react-icons/bs";
 import { FiStar } from "react-icons/fi";
+import { FaLightbulb } from 'react-icons/fa';
 import { ReactComponent as Flower } from "images/icon-flower.svg";
 import { MdManageSearch } from "react-icons/md";
 import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
@@ -113,6 +114,14 @@ const Home = () => {
  </p>
  </li>
  </ul>
+ <div className="home-ideas">
+ <FaLightbulb className="icon" color="var(--color-brand-primary)" size='48px'/>
+ <p className="ideas-lead">Not sure how to get started?</p>
+ <p className="ideas-title">We have got lot of ideas</p>
+ <Link to="/plays" className="home-anchor">
+ <span className="text">Get started with some ideas</span>
+ </Link>
+ </div>
  </section>
  <section className="home-plays">
  <FeaturedPlays />

diff --git a/src/common/home/home.css b/src/common/home/home.css
@@ -301,6 +301,30 @@
 
 }
 
+/* Home ideas */
+.home-ideas {
+ max-width: var(--screen-lg-max);
+ margin: 4rem auto 0 auto;
+ padding: 4rem 0 0 0;
+ border-top: solid 1px var(--color-neutral-30);
+ text-align: center;
+}
+
+.home-ideas .ideas-title {
+ margin: 0 0 3rem 0;
+ font-family: var(--ff-accent);
+ font-size: var(--fs-xl);
+ font-weight: var(--fw-bold);
+ color: var(--color-brand-primary);
+}
+
+.home-ideas .ideas-lead {
+ margin: 0;
+ font-size: var(--fs-md);
+ font-weight: var(--fw-regular);
+ color: var(--color-neutral-60);
+}
+
 /* Home Plays */
 .home-plays {
  position: relative;