andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(app)L remove figma banner

Browse Source
This commit is contained in:
rektdeckard
2022-05-10 22:55:05 -06:00
parent a9ce9faac8
commit 511c191a02
1 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Header/Header.tsx
View File

@@ -16,7 +16,6 @@ import receipt from "../../assets/receipt.svg";
import receiptSpec from "../../assets/receipt-spec.svg"; import receiptSpec from "../../assets/receipt-spec.svg";
import calculator from "../../assets/calculator.svg"; import calculator from "../../assets/calculator.svg";
import calculatorSpec from "../../assets/calculator-spec.svg"; import calculatorSpec from "../../assets/calculator-spec.svg";
import Banner from "../Banner/Banner";
import Links from "../Links/Links"; import Links from "../Links/Links";
import "./Header.css"; import "./Header.css";
@@ -36,64 +35,61 @@ const handleScrollToIcons = () =>
const Header: React.FC<HeaderProps> = () => { const Header: React.FC<HeaderProps> = () => {
return ( return (
<> <header>
<Banner /> <div className="header-contents">
<header> <div className="illustrations-top">
<div className="header-contents"> <img src={markerPurple} id="marker-purple" alt="" />
<div className="illustrations-top"> <img src={paperclips} id="paperclips" alt="" />
<img src={markerPurple} id="marker-purple" alt="" /> <img src={paperclipsThree} id="paperclips-three" alt="" />
<img src={paperclips} id="paperclips" alt="" /> <img className="tablet" src={tabletSpec} alt="" />
<img src={paperclipsThree} id="paperclips-three" alt="" /> <img className="tablet inspectable xray" src={tablet} alt="" />
<img className="tablet" src={tabletSpec} alt="" /> <img className="billiard-ball" src={billiardBallSpec} alt="" />
<img className="tablet inspectable xray" src={tablet} alt="" /> <img
<img className="billiard-ball" src={billiardBallSpec} alt="" /> className="billiard-ball inspectable xray"
<img src={billiardBall}
className="billiard-ball inspectable xray" alt=""
src={billiardBall} />
alt=""
/>
<img className="warning" src={warningSpec} alt="" /> <img className="warning" src={warningSpec} alt="" />
<img className="warning inspectable xray" src={warning} alt="" /> <img className="warning inspectable xray" src={warning} alt="" />
</div>
<div className="intro">
<h2>
Phosphor is a flexible icon family for interfaces, diagrams,
presentations — 
<wbr />
whatever, really.
</h2>
<div className="button-container">
<button className="main-button" onClick={handleGetStarted}>
<ArrowCircleUpRight size={24} weight="fill" />
Get started
</button>
<button className="main-button" onClick={handleScrollToIcons}>
<ArrowCircleDown size={24} weight="fill" />
Explore icons
</button>
</div>
<Links />
</div>
<div className="illustrations-bottom">
<img className="cutting-mat" src={cuttingMatSpec} alt="" />
<img
className="cutting-mat inspectable xray"
src={cuttingMat}
alt=""
/>
<img className="receipt" src={receiptSpec} alt="" />
<img className="receipt inspectable xray" src={receipt} alt="" />
<img className="calculator" src={calculatorSpec} alt="" />
<img
className="calculator inspectable xray"
src={calculator}
alt=""
/>
</div>
</div> </div>
</header> <div className="intro">
</> <h2>
Phosphor is a flexible icon family for interfaces, diagrams,
presentations — 
<wbr />
whatever, really.
</h2>
<div className="button-container">
<button className="main-button" onClick={handleGetStarted}>
<ArrowCircleUpRight size={24} weight="fill" />
Get started
</button>
<button className="main-button" onClick={handleScrollToIcons}>
<ArrowCircleDown size={24} weight="fill" />
Explore icons
</button>
</div>
<Links />
</div>
<div className="illustrations-bottom">
<img className="cutting-mat" src={cuttingMatSpec} alt="" />
<img
className="cutting-mat inspectable xray"
src={cuttingMat}
alt=""
/>
<img className="receipt" src={receiptSpec} alt="" />
<img className="receipt inspectable xray" src={receipt} alt="" />
<img className="calculator" src={calculatorSpec} alt="" />
<img
className="calculator inspectable xray"
src={calculator}
alt=""
/>
</div>
</div>
</header>
); );
}; };