Skip to main content
The Apps component displays download buttons for Geometry Dash across multiple platforms: iOS, Android (Google Play), and Steam.

​
Features

  • Three platform download links (iOS, Android, Steam)
  • Responsive grid layout
  • Hover scale animations
  • Bootstrap grid system integration
  • External links with security attributes

​
Usage

src/pages/index.astro
---
import Apps from "../components/Apps.astro";
---

<Apps />

​
Component Code

The Apps component is a static component displaying three download options:
src/components/Apps.astro
<section>
  <div class="container d-flex justify-content-center align-items-center">
    <div class="shadow-none mt-4" style="height: auto;width: 724px;">
      <div class="row m-auto">
        <div class="col-6 col-sm-4 col-md-4">
          <a href="https://apps.apple.com/us/app/geometry-dash/id625334537" 
             target="_blank">
            <img 
              class="img-fluid mb-2 hover-scale transition-all" 
              src="https://www.robtopgames.com/Images/ios.png" 
            />
          </a>
        </div>
        <div class="col-6 col-sm-4 col-md-4">
          <a href="https://play.google.com/store/apps/details?id=com.robtopx.geometryjump&hl=en"
             target="_blank">
            <img 
              class="img-fluid mb-2 hover-scale transition-all" 
              src="https://www.robtopgames.com/Images/google.png" 
            />
          </a>
        </div>
        <div class="col-6 col-sm-4 col-md-4">
          <a href="https://store.steampowered.com/app/322170/Geometry_Dash/" 
             target="_blank">
            <img 
              class="img-fluid hover-scale transition-all" 
              src="https://www.robtopgames.com/Images/steam.png" 
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
The component includes links to three platforms:
PlatformURLPackage/App ID
iOS (App Store)https://apps.apple.com/us/app/geometry-dash/id625334537id625334537
Android (Google Play)https://play.google.com/store/apps/details?id=com.robtopx.geometryjumpcom.robtopx.geometryjump
Steamhttps://store.steampowered.com/app/322170/Geometry_Dash/322170

​
Responsive Layout

The component uses Bootstrap’s responsive grid system: 
<div class="row m-auto">
  <div class="col-6 col-sm-4 col-md-4">
    <!-- iOS link -->
  </div>
  <div class="col-6 col-sm-4 col-md-4">
    <!-- Android link -->
  </div>
  <div class="col-6 col-sm-4 col-md-4">
    <!-- Steam link -->
  </div>
</div>

​
Breakpoint Behavior

  • Extra small devices (< 576px): 2 columns (col-6)
  • Small devices (≥ 576px): 3 columns (col-sm-4)
  • Medium+ devices (≥ 768px): 3 columns (col-md-4)

​
Styling Features

​
Hover Scale Animation

All download buttons have a hover scale effect: 
.hover-scale {
  transform: scale(1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.transition-all {
  transition: all 0.2s ease-in-out;
}

​
Container Sizing

The component container has a fixed max-width: 
<div class="shadow-none mt-4" style="height: auto;width: 724px;">

​
Responsive Images

All images use Bootstrap’s .img-fluid class: 
<img class="img-fluid" src="..." />

​
Accessibility

All links:
  • Open in new tabs (target="_blank")
  • Should include rel="noopener noreferrer" for security (recommended enhancement)
  • Use descriptive image alt text (recommended enhancement)

​
Customization

​
Adding New Platform

To add a new platform (e.g., Nintendo Switch):
src/components/Apps.astro
<div class="row m-auto">
  <!-- Existing platforms -->
  
  <div class="col-6 col-sm-4 col-md-4">
    <a href="NINTENDO_ESHOP_URL" 
       target="_blank"
       rel="noopener noreferrer">
      <img 
        class="img-fluid mb-2 hover-scale transition-all" 
        src="/path/to/nintendo-button.png"
        alt="Download on Nintendo eShop" 
      />
    </a>
  </div>
</div>

​
Making it Dynamic

To accept custom app links as props:
src/components/Apps.astro
---
interface Props {
  iosUrl?: string;
  androidUrl?: string;
  steamUrl?: string;
}

const { 
  iosUrl = "https://apps.apple.com/us/app/geometry-dash/id625334537",
  androidUrl = "https://play.google.com/store/apps/details?id=com.robtopx.geometryjump",
  steamUrl = "https://store.steampowered.com/app/322170/Geometry_Dash/"
} = Astro.props;
---

<section>
  <div class="container d-flex justify-content-center align-items-center">
    <div class="shadow-none mt-4" style="height: auto;width: 724px;">
      <div class="row m-auto">
        {iosUrl && (
          <div class="col-6 col-sm-4 col-md-4">
            <a href={iosUrl} target="_blank" rel="noopener noreferrer">
              <img class="img-fluid mb-2 hover-scale transition-all" 
                   src="https://www.robtopgames.com/Images/ios.png" />
            </a>
          </div>
        )}
        {androidUrl && (
          <div class="col-6 col-sm-4 col-md-4">
            <a href={androidUrl} target="_blank" rel="noopener noreferrer">
              <img class="img-fluid mb-2 hover-scale transition-all" 
                   src="https://www.robtopgames.com/Images/google.png" />
            </a>
          </div>
        )}
        {steamUrl && (
          <div class="col-6 col-sm-4 col-md-4">
            <a href={steamUrl} target="_blank" rel="noopener noreferrer">
              <img class="img-fluid hover-scale transition-all" 
                   src="https://www.robtopgames.com/Images/steam.png" />
            </a>
          </div>
        )}
      </div>
    </div>
  </div>
</section>

Build docs developers (and LLMs) love

Get started for freeTalk to us