Skip to content

Mobile app links #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AnthonyRonning merged 1 commit into from
May 14, 2025
Merged

Mobile app links #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions frontend/src/components/Marketing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,16 +358,24 @@ export function Marketing() {
</div>
</div>

<div className="flex justify-center mt-8">
<div className="flex flex-col sm:flex-row justify-center items-center gap-4 mt-8">
<Link
to="/downloads"
className="inline-flex items-center gap-2 py-2 px-4 rounded-lg text-center font-medium transition-all duration-300
border border-[hsl(var(--purple))]/30 hover:border-[hsl(var(--purple))]
text-[hsl(var(--marketing-text-muted))] hover:text-foreground"
>
<Laptop className="h-4 w-4" />
<span>Download</span>
<span>Desktop</span>
</Link>
<a
href="https://apps.apple.com/us/app/id6743764835"
target="_blank"
rel="noopener noreferrer"
className="inline-block"
>
<img src="/app-store-badge.svg" alt="Download on the App Store" className="h-10 w-auto" />
</a>
</div>
</section>

Expand Down
16 changes: 16 additions & 0 deletions frontend/src/components/icons/Android.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";

export function Android(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4483-.9993.9993-.9993.9993.4483.9993.9993c0 .5511-.4483.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4483.9993.9993 0 .5511-.4483.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 0 0-.1521-.5676.416.416 0 0 0-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0761L4.84 5.4237a.4161.4161 0 0 0-.5677-.1521.4157.4157 0 0 0-.1521.5676l1.9973 3.4592C2.6889 11.183.3432 14.6681 0 18.761h24c-.3435-4.0929-2.6892-7.578-6.1185-9.4396" />
</svg>
);
}
58 changes: 48 additions & 10 deletions frontend/src/routes/downloads.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import { createFileRoute } from "@tanstack/react-router";
import { TopNav } from "@/components/TopNav";
import { FullPageMain } from "@/components/FullPageMain";
import { MarketingHeader } from "@/components/MarketingHeader";
import { Monitor, Apple, Terminal, Globe, Smartphone } from "lucide-react";
import { Monitor, Terminal, Globe, Smartphone } from "lucide-react";
import { Apple } from "@/components/icons/Apple";
import { Android } from "@/components/icons/Android";
import packageJson from "../../package.json";

// Get version from package.json
Expand Down Expand Up @@ -129,6 +131,51 @@ function DownloadPage() {
</div>
</section>

{/* Mobile Apps Section */}
<section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 mb-12">
<div className="flex items-center gap-3 mb-6">
<Smartphone className="w-7 h-7" />
<span className="text-3xl font-light">Mobile Apps</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
<div className="flex flex-col border border-[hsl(var(--marketing-card-border))] bg-[hsl(var(--marketing-card))]/75 text-foreground p-6 rounded-lg hover:border-foreground/30 transition-all duration-300">
<div className="p-3 rounded-full bg-[hsl(var(--marketing-card))]/50 border border-[hsl(var(--purple))]/30 w-fit mb-4">
<Apple className="w-6 h-6 text-[hsl(var(--purple))]" />
</div>
<h3 className="text-xl font-medium mb-2">iOS</h3>
<p className="text-[hsl(var(--marketing-text-muted))] mb-6 flex-grow">
Download our native iOS app for iPhones and iPads.
</p>
<div className="flex justify-center">
<a
href="https://apps.apple.com/us/app/id6743764835"
className="inline-block"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/app-store-badge.svg"
alt="Download on the App Store"
className="h-12"
/>
</a>
</div>
</div>
Comment on lines +141 to +163
Copy link

@coderabbitai coderabbitai bot May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

iOS App Store integration looks good.

The iOS card is well-implemented with appropriate styling, descriptive text, and a proper App Store badge link. The link opens in a new tab with appropriate security attributes.

🏁 Script executed:

#!/bin/bash
# Verify the App Store badge image exists
if [ -f "./public/app-store-badge.svg" ]; then
  echo "✅ App Store badge SVG exists"
else
  echo "❌ App Store badge SVG not found in public directory"
fi

Length of output: 154

Add missing App Store badge asset

The App Store badge SVG referenced in frontend/src/routes/downloads.tsx is not present in the public directory, causing a broken image link for iOS downloads.

• Ensure public/app-store-badge.svg exists (or update the src path to point to the correct asset).
• Verify the SVG filename and location match the import in the <img> tag.

<div className="flex flex-col border border-[hsl(var(--marketing-card-border))] bg-[hsl(var(--marketing-card))]/75 text-foreground p-6 rounded-lg hover:border-foreground/30 transition-all duration-300">
<div className="p-3 rounded-full bg-[hsl(var(--marketing-card))]/50 border border-[hsl(var(--purple))]/30 w-fit mb-4">
<Android className="w-6 h-6 text-[hsl(var(--purple))]" />
</div>
<h3 className="text-xl font-medium mb-2">Android</h3>
<p className="text-[hsl(var(--marketing-text-muted))] mb-6 flex-grow">
Android app coming soon.
</p>
<div className="text-center text-[hsl(var(--marketing-text-muted))]">
Stay tuned for our Android app.
</div>
</div>
</div>
</section>

{/* Web Access Section */}
<section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 mb-12">
<div className="flex flex-col p-4 sm:p-8 rounded-2xl bg-gradient-to-b from-[hsl(var(--marketing-card))] to-[hsl(var(--marketing-card))]/80 border-2 border-[hsl(var(--purple))] shadow-[0_0_30px_rgba(148,105,248,0.2)]">
Expand Down Expand Up @@ -183,15 +230,6 @@ function DownloadPage() {
</div>
</div>
</section>

{/* Mobile Coming Soon Section */}
<section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 mb-12">
<div className="flex items-center gap-3">
<Smartphone className="w-7 h-7" />
<span className="text-3xl font-light">Mobile Apps</span>
<span className="text-2xl text-[hsl(var(--marketing-text-muted))]">Coming soon!</span>
</div>
</section>
</FullPageMain>
</>
);
Expand Down
Loading