Voeg nieuwe layout en pagina's toe voor Arch Linux zonder piepjes; verwijder oude HTML-bestanden

Author: Githubguy132010

about.html

@@ -0,0 +1,29 @@
+
+export default function AboutPage() {
+  return (
+    <div className="container mx-auto px-4 py-16 animate-fade-in">
+      <h1 className="text-4xl md:text-5xl font-bold text-center mb-8 text-gray-800 dark:text-white">
+        About Arch Linux without Beeps
+      </h1>
+      <div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <p className="text-lg mb-6 text-gray-600 dark:text-gray-300">
+          This project was created to help users install Arch Linux without the annoying beeps that can occur during the installation process. It aims to provide a smoother and more pleasant installation experience.
+        </p>
+        <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">About the Author</h2>
+        <div className="flex items-center mb-6">
+          <div>
+            <h3 className="text-xl font-semibold text-gray-800 dark:text-white">Thomas Brugman</h3>
+            <p className="text-gray-600 dark:text-gray-300">Developer & Linux Enthusiast</p>
+          </div>
+        </div>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
+          Hi, I'm Thomas Brugman. I live in Gouda (Netherlands) and have a keen interest in computers and laptops. I enjoy testing new operating systems and reporting bugs. I'm currently learning YAML and Bash, and I already have some experience with both. I use VS Code as my development environment and am familiar with some fundamental programming concepts.
+        </p>
+        <p className="text-gray-600 dark:text-gray-300">
+          I'm working on the 'Arch-Linux-without-the-beeps' project, which ensures that the system does not produce beep sounds during installation and builds ISO files locally using Docker. I prefer using sudo in scripts and am open to feedback and new features for my project.
+        </p>
+      </div>
+    </div>
+  )
+}
+

