<commit_before>// @flow

import React from "react";
import RecentProjectsSection from "../componentsBySection/Landing/RecentProjectsSection.jsx";
import LatestBlogPosts from "../componentsBySection/Landing/LatestBlogPosts.jsx";
import TestimonialCarousel from "../common/carousel/TestimonialCarousel.jsx";
import Partners from "../componentsBySection/Landing/Partners.jsx";
import cdn from "../utils/cdn";
import Button from "react-bootstrap/Button";
import url from "../utils/url";
import Section from "../enums/Section";
import ProjectChart from "../svg/homepage/chart.svg";
import GreenSplitDot from "../svg/homepage/green-split-dot.svg";
import YellowDot from "../svg/homepage/yellow-dot.svg";
import RedDot from "../svg/homepage/red-dot.svg";

class LandingController extends React.PureComponent<{||}> {
  constructor(): void {
    super();
  }

  render(): React$Node {
    return (
      <div className="LandingController-root">
        <div className="container">
          <div className="row">
            {this._renderHero()}
            {this._renderOptions()}
            {this._renderNextHackathon()}
            {this._recentProjects()}
            {this._renderTestimonials()}
            {this._renderLatestBlogPosts()}
            {this._renderCommunityPartners()}
          </div>
        </div>
      </div>
    );
  }

  _recentProjects(): React$Node {
    return (
      <div className="col-12">
        <RecentProjectsSection />
      </div>
    )
  }

  _renderHero(): React$Node {
    return (
      <div className="LandingController-hero col-12">
        <h1>Make Tech. Do Good.</h1>
        <p>
          We connect tech-for-good projects with skilled volunteers and socially
          responsible companies.
        </p>
        <div className="LandingController-hero-video">
          <span>(pretend a video is here)</span>
        </div>
      </div>
    );
  }

  _renderOptions(): React$Node {
    return (
      <div className="LandingController-options col-12">
        <h2>I'd like to...</h2>
        <p>
          scrollable/clickable row of 3 content boxes go here: "Volunteer",
          "Create a Project", and "Be a Partner"
        </p>
      </div>
    );
  }

  _volunteerSection(): React$Node {
    return (
      <div className="LandingController-volunteer-section">
        <p>Why volunteer with a DemocracyLab Project?</p>
        <p>3 svgs I don't have yet</p>
        <Button variant="primary">Volunteer Now</Button>
      </div>
    );
  }

  _createProjectSection(): React$Node {
    return (
      <React.Fragment>
        <div className="LandingController-createproject-section">
          <p>Why create a project on DemocracyLab?</p>
        </div>
        <div className="LandingController-chart-section">
          <p>(chart goes here)</p>
        </div>
      </React.Fragment>
    );
  }

  _partnerSection(): React$Node {
    return (
      <div className="LandingController-partner-section">
        <p>Why become a sponsor?</p>
        <Button variant="primary">Become a Sponsor</Button>
        <p>Why host a tech-for-good-hackathon?</p>
        <Button variant="primary">Host a Hackathon</Button>
      </div>
    );
  }

  _renderNextHackathon(): React$Node {<commit_msg>add tabs component, render functions for each pane<commit_after>// @flow

import React from "react";
import RecentProjectsSection from "../componentsBySection/Landing/RecentProjectsSection.jsx";
import LatestBlogPosts from "../componentsBySection/Landing/LatestBlogPosts.jsx";
import TestimonialCarousel from "../common/carousel/TestimonialCarousel.jsx";
import Partners from "../componentsBySection/Landing/Partners.jsx";
import cdn from "../utils/cdn";
import Button from "react-bootstrap/Button";
import url from "../utils/url";
import Section from "../enums/Section";
import ProjectChart from "../svg/homepage/chart.svg";
import GreenSplitDot from "../svg/homepage/green-split-dot.svg";
import YellowDot from "../svg/homepage/yellow-dot.svg";
import RedDot from "../svg/homepage/red-dot.svg";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

type State = {|
  defaultTab: string,
|};

export const HomepageTabs: Dictionary<string> = {
  Volunteer: "volunteer",
  CreateProject: "createproject",
  Partner: "partner",
};

const tabOptions: Dictionary<string> = {
  volunteer: "tab-volunteer",
  createproject: "tab-createproject",
  partner: "tab-partner",
};

class LandingController extends React.PureComponent<{||}, State> {
  constructor(props): void {
    super(props);
    const tabArg: string = url.argument("tab");
    this.state = {
      defaultTab:
        tabArg && tabOptions[tabArg]
          ? tabOptions[tabArg]
          : tabOptions.volunteer,
    };
  }

  render(): React$Node {
    return (
      <div className="LandingController-root">
        <div className="container">
          <div className="row">
            {this._renderHero()}
            {this._renderOptions()}
            {this._renderNextHackathon()}
            {this._recentProjects()}
            {this._renderTestimonials()}
            {this._renderLatestBlogPosts()}
            {this._renderCommunityPartners()}
          </div>
        </div>
      </div>
    );
  }

  _recentProjects(): React$Node {
    return (
      <div className="col-12">
        <RecentProjectsSection />
      </div>
    );
  }

  _renderHero(): React$Node {
    return (
      <div className="LandingController-hero col-12">
        <h1>Make Tech. Do Good.</h1>
        <p>
          We connect tech-for-good projects with skilled volunteers and socially
          responsible companies.
        </p>
        <div className="LandingController-hero-video">
          <span>(pretend a video is here)</span>
        </div>
      </div>
    );
  }

  _renderOptions(): React$Node {
    return (
      <div className="LandingController-options col-12">
        <h2 className="text-center">I'd like to...</h2>
        <Tabs
          defaultActiveKey={this.state.defaultTab}
          id="homepage-tabs"
          className="LandingController-tabs"
          justify
        >
          <Tab eventKey={tabOptions.volunteer} title="Volunteer">
            {this._volunteerSection()}
          </Tab>
          <Tab eventKey={tabOptions.createproject} title="Create a Project">
            {this._createProjectSection()}
          </Tab>
          <Tab eventKey={tabOptions.partner} title="Be a Partner">
            {this._partnerSection()}
          </Tab>
        </Tabs>
      </div>
    );
  }

  _volunteerSection(): React$Node {
    return (
      <div className="LandingController-volunteer-section LandingController-tab-section">
        <p>Why volunteer with a DemocracyLab Project?</p>
        <p>3 svgs I don't have yet</p>
        <Button variant="primary">Volunteer Now</Button>
      </div>
    );
  }

  _createProjectSection(): React$Node {
    return (
      <div className="LandingController-createproject-section LandingController-tab-section">
        <p>Why create a project on DemocracyLab?</p>
        <div className="LandingController-chart-section">
          <p>(chart goes here)</p>
        </div>
      </div>
    );
  }

  _partnerSection(): React$Node {
    return (
      <div className="LandingController-partner-section LandingController-tab-section">
        <p>Why become a sponsor?</p>
        <Button variant="primary">Become a Sponsor</Button>
        <p>Why host a tech-for-good-hackathon?</p>
        <Button variant="primary">Host a Hackathon</Button>
      </div>
    );
  }

  _renderNextHackathon(): React$Node {
{'fraction_non_alphanumeric': 0.1381899617968647, 'fraction_numerical': 0.003029903833487024, 'mean_word_length': 2.6135173726796763, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 117, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3102195', 'n_tokens_mistral': 2290, 'n_tokens_neox': 2240, 'n_words': 482}