Merge pull request #262 from celestiaorg/release/home-tia-wic-updates

Release (homepage, what is celestia, what is tia)

src/components/buttons/button.js

@@ -1,5 +1,6 @@
 import * as React from "react"
 import {Link} from "gatsby";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 export default class Button extends React.Component {
     render() {
@@ -19,7 +20,11 @@ export default class Button extends React.Component {
             return <a href={`${this.props.url}`} target={'_blank'} rel="noreferrer" className={'button button-'+this.props.class} aria-label={this.props.text} dangerouslySetInnerHTML={{__html: buttonTitle}}/>
         }
         else if(this.props.type === 'anchor'){
-            return <Link to={`${this.props.url}`} className={'button button-'+this.props.class} dangerouslySetInnerHTML={{__html: buttonTitle}}/>
+            return (
+            <AnchorLink to={`${this.props.url}`} className={'button button-'+this.props.class}>
+                {buttonTitle}
+            </AnchorLink>
+            )
         }
     }
 }

src/components/footer-box-2.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Link } from "gatsby";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
+import Button from "../components/buttons/button";
+
+function FooterBox2({ footerBoxes2 }) {
+	return (
+		<div id="start-using-celestia" className='footer-boxes-2'>
+			<h2 className='footer-title'>Start using Celestia</h2>
+			<div className={"footer-box-wrapper"}>
+				{footerBoxes2 &&
+					footerBoxes2.map((box, index) => {
+						return (
+							<div key={index} className={"footer-box-2"}>
+								<div className={"footer-box-inner"}>
+									{/* <div className={"bg"} /> */}
+									<div className={"inner"}>
+										<div className={"title"}>{box.title}</div>
+										<div className={"text"}>{box.text}</div>
+										<div className={"footer-box-inner-bottom"}>
+											<div className='link-wrapper'>
+												{box.link.type === "internal" ? (
+													<Button type={"internal"} class={"external"} text={box.link.text} url={box.link.href} />
+												) : box.link.type === "anchor" ? (
+													<AnchorLink to={`${box.link.href}`} className={"button button-external"}>
+														{box.link.text} <i class='icon-external-link'></i>
+													</AnchorLink>
+												) : (
+													<Button type={"external"} class={"external"} text={box.link.text} url={box.link.href} />
+												)}
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
+}
+
+export default FooterBox2;