app/about/page.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Moon, Sun } from 'lucide-react'
+
+const Navbar = () => {
+  const [darkMode, setDarkMode] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true'
+    setDarkMode(isDarkMode)
+  }, [])
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark')
+      localStorage.setItem('darkMode', 'true')
+    } else {
+      document.documentElement.classList.remove('dark')
+      localStorage.setItem('darkMode', 'false')
+    }
+  }, [darkMode])
+
+  const navItems = [
+    { name: 'Home', path: '/' },
+    { name: 'Download', path: '/download' },
+    { name: 'Docs', path: '/docs' },
+    { name: 'About', path: '/about' },
+  ]
+
+  return (
+    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}>
+      <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold text-gray-800 dark:text-white">
+          Arch Linux
+        </Link>
+        <ul className="flex space-x-6">
+          {navItems.map((item) => (
+            <li key={item.name}>
+              <Link 
+                href={item.path}
+                className={`text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors ${pathname === item.path ? 'font-semibold' : ''}`}
+              >
+                {item.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <button
+          onClick={() => setDarkMode(!darkMode)}
+          className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white transition-colors"
+        >
+          {darkMode ? <Sun size={20} /> : <Moon size={20} />}
+        </button>
+      </nav>
+    </header>
+  )
+}
+
+export default Navbar

components/Navbar.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+
+export default function DocsPage() {
+  return (
+    <div className="container mx-auto px-4 py-16 animate-fade-in">
+      <h1 className="text-4xl md:text-5xl font-bold text-center mb-8 text-gray-800 dark:text-white">
+        Documentation
+      </h1>
+      <div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Installation Guide</h2>
+        <ol className="list-decimal list-inside space-y-4 text-gray-600 dark:text-gray-300">
+          <li>
+            <span className="font-semibold">Download the ISO:</span> Get the latest Arch Linux without Beeps ISO from our{' '}
+            <Link href="/download" className="text-primary hover:underline">download page</Link>.
+          </li>
+          <li>
+            <span className="font-semibold">Create a bootable USB drive:</span> Use a tool like Rufus or dd to create a bootable USB drive with the downloaded ISO.
+          </li>
+          <li>
+            <span className="font-semibold">Boot from the USB drive:</span> Restart your computer and boot from the USB drive. You may need to change your BIOS/UEFI settings to do this.
+          </li>
+          <li>
+            <span className="font-semibold">Follow the Arch Linux installation guide:</span> Our ISO follows the standard Arch Linux installation process, but without the system beeps. Refer to the{' '}
+            <a href="https://wiki.archlinux.org/title/Installation_guide" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+              official Arch Linux installation guide
+            </a>{' '}
+            for detailed steps.
+          </li>
+          <li>
+            <span className="font-semibold">Enjoy your beep-free Arch Linux:</span> Once installed, you'll have a fully functional Arch Linux system without the annoying beeps during boot or system events.
+          </li>
+        </ol>
+        <h2 className="text-2xl font-bold mt-8 mb-4 text-gray-800 dark:text-white">Troubleshooting</h2>
+        <p className="mb-4 text-gray-600 dark:text-gray-300">
+          If you encounter any issues during installation or have questions, please check our{' '}
+          <a href="https://github.com/Githubguy132010/Arch-Linux-without-the-beeps/issues" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+            GitHub Issues
+          </a>{' '}
+          page or create a new issue for support.
+        </p>
+      </div>
+    </div>
+  )
+}
+

docs.html

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { Download } from 'lucide-react'
+
+export default function DownloadPage() {
+  return (
+    <div className="container mx-auto px-4 py-16 animate-fade-in">
+      <h1 className="text-4xl md:text-5xl font-bold text-center mb-8 text-gray-800 dark:text-white">
+        Download Arch Linux without Beeps
+      </h1>
+      <div className="max-w-2xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+        <p className="text-lg mb-6 text-gray-600 dark:text-gray-300">
+          Get the latest version of Arch Linux installation files without the annoying system beeps. Our custom ISO ensures a smooth and quiet installation process.
+        </p>
+        <div className="flex justify-center">
+          <Link 
+            href="https://github.com/Githubguy132010/Arch-Linux-without-the-beeps/releases"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-md text-lg font-semibold transition-colors"
+          >
+            <Download className="mr-2" size={24} />
+            Download Latest Release
+          </Link>
+        </div>
+        <div className="mt-8 text-sm text-gray-500 dark:text-gray-400">
+          <h2 className="font-semibold mb-2">System Requirements:</h2>
+          <ul className="list-disc list-inside">
+            <li>x86_64 architecture</li>
+            <li>Minimum 512 MB RAM (2 GB recommended)</li>
+            <li>Minimum 2 GB disk space (20 GB recommended)</li>
+            <li>Internet connection for installation</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+

docs/page.tsx

@@ -0,0 +1,79 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 218 27% 94%;
+  --foreground: 220 16% 22%;
+  --card: 220 14% 96%;
+  --card-foreground: 220 16% 22%;
+  --popover: 220 14% 96%;
+  --popover-foreground: 220 16% 22%;
+  --primary: 220 54% 20%;
+  --primary-foreground: 220 14% 96%;
+  --secondary: 220 14% 90%;
+  --secondary-foreground: 220 16% 22%;
+  --muted: 220 14% 90%;
+  --muted-foreground: 220 10% 40%;
+  --accent: 220 14% 90%;
+  --accent-foreground: 220 16% 22%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 220 54% 20%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 220 16% 22%;
+  --foreground: 220 14% 96%;
+  --card: 220 16% 26%;
+  --card-foreground: 220 14% 96%;
+  --popover: 220 16% 26%;
+  --popover-foreground: 220 14% 96%;
+  --primary: 220 54% 70%;
+  --primary-foreground: 220 16% 22%;
+  --secondary: 220 16% 28%;
+  --secondary-foreground: 220 14% 96%;
+  --muted: 220 16% 28%;
+  --muted-foreground: 220 14% 80%;
+  --accent: 220 16% 28%;
+  --accent-foreground: 220 14% 96%;
+  --destructive: 0 62% 30%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 16% 28%;
+  --input: 220 16% 28%;
+  --ring: 220 54% 70%;
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+