github.com/adityamillind98/nomad@v0.11.8/website/components/learn-nomad/index.jsx (about)

     1  import Button from '@hashicorp/react-button'
     2  
     3  export default function LearnNomad({ items }) {
     4    return (
     5      <div className="g-learn-nomad">
     6        <div className="g-grid-container learn-container">
     7          <div className="column-container">
     8            {/* need this wrapper to flex center the .column-content */}
     9            <div>
    10              <div className="column-content">
    11                <h2 className="g-type-display-2">
    12                  Learn the latest Nomad skills
    13                </h2>
    14                <Button
    15                  className="desktop-button"
    16                  title="Explore HashiCorp Learn"
    17                  url="https://learn.hashicorp.com/nomad"
    18                  linkType="outbound"
    19                  theme={{ variant: 'primary', brand: 'nomad' }}
    20                />
    21              </div>
    22            </div>
    23            {items.map(item => {
    24              return (
    25                <a
    26                  key={item.title}
    27                  href={item.link}
    28                  target="_blank"
    29                  rel="noopener noreferrer"
    30                >
    31                  <div className="course">
    32                    <div className="image">
    33                      <div className="g-type-label-strong time">{item.time}</div>
    34                      <img src={item.image} alt={item.title} />
    35                    </div>
    36                    <div className="content">
    37                      <div>
    38                        <label className="g-type-label-strong category">
    39                          {item.category}
    40                        </label>
    41                        <h4 className="g-type-display-4">{item.title}</h4>
    42                      </div>
    43                    </div>
    44                  </div>
    45                </a>
    46              )
    47            })}
    48          </div>
    49          <Button
    50            className="mobile-button"
    51            title="Explore HashiCorp Learn"
    52            url="https://learn.hashicorp.com/nomad"
    53            linkType="outbound"
    54            theme={{ variant: 'primary', brand: 'nomad' }}
    55          />
    56        </div>
    57      </div>
    58    )
    59  }