+
+ );
+};
+
+export default CollectFromWebsiteForm;
diff --git a/frontend/src/components/Onboarding.tsx b/frontend/src/components/Onboarding.tsx
new file mode 100644
index 000000000..e2de287b7
--- /dev/null
+++ b/frontend/src/components/Onboarding.tsx
@@ -0,0 +1,392 @@
+'use client';
+
+import { useState } from 'react';
+import Globe from '../assets/globe.svg';
+import Profile from '../assets/profie.png';
+import Logo from '../assets/Logo.svg';
+import L2C1 from '../assets/file_upload.svg';
+import L2C2 from '../assets/website_collect.svg';
+import Back from '../assets/Back.svg';
+import UploadFromDeviceForm from './UploadFromDeviceForm';
+import CollectFromWebsiteForm from './CollectFromWebsiteForm';
+import { useDarkTheme } from '../hooks';
+
+interface LevelIndicatorProps {
+ currentLevel: number;
+ indicatorLevel: number;
+}
+
+const LevelIndicator: React.FC+ Collect from a website +
+ +
+ {/* Custom styled dropdown */}
+
+
+
+ {/* Custom dropdown arrow */}
+
+
+ {/* Name input */}
+
+
+
+
+
+
+
+
+ {/* Link input */}
+
+
+
+
+
+ {/* Fetching status */}
+ {/* Fetching status */}
+
+
+
+ {isFetching ? (
+ <>
+
+ Fetching
+
+
+
+ ) : (
+ <>
+ Fetching
+
+
+
+
+ );
+};
+
+export default function Onboarding() {
+ const [language] = useState
+ 
+ {isTrainingComplete == true ? (
+
+ );
+ }
+
+ switch (level) {
+ case 1:
+ return (
+ <>
+
+
+ ) : (
+ <>
+ {' '}
+ {/* Heading */}
+ + Training Complete ! +
++ Training is in progress... +
+ {/* Subheading */} ++ This may take several minutes +
+ + )} + +
+
+
+ {!isLoading && (
+
+ )}
+ {isLoading && (
+
+ )}
+
+ {/* New Progress Bar */}
+
+
+
+
+
+
+ {/* Keyframes for rotation animation */}
+
+
+
+ {progress}%
+
+
+
+
+
+
+ );
+ case 2:
+ return (
+ + Welcome to DocsGPT +
++ Your technical documentation assistant. +
+
+ {/* Logo */}
+
+
+ {/* Heading */}
+
+ );
+ case 3:
+ return (
+ + Upload from device or from web? +
+ + {/* Subheading */} ++ You can choose how to add your first document to DocsGPT +
+ + {/* Card Container */} +
+ {/* Card 1 */}
+
+
+
+
+ {/* Card 2 */}
+ handleCardSelect(1)}
+ >
+
+
+ 
+
+ + Upload from device +
+
+
+ handleCardSelect(2)}
+ >
+
+
+ 
+
+ + Collect from a website +
+
+
+
+ {/* Heading */}
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ return (
+ + Upload new document +
+ {selectedCard === 1 ? ( +
+
+
+ )}
+ {progress}%
+
+
+ {/* alternate background */}
+ {/*
+
+ */}
+
+
+ );
+}
diff --git a/frontend/src/components/UploadFromDeviceForm.tsx b/frontend/src/components/UploadFromDeviceForm.tsx
new file mode 100644
index 000000000..da08328a1
--- /dev/null
+++ b/frontend/src/components/UploadFromDeviceForm.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+
+interface UploadFromDeviceForm {
+ language: string;
+ level: number;
+ selectedCard: number | null;
+ isLoading: boolean;
+ progress: number;
+ isFinalPage: boolean;
+}
+
+export default function UploadFromDeviceForm() {
+ const [uploadedFiles, setUploadedFiles] = useState
+ {/* Left Section */}
+
+
+ {/* Main content section */}
+
+ {/* Left Section */}
+
+
+ {/* Profile Section */}
+
+
+ {language}
+ 
+
+
+ 
+
+
+ {renderContentForLevel(level)}
+
+ {!isFinalPage && (
+ <>
+
+
+
+
+
+ {[1, 2, 3].map((num) => (
+
+
+ {level === 3 && !isLoading && (
+
+ )}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/a.tsx b/frontend/src/components/a.tsx
new file mode 100644
index 000000000..e2de287b7
--- /dev/null
+++ b/frontend/src/components/a.tsx
@@ -0,0 +1,392 @@
+'use client';
+
+import { useState } from 'react';
+import Globe from '../assets/globe.svg';
+import Profile from '../assets/profie.png';
+import Logo from '../assets/Logo.svg';
+import L2C1 from '../assets/file_upload.svg';
+import L2C2 from '../assets/website_collect.svg';
+import Back from '../assets/Back.svg';
+import UploadFromDeviceForm from './UploadFromDeviceForm';
+import CollectFromWebsiteForm from './CollectFromWebsiteForm';
+import { useDarkTheme } from '../hooks';
+
+interface LevelIndicatorProps {
+ currentLevel: number;
+ indicatorLevel: number;
+}
+
+const LevelIndicator: React.FC+ Upload from device +
+
+ {/* Name Input with better styling */}
+
+
+ {/* Uploaded Files Section */}
+
+
+
+
+
+ {/* File Upload Button */}
+
+
+
+
+ {/* File type information */}
+
+
+ + Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb +
+
+
+
+
+
+ {!isLoading && uploadedFiles.length === 0 ? (
+ + Uploaded Files +
+
+ {isLoading ? (
+ <>
+
+ Fetching
+
+
+
+ ) : (
+ <>
+ Fetching
+
+
+ )}
+
+ None
+ ) : ( +-
+ {uploadedFiles.map((file, index) => (
+
- + {file} + + ))} +
+
+
+ );
+};
+
+export default function Onboarding() {
+ const [language] = useState
+
+ {isTrainingComplete == true ? (
+
+ );
+ }
+
+ switch (level) {
+ case 1:
+ return (
+ <>
+
+
+ ) : (
+ <>
+ {' '}
+ {/* Heading */}
+ + Training Complete ! +
++ Training is in progress... +
+ {/* Subheading */} ++ This may take several minutes +
+ + )} + +
+
+
+ {!isLoading && (
+
+ )}
+ {isLoading && (
+
+ )}
+
+ {/* New Progress Bar */}
+
+
+
+
+
+
+ {/* Keyframes for rotation animation */}
+
+
+
+ {progress}%
+
+
+
+
+
+
+ );
+ case 2:
+ return (
+ + Welcome to DocsGPT +
++ Your technical documentation assistant. +
+
+ {/* Logo */}
+
+
+ {/* Heading */}
+
+ );
+ case 3:
+ return (
+ + Upload from device or from web? +
+ + {/* Subheading */} ++ You can choose how to add your first document to DocsGPT +
+ + {/* Card Container */} +
+ {/* Card 1 */}
+
+
+
+
+ {/* Card 2 */}
+ handleCardSelect(1)}
+ >
+
+
+
+
+ + Upload from device +
+
+
+ handleCardSelect(2)}
+ >
+
+
+
+
+ + Collect from a website +
+
+
+
+ {/* Heading */}
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ return (
+ + Upload new document +
+ {selectedCard === 1 ? ( +
+
+
+ )}
+ {progress}%
+
+
+ {/* alternate background */}
+ {/*
+
+ */}
+
+
+ );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 91f1403dd..c8d292903 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -544,3 +544,22 @@ input:-webkit-autofill:focus {
transform: translateY(0);
}
}
+
+.irregular-circle {
+ clip-path: ellipse(50% 48% at 50% 50%);
+}
+
+
+@keyframes fadeInSlideUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.animate-fadeInSlideUp {
+ animation: fadeInSlideUp 1s forwards;
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 938eaceee..6e33e6739 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -50,6 +50,12 @@ module.exports = {
'philippine-yellow':'#FFC700',
'bright-gray':'#EBEBEB'
},
+ boxShadow: {
+ 'all-sides': '0 4px 8px rgba(0, 0, 0, 0.05), 0 -4px 8px rgba(0, 0, 0, 0.05), 4px 0 8px rgba(0, 0, 0, 0.05), -4px 0 8px rgba(0, 0, 0, 0.05)',
+ 'all-sides-hover': '0 8px 16px rgba(0, 0, 0, 0.09), 0 -8px 16px rgba(0, 0, 0, 0.09), 8px 0 16px rgba(0, 0, 0, 0.09), -8px 0 16px rgba(0, 0, 0, 0.09)',
+ // 'all-sides-dark': '0 8px 16px rgba(255, 255, 255, 0.1), 0 -8px 16px rgba(255, 255, 255, 0.1), 8px 0 16px rgba(255, 255, 255, 0.1), -8px 0 16px rgba(255, 255, 255, 0.1)',
+ // 'all-sides-dark-hover': '0 8px 16px rgba(255, 255, 255, 0.2), 0 -8px 16px rgba(255, 255, 255, 0.2), 8px 0 16px rgba(255, 255, 255, 0.2), -8px 0 16px rgba(255, 255, 255, 0.2)',
+ },
},
},
plugins: [],
+ {/* Left Section */}
+
+
+ {/* Main content section */}
+
+ {/* Left Section */}
+
+
+ {/* Profile Section */}
+
+
+ {language}
+
+
+
+
+
+
+ {renderContentForLevel(level)}
+
+ {!isFinalPage && (
+ <>
+
+
+
+
+
+ {[1, 2, 3].map((num) => (
+
+
+ {level === 3 && !isLoading && (
+
+ )}
+
+
+
+ )}
+