Skip to content

Refactor UI components to use custom semantic theme colors and improv… #1

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

Open
aliir74 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor UI components to use custom semantic theme colors and improv… #1

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
202 changes: 121 additions & 81 deletions app/apt-repository/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,164 @@
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { DiUbuntu, DiGithubBadge } from "react-icons/di"
import { FiDownload, FiRefreshCw, FiPlus, FiDownloadCloud } from "react-icons/fi"
import { CopyButton } from "../../components/ui/copy-button"
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { DiUbuntu, DiGithubBadge } from "react-icons/di";
import {
FiDownload,
FiRefreshCw,
FiPlus,
FiDownloadCloud,
} from "react-icons/fi";
import { CopyButton } from "../../components/ui/copy-button";

export default function APTRepositoryPage() {
return (
<div className="relative flex min-h-screen w-full flex-col items-center overflow-hidden bg-[#0B1F0B] text-green-50 p-4 pt-8">
<div className="relative flex min-h-screen w-full flex-col items-center overflow-hidden bg-[var(--color-bg)] text-[var(--color-foreground)] p-4 pt-8">
{/* Enchanted forest decorative elements */}
<div className="absolute inset-0 overflow-hidden">
{/* Vine-like borders */}
<div className="absolute left-0 top-0 h-32 w-32">
<div className="absolute h-full w-[1px] bg-gradient-to-b from-green-600/40 to-transparent" />
<div className="absolute h-[1px] w-full bg-gradient-to-r from-green-600/40 to-transparent" />
</div>
<div className="absolute bottom-0 right-0 h-32 w-32">
<div className="absolute bottom-0 right-0 h-full w-[1px] bg-gradient-to-t from-green-600/40 to-transparent" />
<div className="absolute bottom-0 h-[1px] w-full bg-gradient-to-l from-green-600/40 to-transparent" />
{/* Vine-like borders */}
<div className="absolute left-0 top-0 h-32 w-32">
<div className="absolute h-full w-[1px] bg-gradient-to-b from-green-600/40 to-transparent" />
<div className="absolute h-[1px] w-full bg-gradient-to-r from-green-600/40 to-transparent" />
</div>
<div className="absolute bottom-0 right-0 h-32 w-32">
<div className="absolute bottom-0 right-0 h-full w-[1px] bg-gradient-to-t from-green-600/40 to-transparent" />
<div className="absolute bottom-0 h-[1px] w-full bg-gradient-to-l from-green-600/40 to-transparent" />
</div>
</div>
</div>
<div className="container relative flex max-w-3xl flex-col items-center gap-8 text-center pb-16 ">
<Link href="/" className="mb-10">
<h1 className="bg-gradient-to-r from-green-300 via-yellow-200/90 to-green-300 bg-clip-text text-4xl font-bold tracking-tighter text-transparent sm:text-3xl cursor-pointer">
noql.net
</h1>
</Link>
<h1 className="text-4xl font-bold tracking-tighter text-[var(--color-heading)] sm:text-3xl cursor-pointer">
noql.net
</h1>
</Link>
<div className="space-y-4">
<div className="flex items-center justify-center gap-4">
<DiUbuntu className="h-12 w-12 text-green-400" />
<h1 className="bg-gradient-to-r from-green-300 via-yellow-200/90 to-green-300 bg-clip-text text-4xl font-bold tracking-tighter text-transparent">
<DiUbuntu className="h-12 w-12 text-[var(--color-icon)]" />
<h1 className="text-4xl font-bold tracking-tighter text-[var(--color-heading)]">
noql.net APT Repository
</h1>
</div>

<p className="text-xl text-green-300 max-w-2xl mx-auto">
A curated Debian/Ubuntu APT repository containing cutting-edge tools designed to help users bypass internet censorship and protect digital freedom.

<p className="text-xl text-[var(--color-subheading)] max-w-2xl mx-auto">
A curated Debian/Ubuntu APT repository containing cutting-edge tools
designed to help users bypass internet censorship and protect
digital freedom.
</p>
</div>

<div className="bg-green-900/30 border border-green-800/50 rounded-lg p-6 space-y-4 w-full max-w-2xl">
<h2 className="text-2xl font-semibold text-green-200 mb-4">Repository Features</h2>
<ul className="text-green-300 text-left space-y-2 list-disc pl-5">
<h2 className="text-2xl font-semibold text-[var(--color-subheading)] mb-4">
Repository Features
</h2>
<ul className="text-[var(--color-foreground)] text-left space-y-2 list-disc pl-5">
<li>Comprehensive collection of censorship circumvention tools</li>
<li>Regularly updated with the latest anti-censorship technologies</li>
<li>
Regularly updated with the latest anti-censorship technologies
</li>
<li>Easy installation via standard APT package management</li>
<li>Available on x86_64 and arm64 architectures</li>
<li>Statically linked binaries for maximum compatibility</li>
</ul>
</div>

<div className="bg-green-900/30 border border-green-800/50 rounded-lg p-8 w-full max-w-2xl shadow-lg">
<h2 className="text-2xl font-bold text-green-200 mb-6 text-center border-b border-green-800/50 pb-3">Installation Guide</h2>
<ol className="text-green-300 text-left space-y-6">
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiDownload className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-green-100 mb-1">Step 1: Install ca-certificates</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-green-400/70 font-mono break-all">sudo apt install ca-certificates</code>
<CopyButton textToCopy="sudo apt install ca-certificates" contentName="Command" />
<h2 className="text-2xl font-bold text-[var(--color-subheading)] mb-6 text-center border-b border-green-800/50 pb-3">
Installation Guide
</h2>
<ol className="text-[var(--color-foreground)] text-left space-y-6">
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiDownload className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-[var(--color-heading)] mb-1">
Step 1: Install ca-certificates
</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-[var(--color-subheading)] font-mono break-all">
sudo apt install ca-certificates
</code>
<CopyButton
textToCopy="sudo apt install ca-certificates"
contentName="Command"
/>
</div>
</div>
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiPlus className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-[var(--color-heading)] mb-1">
Step 2: Add Repository
</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-[var(--color-subheading)] font-mono break-all">
echo "deb [trusted=yes] https://apt.noql.net/all all main" |
sudo tee /etc/apt/sources.list.d/noql.list
</code>
<CopyButton
textToCopy='echo "deb [trusted=yes] https://apt.noql.net/all all main" | sudo tee /etc/apt/sources.list.d/noql.list'
contentName="Command"
/>
</div>
</div>
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiRefreshCw className="text-green-200 w-5 h-5" />
</div>
</div>
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiPlus className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-green-100 mb-1">Step 2: Add Repository</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-green-400/70 font-mono break-all">echo "deb [trusted=yes] https://apt.noql.net/all all main" | sudo tee /etc/apt/sources.list.d/noql.list</code>
<CopyButton textToCopy='echo "deb [trusted=yes] https://apt.noql.net/all all main" | sudo tee /etc/apt/sources.list.d/noql.list' contentName="Command" />
<div className="w-full">
<p className="font-semibold text-[var(--color-heading)] mb-1">
Step 3: Update Package Lists
</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-[var(--color-subheading)] font-mono break-all">
sudo apt update
</code>
<CopyButton
textToCopy="sudo apt update"
contentName="Command"
/>
</div>
</div>
</div>
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiRefreshCw className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-green-100 mb-1">Step 3: Update Package Lists</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-green-400/70 font-mono break-all">sudo apt update</code>
<CopyButton textToCopy='sudo apt update' contentName="Command" />
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiDownloadCloud className="text-green-200 w-5 h-5" />
</div>
</div>
</li>
<li className="flex items-start w-full">
<div className="bg-green-800/40 rounded-full p-2 mr-4 mt-1">
<FiDownloadCloud className="text-green-200 w-5 h-5" />
</div>
<div className="w-full">
<p className="font-semibold text-green-100 mb-1">Step 4: Install Package</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-green-400/70 font-mono break-all">sudo apt install v2ray-core</code>
<CopyButton textToCopy='sudo apt install v2ray-core' contentName="Command" />
<div className="w-full">
<p className="font-semibold text-[var(--color-heading)] mb-1">
Step 4: Install Package
</p>
<div className="bg-black/30 p-2 rounded-md mt-2 flex items-center justify-between w-full">
<code className="text-xs text-[var(--color-subheading)] font-mono break-all">
sudo apt install v2ray-core
</code>
<CopyButton
textToCopy="sudo apt install v2ray-core"
contentName="Command"
/>
</div>
</div>
</div>
</li>
</li>
</ol>
</div>

<div className="flex flex-col sm:flex-row gap-4 w-full max-w-md justify-center">
<Link href="https://github.com/noql-net/debs" target="_blank">
<Button
variant="outline"
className="flex items-center gap-3 p-4 h-auto border-green-800/50 bg-green-900/30 text-green-400 backdrop-blur-sm transition-all hover:border-green-500 hover:bg-green-800/40 hover:text-green-200 w-full"
>
<DiGithubBadge className="h-5 w-5 flex-shrink-0" />
<Button className="flex items-center gap-3 p-4 h-auto border-[var(--color-button-border)] bg-[var(--color-button-bg)] text-[var(--color-button-text)] font-semibold hover:border-[var(--color-button-border-hover)] hover:bg-[var(--color-button-bg-hover)] hover:text-[var(--color-button-text-hover)] w-full transition-all backdrop-blur-sm">
<DiGithubBadge className="h-5 w-5 flex-shrink-0 text-[var(--color-icon)]" />
<span className="font-medium">View on GitHub</span>
</Button>
</Link>
</div>
</div>

<footer className="absolute bottom-4 text-sm text-green-500/60">
© {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, useful for everyone.
<footer className="absolute bottom-4 text-sm text-[var(--color-footer)]">
© {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians,
useful for everyone.
</footer>
</div>
)
);
}
Loading