Skip to content

PictoPy Landing Page improvements #724 #769

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

Closed
ritigya03 wants to merge 4 commits into from
Closed

PictoPy Landing Page improvements #724 #769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
786ec3d
Step count progress bar overflow fixed
ritigya03 Dec 13, 2025
103c245
Fix non-functional back button in onboarding flow
ritigya03 Dec 13, 2025
5c14420
Fix onboarding step display and index safety
ritigya03 Dec 13, 2025
adb2a36
landing page tasks done
ritigya03 Dec 13, 2025
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
10 changes: 7 additions & 3 deletions docs/backend/backend_python/openapi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1117,9 +1117,14 @@
"in": "query",
"required": false,
"schema": {
"$ref": "#/components/schemas/InputType",
"allOf": [
{
"$ref": "#/components/schemas/InputType"
}
],
"description": "Choose input type: 'path' or 'base64'",
"default": "path"
"default": "path",
"title": "Input Type"
},
"description": "Choose input type: 'path' or 'base64'"
}
Expand Down Expand Up @@ -2199,7 +2204,6 @@
"metadata": {
"anyOf": [
{
"additionalProperties": true,
"type": "object"
},
{
Expand Down
14 changes: 0 additions & 14 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 4 additions & 15 deletions frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import {
setAvatar,
Expand Down Expand Up @@ -33,12 +33,6 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
const [name, setLocalName] = useState('');
const [selectedAvatar, setLocalAvatar] = useState('');

useEffect(() => {
if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
dispatch(markCompleted(stepIndex));
}
}, []);

const handleAvatarSelect = (avatar: string) => {
setLocalAvatar(avatar);
};
Expand All @@ -55,24 +49,20 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
dispatch(markCompleted(stepIndex));
};

if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
return null;
}

return (
<>
<Card className="flex max-h-full w-1/2 flex-col gap-3 border p-4">
<CardHeader className="p-3">
<div className="text-muted-foreground mb-1 flex justify-between text-xs">
<span>
Step {stepIndex + 1} of {totalSteps}
Step {stepIndex} of {totalSteps}
</span>
<span>{Math.round(((stepIndex + 1) / totalSteps) * 100)}%</span>
<span>{Math.round((stepIndex / totalSteps) * 100)}%</span>
</div>
<div className="bg-muted mb-2 h-1.5 w-full rounded-full">
<div
className="bg-primary h-full rounded-full transition-all duration-300"
style={{ width: `${((stepIndex + 1) / totalSteps) * 100}%` }}
style={{ width: `${(stepIndex / totalSteps) * 100}%` }}
/>
</div>
<CardTitle className="mt-1 text-xl font-semibold">
Expand All @@ -97,7 +87,6 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
/>
</div>

{/* Avatar Grid */}
<div className="mb-5">
<Label className="mb-2 block text-sm">Choose Your Avatar</Label>
<div className="grid grid-cols-4 gap-3">
Expand Down
16 changes: 4 additions & 12 deletions frontend/src/components/OnboardingSteps/FolderSetupStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { AppDispatch } from '@/app/store';
import { markCompleted, previousStep } from '@/features/onboardingSlice';
import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
import { useFolder } from '@/hooks/useFolder';
import { useEffect, useState } from 'react';
import { useState } from 'react';

interface FolderSetupStepProps {
stepIndex: number;
Expand All @@ -30,12 +30,6 @@ export function FolderSetupStep({
// Local state for folders
const [folder, setFolder] = useState<string>('');

useEffect(() => {
if (localStorage.getItem('folderChosen') === 'true') {
dispatch(markCompleted(stepIndex));
}
}, []);

const { pickSingleFolder, addFolderMutate } = useFolder({
title: 'Select folder to import photos from',
});
Expand All @@ -61,18 +55,15 @@ export function FolderSetupStep({
dispatch(previousStep());
};

if (localStorage.getItem('folderChosen') === 'true') {
return null;
}
const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
const progressPercent = Math.round((stepIndex / totalSteps) * 100);

return (
<>
<Card className="flex max-h-full w-1/2 flex-col border p-4">
<CardHeader className="p-3">
<div className="text-muted-foreground mb-1 flex justify-between text-xs">
<span>
Step {stepIndex + 1} of {totalSteps}
Step {stepIndex} of {totalSteps}
</span>
<span>{progressPercent}%</span>
</div>
Expand All @@ -90,6 +81,7 @@ export function FolderSetupStep({
Choose the folder you want to import your photos from
</CardDescription>
</CardHeader>

<CardContent className="flex-1 space-y-6 overflow-y-auto p-1 px-2">
{!folder && (
<div
Expand Down
11 changes: 8 additions & 3 deletions frontend/src/components/OnboardingSteps/OnboardingStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ServerCheck } from './ServerCheck';

interface OnboardingStepProps {
stepIndex: number;
stepName: string;
stepName: string;
}

const VISIBLE_STEPS = [
Expand All @@ -21,15 +21,20 @@ const VISIBLE_STEPS = [

export const OnboardingStep: React.FC<OnboardingStepProps> = ({
stepIndex,
stepName,
stepName, // still accepted, but not trusted
}) => {
const sharedProps = {
stepIndex,
totalSteps: VISIBLE_STEPS.length,
};

// FIX: derive stepName from stepIndex (single source of truth)
const safeIndex = Math.min(stepIndex, VISIBLE_STEPS.length - 1);
const currentStepName = VISIBLE_STEPS[safeIndex];


const renderStepComponent = () => {
switch (stepName) {
switch (currentStepName) {
case STEPS.AVATAR_SELECTION_STEP:
return <AvatarSelectionStep {...sharedProps} />;
case STEPS.FOLDER_SETUP_STEP:
Expand Down
23 changes: 12 additions & 11 deletions frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useEffect } from 'react';
import React from 'react';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/app/store';
import { markCompleted, previousStep } from '@/features/onboardingSlice';

import { useNavigate } from 'react-router';
import { ROUTES } from '@/constants/routes';

import { Button } from '@/components/ui/button';
import {
Card,
Expand All @@ -18,6 +21,7 @@ import { Sun, Moon, Monitor } from 'lucide-react';

import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures';
import { useTheme } from '@/contexts/ThemeContext';

interface ThemeSelectionStepProps {
stepIndex: number;
totalSteps: number;
Expand All @@ -29,36 +33,31 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
}) => {
const { setTheme, theme } = useTheme();
const dispatch = useDispatch<AppDispatch>();
const navigate = useNavigate();

useEffect(() => {
if (localStorage.getItem('themeChosen')) {
dispatch(markCompleted(stepIndex));
}
}, []);
const handleThemeChange = (value: 'light' | 'dark' | 'system') => {
setTheme(value);
};

const handleNext = () => {
localStorage.setItem('themeChosen', 'true');
dispatch(markCompleted(stepIndex));
navigate(ROUTES.HOME); // Easier routing to home page
};

const handleBack = () => {
dispatch(previousStep());
};
if (localStorage.getItem('themeChosen')) {
return null;
}

const progressPercent = Math.round(((stepIndex + 1) / totalSteps) * 100);
const progressPercent = Math.round((stepIndex / totalSteps) * 100);

return (
<>
<Card className="flex max-h-full w-1/2 flex-col border p-4">
<CardHeader className="p-3">
<div className="text-muted-foreground mb-1 flex justify-between text-xs">
<span>
Step {stepIndex + 1} of {totalSteps}
Step {stepIndex} of {totalSteps}
</span>
<span>{progressPercent}%</span>
</div>
Expand All @@ -76,6 +75,7 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
Choose your preferred appearance
</CardDescription>
</CardHeader>

<CardContent className="flex-1 space-y-6 overflow-y-auto p-1 px-2">
<RadioGroup
value={theme}
Expand Down Expand Up @@ -133,6 +133,7 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
</Button>
</CardFooter>
</Card>

<AppFeatures />
</>
);
Expand Down
4 changes: 2 additions & 2 deletions landing-page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/src/assets/PictoPy_Logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>PictoPy | Smart Photo Manager</title>
</head>
<body class="light">
<div id="root"></div>
Expand Down
28 changes: 21 additions & 7 deletions landing-page/src/Pages/Landing page/Home1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,45 @@ const ShuffleHero = () => {
</motion.p>

<div className="flex space-x-4">
<motion.button
<motion.button
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
onClick={() => {
const downloadSection = document.getElementById("download-id");
if (downloadSection) {
downloadSection.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}}
className="bg-gradient-to-r from-yellow-500 to-green-500 text-white font-medium py-2 px-6 rounded transition-all shadow-sm hover:shadow-md"
>
Download
</motion.button>


{/* Update this button to navigate to the GitHub link */}
<motion.a
href="https://github.com/AOSSIE-Org/PictoPy"
target="_blank"
rel="noopener noreferrer"
<motion.button
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500"
onClick={() =>
window.open("https://aossie-org.github.io/PictoPy/", "_blank")
}
className="border border-slate-300 dark:border-slate-600
text-slate-700 dark:text-slate-200
font-medium py-2 px-6 rounded
transition-all hover:border-teal-500 hover:text-teal-500"
>
View Docs
</motion.a>
</motion.button>

</div>
</div>
<ShuffleGrid />
Expand Down
Loading