diff --git a/dist/index.html b/dist/index.html index 75af31c..eab1b4e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,8 +13,8 @@ content="PictoPy - Advanced desktop gallery application powered by Tauri, React, and Rust" /> PictoPy - - + +
diff --git a/package-lock.json b/package-lock.json index a4a057d..58df27c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "PictoPy", - "version": "0.0.0", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "PictoPy", - "version": "0.0.0", + "version": "1.0.0", "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", diff --git a/src/Pages/Landing page/Home1.tsx b/src/Pages/Landing page/Home1.tsx index a605326..d172305 100644 --- a/src/Pages/Landing page/Home1.tsx +++ b/src/Pages/Landing page/Home1.tsx @@ -1,8 +1,8 @@ import { motion } from "framer-motion"; import { useEffect, useRef, useState } from "react"; +import { useOS } from "../../hooks/useOS"; const ShuffleHero = () => { - // Function to scroll to downloads section const scrollToDownloads = () => { const downloadsSection = document.getElementById('downloads-section'); if (downloadsSection) { @@ -13,6 +13,23 @@ const ShuffleHero = () => { } }; + const os = useOS(); + + const getButtonContent = () => { + switch (os) { + case "mac": + return { text: "Download for Mac", href: "#mac-download-placeholder" }; + case "windows": + return { text: "Download for Windows", href: "#windows-download-placeholder" }; + case "linux": + return { text: "Download for Linux (.deb)", href: "#linux-download-placeholder" }; + default: + return { text: "Download", href: undefined }; + } + }; + + const btnContent = getButtonContent(); + return (
@@ -43,33 +60,63 @@ const ShuffleHero = () => { Advanced desktop gallery application powered by Tauri, React, and Rust with a Python backend for intelligent image analysis and seamless management. -
- {/* Download button - scrolls to downloads section */} - - Download - - - {/* View Docs button - links to documentation */} - +
+ {/* Dynamic Download button */} + {os === "unknown" ? ( + + {btnContent.text} + + ) : ( + + {btnContent.text} + + )} + + {/* View Docs button - links to documentation */} + + View Docs + +
+ + { + e.preventDefault(); + scrollToDownloads(); + }} + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + transition={{ duration: 0.5, delay: 0.8 }} + className="text-xs md:text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors underline underline-offset-2" > - View Docs + Looking for another OS?
diff --git a/src/Pages/Landing page/Navbar.tsx b/src/Pages/Landing page/Navbar.tsx index 42a11cd..ec5a2c7 100644 --- a/src/Pages/Landing page/Navbar.tsx +++ b/src/Pages/Landing page/Navbar.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; -import { Menu, X } from "lucide-react"; +import { Menu, X, Github } from "lucide-react"; import { Button } from "@/components/ui/button"; import YourLogo from "@/assets/38881995.png"; // Update this import path to your logo @@ -146,6 +146,19 @@ const Navbar: React.FC = () => {
Home + {/* GitHub Repository Link */} + + + + {/* Dark Mode Toggle Button */}