amank55 Changed the download Section Home section and the navbar#491
amank55 Changed the download Section Home section and the navbar#491amank55 wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
- Created package.json with necessary dependencies for the web UI, including libraries for React, Tailwind CSS, and Three.js. - Added styles.css to implement custom scrollbar styles for better UI experience.
WalkthroughIntroduces a new React + TypeScript + Vite frontend under web-ui/frontend with Tailwind, ESLint, and Shadcn setup. Adds app bootstrap, routing shell, theme context, multiple landing/FAQ/demo UI pages, reusable UI primitives, utilities, and global styles. Includes project/package configs, build tsconfigs, and .gitignore entries. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant main.tsx
participant App
participant ThemeProvider
participant Router
participant Navbar
participant HomePage
User->>Browser: Load / (index.html)
Browser->>main.tsx: Execute module
main.tsx->>App: render(<App/>)
App->>ThemeProvider: Initialize context
ThemeProvider-->>App: {theme, toggleTheme}
App->>Router: Mount routes
Router->>Navbar: Render
Router->>HomePage: Render composed sections
Note over ThemeProvider,App: Body "dark" class toggled on theme changes
sequenceDiagram
autonumber
participant Navbar
participant Document
participant Window
participant FAQ
participant ThemeProvider
Navbar->>Document: Force dark classes/data-theme
Navbar->>Window: dispatchEvent('themeChanged')
Note over Document: MutationObserver detects class/data-theme changes
FAQ->>Document: Observe mutations
FAQ-->>FAQ: setDarkMode(true/false)
ThemeProvider-->>Document: Toggles body "dark" on context theme change
Window-->>FAQ: 'themeChanged' event (sync UI state)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 26
🧹 Nitpick comments (47)
web-ui/frontend/.gitignore (1)
1-1: Broaden ignores and use directory form; consider deduping with parent .gitignore.
- Prefer
node_modules/(trailing slash) and add common Vite/React artifacts (dist, coverage, logs, .env* with an allowlisted example).- Since
web-ui/.gitignoreexists and applies to this subpackage, this file is optional; keeping a single source of truth reduces drift.Apply:
-node_modules +node_modules/ +dist/ +coverage/ +.eslintcache +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +.DS_Store +.env* +!.env.exampleweb-ui/.gitignore (1)
1-2: Expand ignore set to cover typical build/test/secrets artifacts for the whole web-ui package.This parent .gitignore cascades to subfolders (including frontend), so it can be your single authoritative list.
Apply:
-node_modules +node_modules/ +dist/ +coverage/ +.eslintcache +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +.DS_Store +.env* +!.env.exampleNote: keep lockfiles (package-lock.json/yarn.lock/pnpm-lock.yaml) committed.
web-ui/frontend/tsconfig.node.json (1)
2-20: Add Node types for Vite/Node config filesWithout Node types,
vite.config.tsmay lackprocess,__dirname, etc. typings."compilerOptions": { "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, + "types": ["node"],web-ui/frontend/tsconfig.app.json (2)
15-16: Add Vite client types for asset/env imports in app codeImproves TS support for
import.meta.env, SVG/asset imports, etc."noEmit": true, - "jsx": "react-jsx", + "jsx": "react-jsx", + "types": ["vite/client"],
23-29: Align path aliases with project usage and root tsconfigAdd
@pages/*here too (and ensure lowercase path) so app sources resolve consistently."baseUrl": ".", "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"], + "@pages/*": ["./src/pages/*"] }web-ui/frontend/src/components/ui/SmoothScroll.tsx (4)
11-16: Only auto-scroll when user is near the bottom; use smooth scroll APIAvoid yanking the viewport if the user scrolled up; also prefer scrollTo with behavior.
- useEffect(() => { - if (scrollAreaRef.current) { - scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight; - } - }, [children]); // Triggered when children change (i.e., new messages) + useEffect(() => { + const el = scrollAreaRef.current; + if (!el) return; + const threshold = 48; // px + const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold; + if (nearBottom) { + el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' }); + } + }, [children]); // scroll only when near bottom
20-24: Apply custom scrollbar utility classLeverage the new .custom-scrollbar so visuals match the rest of the UI.
- className="flex-grow p-6 overflow-auto" + className="flex-grow p-6 overflow-auto custom-scrollbar"
1-1: Update header comment to actual pathFile path in the header comment is inaccurate.
-// src/components/SmoothScroll.tsx +// src/components/ui/SmoothScroll.tsx
23-23: Avoid magic number for maxHeightConsider a prop (e.g., maxHeight) or a responsive Tailwind class instead of a hard-coded 200px.
web-ui/styles.css (2)
1-19: Deduplicate scrollbar styles to a single sourceA similar .custom-scrollbar reportedly exists in frontend/src/App.css. Keep one definition to avoid drift.
2-19: Add dark/HC variants for accessibilityEnsure thumb/track remain legible in dark mode and high-contrast mode.
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; /* Dark thumb, light track */ } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; border: 2px solid #f1f1f1; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; } + +/* Dark mode */ +:root.dark .custom-scrollbar { + scrollbar-color: #aaa #1f2937; +} +:root.dark .custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #aaa; + border-color: #1f2937; +} +:root.dark .custom-scrollbar::-webkit-scrollbar-track { + background: #1f2937; +} + +/* High contrast */ +@media (forced-colors: active) { + .custom-scrollbar { + scrollbar-color: ButtonText ButtonFace; + } + .custom-scrollbar::-webkit-scrollbar-thumb { + border: 1px solid ButtonText; + background-color: ButtonText; + } + .custom-scrollbar::-webkit-scrollbar-track { + background: ButtonFace; + } +}web-ui/frontend/package.json (5)
6-11: Make the TypeScript check explicit and avoid tsc -b unless using project refstsc -b requires "composite": true and project references. If not configured, use a plain noEmit check.
"scripts": { "dev": "vite", - "build": "tsc -b && vite build", + "build": "tsc --noEmit && vite build", "lint": "eslint .", "preview": "vite preview" },
27-27: Prefer react-helmet-async over react-helmetreact-helmet is effectively in maintenance; async variant is recommended for SSR/concurrent features.
- "react-helmet": "^6.1.0", + "react-helmet-async": "^2.0.5",
35-46: Heavy infra toolchain in frontend devDependenciesaws-cdk*, constructs, and Amplify backend CLI will slow installs and enlarge the attack surface. Move to a separate infra workspace or the repo root where needed.
1-11: Declare Node engine to match ESLint 9/Vite 5 requirementsSet a minimum Node version so installs don’t silently break on older Node.
{ "name": "PictoPy", "private": true, "version": "0.0.0", "type": "module", + "engines": { + "node": ">=18.18" + }, "scripts": {
46-47: Trim unused tooling (optional)esbuild and tsx aren’t referenced in scripts; consider removing to reduce maintenance.
Also applies to: 53-56
web-ui/frontend/src/Pages/Footer/Footer.tsx (2)
18-26: Improve link accessibility and destinationAdd an aria-label and hide the icon from screen readers. Also, consider switching from a private channel URL to a public invite (discord.gg/…) so non-members can join.
- <a - href="https://discord.com/channels/1022871757289422898/1311271974630330388" - target="_blank" - rel="noopener noreferrer" + <a + href="https://discord.gg/your-invite-code" + target="_blank" + rel="noopener noreferrer" + aria-label="Join the AOSSIE community on Discord" className="text-sm font-medium text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-green-400 hover:bg-gradient-to-r hover:from-yellow-500 hover:to-green-500 transition duration-300 ease-in-out" > - <FaDiscord className="inline-block mr-2 text-yellow-400 hover:text-green-400 transition duration-300 ease-in-out transform scale-150" /> {/* Scale it to 1.5x */} + <FaDiscord aria-hidden="true" className="inline-block mr-2 text-yellow-400 hover:text-green-400 transition duration-300 ease-in-out transform scale-150" /> <span>Made with love by AOSSIE team</span> </a>
24-24: Remove inline comment in JSXThe scale note is self-evident from the class; drop the comment.
web-ui/frontend/README.md (1)
36-41: Prefer auto-detecting React version in ESLint config snippet.Hardcoding '18.3' will drift. Use 'detect' so the plugin reads the installed version.
export default tseslint.config({ - // Set the react version - settings: { react: { version: '18.3' } }, + // Auto-detect the installed React version + settings: { react: { version: 'detect' } },web-ui/frontend/src/context/theme-provider.tsx (1)
48-56: Toggle the dark class on for broader Tailwind/CSS var compatibility.Applying to body can miss root-scoped variables. Use documentElement.
- const bodyElement = document.body; + const root = document.documentElement; @@ - localStorage.setItem("Theme", String(ThemeOptions.Light)); - bodyElement.classList.remove("dark"); + localStorage.setItem("Theme", String(ThemeOptions.Light)); + root.classList.remove("dark"); @@ - localStorage.setItem("Theme", String(ThemeOptions.Dark)); - bodyElement.classList.add("dark"); + localStorage.setItem("Theme", String(ThemeOptions.Dark)); + root.classList.add("dark");web-ui/frontend/src/Pages/HowItWorks/HowItWorks.tsx (1)
1-1: Animate exit or drop the unused exit prop.Framer Motion’s exit requires AnimatePresence. Either wrap details with it or remove exit.
Option A (enable exit):
-import { motion } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion"; @@ - {/* Expandable Step Details */} - {activeStep === index && ( - <motion.div + {/* Expandable Step Details */} + <AnimatePresence initial={false}> + {activeStep === index && ( + <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.3 }} - className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4" + className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4" + id={`details-${index}`} > <p className="text-sm text-gray-500 dark:text-gray-400"> {step.details} </p> </motion.div> - )} + )} + </AnimatePresence>Option B (simpler: drop exit):
- exit={{ opacity: 0, height: 0 }}Also applies to: 85-97
web-ui/frontend/tailwind.config.js (1)
1-52: Dark mode and CSS vars setup looks solid. One alignment nit.Given ThemeProvider now toggles the class on , no Tailwind change is required, but ensure your CSS variables are declared on :root and overridden under .dark to avoid scope mismatch.
web-ui/frontend/src/components/ui/Bouncy Card Features.tsx (3)
73-81: Prevent overlay from intercepting pointer events (future-proof).Add pointer-events-none so the animated overlay doesn’t block clicks if cards become interactive.
- <div + <div + style={{ pointerEvents: 'none' }} className={`absolute bottom-0 left-4 right-4 top-32 translate-y-8 rounded-t-2xl bg-gradient-to-br ${feature.gradient} p-4 transition-transform duration-[250ms] group-hover:translate-y-4 group-hover:rotate-[2deg]`} >
96-107: Cursor suggests click but no action provided.Either wire an onClick/Link or drop cursor-pointer for accurate affordance.
- className={`group relative min-h-[300px] cursor-pointer + className={`group relative min-h-[300px] overflow-hidden rounded-2xl
12-38: Hoist static features array to module scope.Avoid re-allocating on each render; also enables memoization/testing.
-export const BouncyCardsFeatures = () => { - const features = [ +const FEATURES = [ { /* ... */ } ]; +export const BouncyCardsFeatures = () => { + const features = FEATURES;web-ui/frontend/src/Pages/FaqPage/FAQ.tsx (3)
47-50: Tighten custom event typing and avoid effect churn.Type the CustomEvent wrapper and make the effect depend only on isClient; use a ref for dark state in the interval to avoid re-subscribing.
- const [darkMode, setDarkMode] = useState<boolean>(false); + const [darkMode, setDarkMode] = useState<boolean>(false); + const darkRef = useRef(false); useEffect(() => { if (!isClient) return; - const handleThemeChange = (event: CustomEvent) => { + const handleThemeChange = (event: CustomEvent<{ darkMode: boolean }>) => { setDarkMode(event.detail.darkMode); }; + const onThemeChanged = (e: Event) => handleThemeChange(e as CustomEvent<{ darkMode: boolean }>); const initializeDarkMode = () => { try { // ... setDarkMode(prefersDarkMode); } catch (error) { console.warn("Error loading dark mode in FAQ:", error); setDarkMode(false); } }; // Initialize initializeDarkMode(); // Listen for custom theme change events - window.addEventListener('themeChanged', handleThemeChange as EventListener); + window.addEventListener('themeChanged', onThemeChanged); // Enhanced MutationObserver for better mobile support const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && (mutation.attributeName === 'class' || mutation.attributeName === 'data-theme')) { const isDark = document.documentElement.classList.contains('dark'); setDarkMode(isDark); } }); }); // Additional check for mobile browsers that might not trigger MutationObserver - const intervalCheck = setInterval(() => { - const currentDark = document.documentElement.classList.contains('dark'); - if (currentDark !== darkMode) { - setDarkMode(currentDark); - } - }, 500); + const intervalCheck = setInterval(() => { + const currentDark = document.documentElement.classList.contains('dark'); + if (currentDark !== darkRef.current) { + darkRef.current = currentDark; + setDarkMode(currentDark); + } + }, 500); return () => { - window.removeEventListener('themeChanged', handleThemeChange as EventListener); + window.removeEventListener('themeChanged', onThemeChanged); observer.disconnect(); clearInterval(intervalCheck); }; - }, [isClient, darkMode]); + }, [isClient]);Also applies to: 83-84, 109-113, 114-114
137-147: Use a stable key.Keys based on index can cause UI glitches. Use question.
- <FAQItem - key={index} + <FAQItem + key={faq.question}
176-186: Link button and panel for a11y.Add aria-controls on the button and id on the content container.
- <button + <button className="flex justify-between items-center w-full text-left p-6 group touch-manipulation active:bg-gray-50 dark:active:bg-gray-900 transition-colors duration-150" onClick={onClick} - aria-expanded={isOpen} + aria-expanded={isOpen} + aria-controls={`faq-panel-${index}`} style={{ WebkitTapHighlightColor: 'transparent', WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }} > ... - <motion.div + <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: contentRef.current?.scrollHeight || "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.3, ease: "easeInOut" }} - className="overflow-hidden" + className="overflow-hidden" + id={`faq-panel-${index}`} >Also applies to: 203-216
web-ui/frontend/src/App.css (2)
7-25: Add dark-mode scrollbar styles.Improve contrast in dark mode.
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #000000 #ffffff; /* Black thumb, white track */ } + +.dark .custom-scrollbar { + scrollbar-color: #9ca3af #0b0f19; /* Gray thumb, dark track */ +} /* Webkit browsers (Chrome, Safari) */ .custom-scrollbar::-webkit-scrollbar { width: 8px; /* Adjust width */ } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #000000; /* Black thumb */ border-radius: 10px; border: 2px solid #ffffff; /* White border */ } .custom-scrollbar::-webkit-scrollbar-track { background-color: #ffffff; /* White track */ } + +.dark .custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #9ca3af; + border: 2px solid #0b0f19; +} +.dark .custom-scrollbar::-webkit-scrollbar-track { + background-color: #0b0f19; +}
34-41: Global button/input rules may fight Tailwind/shadcn styles.Prefer Tailwind utility classes or wrap these in @layer components and scope to a class to avoid unintended overrides.
-/* Refined button styling */ -button:hover { +@layer components { +/* Refined button styling (scoped) */ +.ui-base button:hover { transition: background-color 0.3s ease, transform 0.2s ease; -} - -button:active { +} +.ui-base button:active { transform: scale(0.98); -} - -/* Input box styling */ -input:focus { +} +/* Input box styling */ +.ui-base input:focus { outline: none; border-color: #4A90E2; box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); } +}Also applies to: 43-48
web-ui/frontend/src/main.tsx (1)
1-10: Guard root lookup instead of non-null assertion.Safer in non-standard hosts.
- createRoot(document.getElementById('root')!).render( + const rootEl = document.getElementById('root'); + if (!rootEl) throw new Error('Root element #root not found'); + createRoot(rootEl).render(web-ui/frontend/index.html (1)
7-9: Optional: advertise dark mode to UA.Add color-scheme meta for better native form rendering.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="color-scheme" content="light dark" />web-ui/frontend/components.json (1)
20-20: Add a trailing newlineKeeps diffs cleaner across tools/editors.
} -} +} +web-ui/frontend/src/lib/utils.ts (1)
1-6: Prefer spreading args into clsxMinor cleanup; matches upstream shadcn snippet and avoids nesting.
export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(...inputs)) }web-ui/frontend/src/App.tsx (1)
1-60: Align dark-mode target and eventing across the app (ThemeProvider vs FAQ)FAQ observes documentElement.classList and a custom 'themeChanged' event, while ThemeProvider toggles body and no event is dispatched. Standardize on document.documentElement for the 'dark' class and dispatch a 'themeChanged' CustomEvent from ThemeProvider to keep listeners in sync.
web-ui/frontend/src/components/ui/input.tsx (1)
8-22: Solid input wrapper; consider defaulting type to "text"Ensures consistent behavior when
typeis omitted.- type={type} + type={type ?? "text"}web-ui/frontend/src/Pages/Demo/marqu.tsx (1)
43-46: Use stable keys instead of array index.Index keys hurt reconciliation during dynamic re-renders. Use a stable composite key.
- {[...technologies, ...technologies, ...technologies].map((tech, index) => ( + {[...technologies, ...technologies, ...technologies].map((tech, index) => ( <div - key={index} + key={`${tech.text}-${index}`}web-ui/frontend/src/Pages/Landing page/Home1.tsx (3)
69-84: Avoid in-place mutation in shuffle to keep data immutable.Mutating squareData can lead to subtle bugs and harder reasoning. Return a shuffled copy.
-const shuffle = (array: (typeof squareData)[0][]) => { - let currentIndex = array.length, - randomIndex; - - while (currentIndex != 0) { - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex--; - - [array[currentIndex], array[randomIndex]] = [ - array[randomIndex], - array[currentIndex], - ]; - } - - return array; -}; +const shuffle = <T,>(array: T[]): T[] => { + const copy = array.slice(); + let currentIndex = copy.length; + while (currentIndex !== 0) { + const randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + [copy[currentIndex], copy[randomIndex]] = [ + copy[randomIndex], + copy[currentIndex], + ]; + } + return copy; +};
153-168: Minor: compute from a copy, no behavior change.-const generateSquares = () => { - return shuffle(squareData).map((sq) => ( +const generateSquares = () => { + return shuffle([...squareData]).map((sq) => (
171-178: Type the timeout ref precisely to avoid Node/browser TS mismatch.- const timeoutRef = useRef<any>(null); + const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);web-ui/frontend/src/Pages/Landing page/Navbar.tsx (2)
160-169: Move viewport meta management to index.html.Creating meta viewport from a component risks duplication and surprises. Put it in public/index.html.
- useEffect(() => { - const viewport = document.querySelector('meta[name="viewport"]'); - if (!viewport) { - const meta = document.createElement('meta'); - meta.name = 'viewport'; - meta.content = 'width=device-width, initial-scale=1.0, user-scalable=yes'; - document.getElementsByTagName('head')[0].appendChild(meta); - } - }, []); + // Viewport meta is managed in index.html
225-244: Add basic a11y wiring for mobile menu (aria-expanded/controls).Expose state to assistive tech and tie the button to the menu container.
- <button + <button onClick={() => setIsOpen(!isOpen)} className="p-3 rounded-full text-gray-300 hover:text-white bg-black/80 backdrop-blur-sm hover:bg-gray-800 border border-gray-700 shadow-sm hover:shadow-md transition-all duration-300 touch-manipulation active:scale-95" type="button" aria-label="Toggle menu" + aria-expanded={isOpen} + aria-controls="mobile-menu" @@ - <div + <div + id="mobile-menu" className={`md:hidden fixed inset-0 z-50 bg-black transform transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "-translate-x-full"}`}Also applies to: 249-256
web-ui/frontend/src/Pages/pictopy-landing.tsx (2)
29-55: Remove no-op MutationObserver for dark mode.checkDarkMode does nothing; the observer adds cost without benefit.
- // Read dark mode from the HTML element (set by navbar) - useEffect(() => { - const checkDarkMode = () => { - // Theme is controlled globally by Tailwind's dark class on <html> - // No need to set local state, theme is controlled globally - }; - // Initial check - checkDarkMode(); - // Watch for changes to the dark class - const observer = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { - checkDarkMode(); - } - }); - }); - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ['class'] - }); - return () => observer.disconnect(); - }, []); + // Theme is controlled globally by Tailwind's `dark` class on <html>.
61-68: Use smooth scrolling to the main download CTA.- const scrollToMainDownload = () => { + const scrollToMainDownload = () => { const btn = document.getElementById('main-download'); if (btn) { - const targetY = btn.getBoundingClientRect().top + window.scrollY - 180; - window.scrollTo({ top: targetY, behavior: 'auto' }); + const targetY = btn.getBoundingClientRect().top + window.scrollY - 180; + window.scrollTo({ top: targetY, behavior: 'smooth' }); } };web-ui/frontend/src/index.css (1)
76-86: Animate the star field via background-position, not transform.Transforming a fixed, full-viewport layer risks edge gaps/flicker. Animate the tiled background instead.
.starry-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Ccircle%20cx%3D%22100%25%22%20cy%3D%22100%25%22%20r%3D%222%22%20fill%3D%22%23ffffff%22%20opacity%3D%22.4%22%20%2F%3E%3C%2Fsvg%3E') repeat scroll 0% 0%; - animation: stars 200s linear infinite; + animation: stars 200s linear infinite; z-index: -1; } @keyframes stars { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } + from { background-position: 0 0; } + to { background-position: 0 -256px; } /* matches tile size */ }Also applies to: 89-96
web-ui/frontend/src/components/ui/card.tsx (1)
5-5: Tone down informal comments.Comments like “fancy div” are noisy in a shared UI lib. Prefer short, neutral docstrings.
web-ui/frontend/src/components/ui/button.tsx (1)
44-51: Default type to “button” to prevent accidental form submits.In forms, defaults to submit; this often causes unintended navigations.
- const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : "button" return ( <Comp - className={cn(buttonVariants({ variant, size, className }))} + className={cn(buttonVariants({ variant, size, className }))} + {...(!asChild && { type: (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? "button" })} ref={ref} {...props} /> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (14)
web-ui/frontend/dist/PictoPy_Logo.pngis excluded by!**/dist/**,!**/*.pngweb-ui/frontend/dist/assets/38881995-N4pCjCwb.pngis excluded by!**/dist/**,!**/*.pngweb-ui/frontend/dist/assets/index-4LOwtzgi.cssis excluded by!**/dist/**web-ui/frontend/dist/assets/index-CQUCmgbV.jsis excluded by!**/dist/**web-ui/frontend/dist/index.htmlis excluded by!**/dist/**web-ui/frontend/dist/vite.svgis excluded by!**/dist/**,!**/*.svgweb-ui/frontend/package-lock.jsonis excluded by!**/package-lock.jsonweb-ui/frontend/public/Linux-logo.jpgis excluded by!**/*.jpgweb-ui/frontend/public/PictoPy_Logo.pngis excluded by!**/*.pngweb-ui/frontend/public/mac.logo.pngis excluded by!**/*.pngweb-ui/frontend/public/vite.svgis excluded by!**/*.svgweb-ui/frontend/public/windows.pngis excluded by!**/*.pngweb-ui/frontend/src/assets/38881995.pngis excluded by!**/*.pngweb-ui/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (40)
web-ui/.gitignore(1 hunks)web-ui/README.md(1 hunks)web-ui/frontend/.gitignore(1 hunks)web-ui/frontend/README.md(1 hunks)web-ui/frontend/components.json(1 hunks)web-ui/frontend/eslint.config.js(1 hunks)web-ui/frontend/index.html(1 hunks)web-ui/frontend/package.json(1 hunks)web-ui/frontend/postcss.config.js(1 hunks)web-ui/frontend/src/App.css(1 hunks)web-ui/frontend/src/App.tsx(1 hunks)web-ui/frontend/src/Pages/Demo/marqu.tsx(1 hunks)web-ui/frontend/src/Pages/FaqPage/FAQ.tsx(1 hunks)web-ui/frontend/src/Pages/Footer/Footer.tsx(1 hunks)web-ui/frontend/src/Pages/HowItWorks/HowItWorks.tsx(1 hunks)web-ui/frontend/src/Pages/Landing page/Home1.tsx(1 hunks)web-ui/frontend/src/Pages/Landing page/Navbar.tsx(1 hunks)web-ui/frontend/src/Pages/pictopy-landing.tsx(1 hunks)web-ui/frontend/src/components/ui/Bouncy Card Features.tsx(1 hunks)web-ui/frontend/src/components/ui/Features.tsx(1 hunks)web-ui/frontend/src/components/ui/ScrollProgress.tsx(1 hunks)web-ui/frontend/src/components/ui/SmoothScroll.tsx(1 hunks)web-ui/frontend/src/components/ui/button.tsx(1 hunks)web-ui/frontend/src/components/ui/card.tsx(1 hunks)web-ui/frontend/src/components/ui/input.tsx(1 hunks)web-ui/frontend/src/components/ui/label.tsx(1 hunks)web-ui/frontend/src/context/theme-provider.tsx(1 hunks)web-ui/frontend/src/index.css(1 hunks)web-ui/frontend/src/lib/utils.ts(1 hunks)web-ui/frontend/src/main.tsx(1 hunks)web-ui/frontend/src/vite-env.d.ts(1 hunks)web-ui/frontend/tailwind.config.js(1 hunks)web-ui/frontend/tsconfig.app.json(1 hunks)web-ui/frontend/tsconfig.app.tsbuildinfo(1 hunks)web-ui/frontend/tsconfig.json(1 hunks)web-ui/frontend/tsconfig.node.json(1 hunks)web-ui/frontend/tsconfig.node.tsbuildinfo(1 hunks)web-ui/frontend/vite.config.ts(1 hunks)web-ui/package.json(1 hunks)web-ui/styles.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (6)
web-ui/frontend/src/Pages/Landing page/Navbar.tsx (3)
web-ui/frontend/dist/assets/index-CQUCmgbV.js (16)
e(40-40)e(58-58)e(58-58)e(58-58)e(58-58)e(162-162)e(162-162)e(167-167)e(197-197)e(197-197)e(197-197)e(197-197)e(209-209)e(214-214)e(214-214)e(220-220)frontend/src/components/Navigation/Navbar/Navbar.tsx (1)
Navbar(17-139)web-ui/frontend/src/components/ui/button.tsx (1)
Button(57-57)
web-ui/frontend/src/components/ui/label.tsx (1)
web-ui/frontend/src/lib/utils.ts (1)
cn(4-6)
web-ui/frontend/src/components/ui/input.tsx (1)
web-ui/frontend/src/lib/utils.ts (1)
cn(4-6)
web-ui/frontend/src/components/ui/Bouncy Card Features.tsx (1)
web-ui/frontend/src/components/ui/card.tsx (1)
CardTitle(53-53)
web-ui/frontend/src/App.tsx (4)
web-ui/frontend/src/components/ui/Bouncy Card Features.tsx (1)
BouncyCardsFeatures(12-89)web-ui/frontend/src/Pages/FaqPage/FAQ.tsx (1)
FAQ(33-152)web-ui/frontend/src/context/theme-provider.tsx (2)
ThemeContext(19-19)ThemeProvider(44-68)frontend/src/components/Navigation/Navbar/Navbar.tsx (1)
Navbar(17-139)
web-ui/frontend/src/components/ui/button.tsx (1)
web-ui/frontend/src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (17)
web-ui/frontend/src/components/ui/ScrollProgress.tsx (1)
1-1: Remove unused ScrollProgress component
No references toScrollProgresswere found inweb-ui/frontendafter searching (rg -nP "ScrollProgress"). Deleteweb-ui/frontend/src/components/ui/ScrollProgress.tsxif it’s not needed, or implement and integrate it where intended.web-ui/frontend/src/vite-env.d.ts (1)
1-1: LGTM — brings in Vite client typesCorrect placement and content.
web-ui/frontend/postcss.config.js (1)
1-6: No changes needed for ESM syntax in postcss.config.js
package.json declares"type": "module", soexport defaultis valid.web-ui/package.json (1)
1-14: Clarify package boundary in monorepo structure
Repository contains bothweb-ui/package.json(only deps) andweb-ui/frontend/package.json. This risks duplicate installs and tooling confusion—pick one of:
- Option A: convert
web-ui/package.jsoninto a workspace root ("name": "web-ui","private": true,"workspaces": ["frontend"]) and move all dependencies intoweb-ui/frontend/package.json.- Option B: delete
web-ui/package.jsonand consolidate into the singlepackage.jsonunderweb-ui/frontend/.web-ui/frontend/vite.config.ts (1)
11-11: Alias '@pages' matches the actual ‘src/Pages’ directory case—no cross-OS import issues detected.web-ui/frontend/package.json (1)
12-33: No Vite config detected underweb-ui/frontend/vite.config.*. Please verify that your Vite setup’s config file (e.g.vite.config.tsorvite.config.js) resides inweb-ui/frontend/and includes matching alias entries for"@/*": ["src/*"]and"@pages/*": ["src/Pages/*"]. If it’s located elsewhere or named differently, update the paths or aliases accordingly before approving.web-ui/frontend/src/Pages/Footer/Footer.tsx (1)
6-34: Footer structure looks goodSemantic footer, responsive layout, external-link hygiene (noopener) all LGTM.
web-ui/frontend/src/main.tsx (1)
1-10: Bootstrap looks solid.StrictMode + single import path is clean.
web-ui/frontend/index.html (1)
6-6: Favicon path/PictoPy_Logo.pngcorrectly served in Vite build
PictoPy_Logo.png is present underweb-ui/frontend/publicand is included in thedistoutput, so the/PictoPy_Logo.pnghref will resolve.web-ui/frontend/components.json (1)
1-20: Shadcn config looks goodAliases, Tailwind hooks, and schema align with typical shadcn/ui setup.
web-ui/frontend/src/lib/utils.ts (1)
1-1: clsx v2+ installed confirmed web-ui/frontend/package.json declares"clsx": "^2.1.1", so named import support is safe.web-ui/frontend/src/App.tsx (1)
5-5: Import path './Pages/Demo/marqu' is correct The file marqu.tsx exists at web-ui/frontend/src/Pages/Demo and exports a default React component; no changes required.web-ui/frontend/src/components/ui/input.tsx (1)
1-26: LGTMForwardRef usage, props typing, and cn merge align with the project pattern.
web-ui/frontend/src/components/ui/label.tsx (1)
7-22: LGTMRadix wrapper with CVA + cn is clean and idiomatic.
web-ui/frontend/src/Pages/Landing page/Navbar.tsx (1)
261-266: Verify presence of section IDs for smooth-scroll links
No elements withid="features"orid="about"were found in the Landing page—ensure those section IDs exist or update the links accordingly.web-ui/frontend/src/Pages/pictopy-landing.tsx (1)
10-16: All logo asset paths verified
PictoPy_Logo.png, mac.logo.png, windows.png, and Linux-logo.jpg are all present under web-ui/frontend/public.web-ui/frontend/src/components/ui/button.tsx (1)
7-35: Variants look solid.Good coverage of variant/size combos with sensible defaults; aligns with Tailwind tokens.
| import js from '@eslint/js' | ||
| import globals from 'globals' | ||
| import reactHooks from 'eslint-plugin-react-hooks' | ||
| import reactRefresh from 'eslint-plugin-react-refresh' | ||
| import tseslint from 'typescript-eslint' | ||
|
|
||
| export default tseslint.config( | ||
| { ignores: ['dist'] }, | ||
| { | ||
| extends: [js.configs.recommended, ...tseslint.configs.recommended], | ||
| files: ['**/*.{ts,tsx}'], | ||
| languageOptions: { | ||
| ecmaVersion: 2020, | ||
| globals: globals.browser, | ||
| }, | ||
| plugins: { | ||
| 'react-hooks': reactHooks, | ||
| 'react-refresh': reactRefresh, | ||
| }, | ||
| rules: { | ||
| ...reactHooks.configs.recommended.rules, | ||
| 'react-refresh/only-export-components': [ | ||
| 'warn', | ||
| { allowConstantExport: true }, | ||
| ], | ||
| }, | ||
| }, | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enable React plugin and type-aware rules to catch more issues.
Add eslint-plugin-react with auto version detection and switch to TypeScript type-checked presets with project-aware parserOptions.
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
export default tseslint.config(
- { ignores: ['dist'] },
+ { ignores: ['dist', 'node_modules'] },
{
- extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ extends: [
+ js.configs.recommended,
+ ...tseslint.configs.recommendedTypeChecked,
+ // Optional: stricter typing
+ // ...tseslint.configs.strictTypeChecked,
+ ],
files: ['**/*.{ts,tsx}'],
languageOptions: {
- ecmaVersion: 2020,
+ ecmaVersion: 'latest',
globals: globals.browser,
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json', './tsconfig.json'],
+ tsconfigRootDir: import.meta.dirname,
+ ecmaFeatures: { jsx: true },
+ },
},
+ settings: { react: { version: 'detect' } },
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
+ 'react': react,
},
rules: {
...reactHooks.configs.recommended.rules,
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import js from '@eslint/js' | |
| import globals from 'globals' | |
| import reactHooks from 'eslint-plugin-react-hooks' | |
| import reactRefresh from 'eslint-plugin-react-refresh' | |
| import tseslint from 'typescript-eslint' | |
| export default tseslint.config( | |
| { ignores: ['dist'] }, | |
| { | |
| extends: [js.configs.recommended, ...tseslint.configs.recommended], | |
| files: ['**/*.{ts,tsx}'], | |
| languageOptions: { | |
| ecmaVersion: 2020, | |
| globals: globals.browser, | |
| }, | |
| plugins: { | |
| 'react-hooks': reactHooks, | |
| 'react-refresh': reactRefresh, | |
| }, | |
| rules: { | |
| ...reactHooks.configs.recommended.rules, | |
| 'react-refresh/only-export-components': [ | |
| 'warn', | |
| { allowConstantExport: true }, | |
| ], | |
| }, | |
| }, | |
| ) | |
| import js from '@eslint/js' | |
| import globals from 'globals' | |
| import reactHooks from 'eslint-plugin-react-hooks' | |
| import reactRefresh from 'eslint-plugin-react-refresh' | |
| import tseslint from 'typescript-eslint' | |
| import react from 'eslint-plugin-react' | |
| export default tseslint.config( | |
| { ignores: ['dist', 'node_modules'] }, | |
| { | |
| extends: [ | |
| js.configs.recommended, | |
| ...tseslint.configs.recommendedTypeChecked, | |
| // Optional: stricter typing | |
| // ...tseslint.configs.strictTypeChecked, | |
| ], | |
| files: ['**/*.{ts,tsx}'], | |
| languageOptions: { | |
| ecmaVersion: 'latest', | |
| globals: globals.browser, | |
| parserOptions: { | |
| project: [ | |
| './tsconfig.node.json', | |
| './tsconfig.app.json', | |
| './tsconfig.json', | |
| ], | |
| tsconfigRootDir: import.meta.dirname, | |
| ecmaFeatures: { jsx: true }, | |
| }, | |
| }, | |
| settings: { | |
| react: { version: 'detect' }, | |
| }, | |
| plugins: { | |
| 'react-hooks': reactHooks, | |
| 'react-refresh': reactRefresh, | |
| react, | |
| }, | |
| rules: { | |
| ...reactHooks.configs.recommended.rules, | |
| ...react.configs.recommended.rules, | |
| ...react.configs['jsx-runtime'].rules, | |
| 'react-refresh/only-export-components': [ | |
| 'warn', | |
| { allowConstantExport: true }, | |
| ], | |
| }, | |
| }, | |
| ) |
🤖 Prompt for AI Agents
In web-ui/frontend/eslint.config.js around lines 1 to 28, the config lacks
eslint-plugin-react and type-aware TypeScript rules; update it to add the
"react" plugin with settings.react.version set to "detect", include
"plugin:react/recommended" in extends, and enable type-checked presets by adding
"plugin:@typescript-eslint/recommended-requiring-type-checking" and using
@typescript-eslint's project-aware parserOptions (set parser to
"@typescript-eslint/parser" and parserOptions.project to your tsconfig path,
e.g., "./tsconfig.json"); also ensure the plugins list includes "react" and keep
react-hooks/react-refresh entries intact so the linter runs with type-aware
React rules.
| "dependencies": { | ||
| "@radix-ui/react-icons": "^1.3.0", | ||
| "@radix-ui/react-label": "^2.1.0", | ||
| "@radix-ui/react-separator": "^1.1.0", | ||
| "@radix-ui/react-slot": "^1.1.1", | ||
| "class-variance-authority": "^0.7.1", | ||
| "clsx": "^2.1.1", | ||
| "constants": "^0.0.2", | ||
| "install": "^0.13.0", | ||
| "lottie": "^0.0.1", | ||
| "lottie-react": "^2.4.1", | ||
| "lucide-react": "^0.446.0", | ||
| "motion": "^12.0.6", | ||
| "react": "^18.3.1", | ||
| "react-dom": "^18.3.1", | ||
| "react-helmet": "^6.1.0", | ||
| "react-icons": "^5.4.0", | ||
| "react-just-parallax": "^3.1.16", | ||
| "react-router-dom": "^6.28.2", | ||
| "tailwind-merge": "^2.6.0", | ||
| "tailwindcss-animate": "^1.0.7" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove likely-unintentional runtime deps (supply-chain/bloat risk)
constants, install, and lottie (0.0.1) are red flags. Keep lottie-react (which pulls lottie-web) and drop these.
"dependencies": {
@@
- "constants": "^0.0.2",
- "install": "^0.13.0",
- "lottie": "^0.0.1",
"lottie-react": "^2.4.1",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "dependencies": { | |
| "@radix-ui/react-icons": "^1.3.0", | |
| "@radix-ui/react-label": "^2.1.0", | |
| "@radix-ui/react-separator": "^1.1.0", | |
| "@radix-ui/react-slot": "^1.1.1", | |
| "class-variance-authority": "^0.7.1", | |
| "clsx": "^2.1.1", | |
| "constants": "^0.0.2", | |
| "install": "^0.13.0", | |
| "lottie": "^0.0.1", | |
| "lottie-react": "^2.4.1", | |
| "lucide-react": "^0.446.0", | |
| "motion": "^12.0.6", | |
| "react": "^18.3.1", | |
| "react-dom": "^18.3.1", | |
| "react-helmet": "^6.1.0", | |
| "react-icons": "^5.4.0", | |
| "react-just-parallax": "^3.1.16", | |
| "react-router-dom": "^6.28.2", | |
| "tailwind-merge": "^2.6.0", | |
| "tailwindcss-animate": "^1.0.7" | |
| }, | |
| "dependencies": { | |
| "@radix-ui/react-icons": "^1.3.0", | |
| "@radix-ui/react-label": "^2.1.0", | |
| "@radix-ui/react-separator": "^1.1.0", | |
| "@radix-ui/react-slot": "^1.1.1", | |
| "class-variance-authority": "^0.7.1", | |
| "clsx": "^2.1.1", | |
| "lottie-react": "^2.4.1", | |
| "lucide-react": "^0.446.0", | |
| "motion": "^12.0.6", | |
| "react": "^18.3.1", | |
| "react-dom": "^18.3.1", | |
| "react-helmet": "^6.1.0", | |
| "react-icons": "^5.4.0", | |
| "react-just-parallax": "^3.1.16", | |
| "react-router-dom": "^6.28.2", | |
| "tailwind-merge": "^2.6.0", | |
| "tailwindcss-animate": "^1.0.7" | |
| }, |
🤖 Prompt for AI Agents
In web-ui/frontend/package.json around lines 12 to 33, the dependencies include
likely-unintentional or unsafe runtime packages ("constants", "install", and
"lottie" v0.0.1) that bloat the supply chain; remove these three entries from
the "dependencies" block and run npm/yarn install to update lockfile; ensure
lottie-react remains (it pulls lottie-web) and confirm no code imports the
removed packages—if any imports exist, replace them with lottie-react or
appropriate stable libs before removing.
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Ensure Tailwind directives aren’t duplicated across CSS files.
If index.css already includes @tailwind base/components/utilities, having them here can conflict. Either import this file instead of index.css or remove these three lines.
Run:
🏁 Script executed:
#!/bin/bash
rg -n "@tailwind base|@tailwind components|@tailwind utilities" web-ui/frontend/src
rg -n "App\\.css" web-ui/frontendLength of output: 424
Remove duplicate Tailwind directives from App.css
Index.css already includes the three @tailwind directives, so delete lines 1–3 in web-ui/frontend/src/App.css to avoid conflicting duplicates.
🤖 Prompt for AI Agents
In web-ui/frontend/src/App.css lines 1 to 3, the file contains duplicate
Tailwind directives that conflict with Index.css; remove the three lines
"@tailwind base;", "@tailwind components;", and "@tailwind utilities;" from
App.css so that Tailwind is only imported once via Index.css, leaving App.css
for component-specific styles.
| import { useContext, useEffect } from "react"; | ||
| import { ThemeProvider, ThemeContext, ThemeOptions } from "./context/theme-provider"; | ||
| import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; | ||
| import Navbar from "./Pages/Landing page/Navbar"; |
There was a problem hiding this comment.
Navbar import is broken (wrong path and default vs named export)
Navbar is exported as a named function in components/Navigation. Fix the path and switch to named import.
-import Navbar from "./Pages/Landing page/Navbar";
+import { Navbar } from "./components/Navigation/Navbar/Navbar";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import Navbar from "./Pages/Landing page/Navbar"; | |
| import { Navbar } from "./components/Navigation/Navbar/Navbar"; |
🤖 Prompt for AI Agents
In web-ui/frontend/src/App.tsx around line 4, the import statement uses the
wrong path and assumes a default export (`import Navbar from "./Pages/Landing
page/Navbar";`) while the Navbar is actually a named export from
components/Navigation; update the import to point to the correct module path
(components/Navigation) and change it to a named import (e.g., import { Navbar }
from '...') so it matches the exported symbol.
| import HowItWorks from "./Pages/HowItWorks/HowItWorks"; | ||
| import Footer from "./Pages/Footer/Footer"; | ||
| import PictopyLanding from "./Pages/pictopy-landing"; | ||
| import BouncyCardsFeatures from "./components/ui/Bouncy Card Features"; |
There was a problem hiding this comment.
BouncyCardsFeatures import mismatch (named export, file name has spaces)
The component is a named export; current default import fails. Also consider renaming the file to remove spaces for cross-platform tooling.
-import BouncyCardsFeatures from "./components/ui/Bouncy Card Features";
+import { BouncyCardsFeatures } from "./components/ui/Bouncy Card Features";Optional: rename file to BouncyCardFeatures.tsx and adjust import accordingly.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import BouncyCardsFeatures from "./components/ui/Bouncy Card Features"; | |
| import { BouncyCardsFeatures } from "./components/ui/Bouncy Card Features"; |
🤖 Prompt for AI Agents
In web-ui/frontend/src/App.tsx around line 13, the import uses a default import
from a filename containing spaces and does not match the component's named
export; change the import to use the named export (e.g., import {
BouncyCardsFeatures } from "...") and update the path to the actual file name
without spaces, or rename the file to a normalized name like
BouncyCardFeatures.tsx and update the import to match that new filename and
named export.
| @@ -0,0 +1 @@ | |||
| {"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/pictopy-landing.tsx","./src/pages/demo/marqu.tsx","./src/pages/faqpage/faq.tsx","./src/pages/footer/footer.tsx","./src/pages/howitworks/howitworks.tsx","./src/pages/landing page/home1.tsx","./src/pages/landing page/navbar.tsx","./src/components/ui/bouncy card features.tsx","./src/components/ui/features.tsx","./src/components/ui/scrollprogress.tsx","./src/components/ui/smoothscroll.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/context/theme-provider.tsx","./src/lib/utils.ts"],"version":"5.7.3"} No newline at end of file | |||
There was a problem hiding this comment.
Do not commit TS build artifacts
.tsbuildinfo should be ignored to avoid churn/merge noise.
Add to the repo’s .gitignore:
+*.tsbuildinfo📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/pictopy-landing.tsx","./src/pages/demo/marqu.tsx","./src/pages/faqpage/faq.tsx","./src/pages/footer/footer.tsx","./src/pages/howitworks/howitworks.tsx","./src/pages/landing page/home1.tsx","./src/pages/landing page/navbar.tsx","./src/components/ui/bouncy card features.tsx","./src/components/ui/features.tsx","./src/components/ui/scrollprogress.tsx","./src/components/ui/smoothscroll.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/context/theme-provider.tsx","./src/lib/utils.ts"],"version":"5.7.3"} | |
| # Ignore TypeScript build info files | |
| *.tsbuildinfo |
🤖 Prompt for AI Agents
In web-ui/frontend/tsconfig.app.tsbuildinfo around lines 1-1, the TypeScript
build artifact (.tsbuildinfo) was committed and should be ignored; update the
repository by adding a rule to the project .gitignore (or creating one in
web-ui/frontend if it’s per-package) to ignore *.tsbuildinfo or specifically
tsconfig*.tsbuildinfo, then remove the already committed file from the index
using git rm --cached web-ui/frontend/tsconfig.app.tsbuildinfo and commit the
change so the artifact is no longer tracked.
💡 Verification agent
🧩 Analysis chain
Spaces and inconsistent casing in paths will cause cross‑platform issues
Entries like src/pages/landing page/... and components/ui/bouncy card features.tsx include spaces; aliasing shows both Pages and pages. This invites import mistakes and case-sensitive FS breakage.
🏁 Script executed:
#!/bin/bash
# List files/dirs with spaces and mixed-case "Pages/pages"
fd -H ' ' -t f -t d
rg -nP 'from\s+[\'"][^\'"]*(Pages|pages)[^\'"]*[\'"]' -g '!**/node_modules/**' -SLength of output: 459
Rename directories/files to remove spaces & unify casing
src/Pages/Landing page/→src/pages/landing-page/src/components/ui/Bouncy Card Features.tsx→src/components/ui/BouncyCardFeatures.tsx
Standardize all directory names to lowercase and eliminate spaces to avoid case-sensitive FS and import errors.
| "@/*": ["src/*"], | ||
| "@pages/*": ["src/Pages/*"] | ||
| } |
There was a problem hiding this comment.
Fix alias case: maps to non-existent 'src/Pages'
Project files live under src/pages/** (lowercase). This alias will fail on case-sensitive systems.
"paths": {
"@/*": ["src/*"],
- "@pages/*": ["src/Pages/*"]
+ "@pages/*": ["src/pages/*"]
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@/*": ["src/*"], | |
| "@pages/*": ["src/Pages/*"] | |
| } | |
| "paths": { | |
| "@/*": ["src/*"], | |
| "@pages/*": ["src/pages/*"] | |
| } |
🤖 Prompt for AI Agents
In web-ui/frontend/tsconfig.json around lines 5 to 7 the path alias "@pages/*"
points to "src/Pages/*" which does not exist on disk (actual folder is
"src/pages"); update the alias to "@pages/*": ["src/pages/*"] so it matches the
real directory name, then run a full TypeScript/IDE restart or rebuild to ensure
imports resolve and fix any broken import paths that used the wrong case.
| @@ -0,0 +1 @@ | |||
| {"root":["./vite.config.ts"],"version":"5.7.3"} No newline at end of file | |||
There was a problem hiding this comment.
Do not commit TypeScript .tsbuildinfo artifacts
This is a compiler cache; committing it causes churn and merge noise. Remove and ignore.
Add to a .gitignore:
+# Ignore TS build info caches
+**/*.tsbuildinfoCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In web-ui/frontend/tsconfig.node.tsbuildinfo around line 1, the committed
TypeScript .tsbuildinfo compiler cache should be removed and ignored; delete the
file from the repo (git rm --cached or remove and commit) and add an ignore rule
such as *.tsbuildinfo or /web-ui/frontend/tsconfig*.tsbuildinfo to the project
.gitignore (or the web-ui/frontend/.gitignore) so the artifact is not tracked
going forward, then commit the updated .gitignore and the removal.
| import { defineConfig } from 'vite'; | ||
| import react from '@vitejs/plugin-react-swc'; | ||
| import path from 'path'; |
There was a problem hiding this comment.
Fix ESM __dirname usage in Vite config
In an ESM project ("type": "module"), __dirname is undefined. Use fileURLToPath/new URL and prefer node: specifiers.
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
-import path from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const rootDir = fileURLToPath(new URL('.', import.meta.url));
// Vite config
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
- '@': path.resolve(__dirname, 'src'), // Maps `@` to `src` folder
- '@pages': path.resolve(__dirname, 'src/Pages'), // Maps `@pages` to `src/Pages` folder
+ '@': path.resolve(rootDir, 'src'), // Maps `@` to `src` folder
+ '@pages': path.resolve(rootDir, 'src/Pages'), // Maps `@pages` to `src/Pages` folder
},
},
});Also applies to: 10-12
🤖 Prompt for AI Agents
In web-ui/frontend/vite.config.ts around lines 1-3 (and also adjust lines
10-12), the config currently assumes CommonJS __dirname which is undefined in
ESM; replace usage by importing node specifiers and deriving dirname via
fileURLToPath(import.meta.url): import from 'node:path' and 'node:url', call
fileURLToPath(new URL(import.meta.url)) to get __filename and use
path.dirname(__filename) for __dirname, then update any path.resolve or
__dirname usages to use that derived value.
|
Hi @amank55, |
|
Hi @amank55, |
2 participants
-Changed the download section and the home section
-Change the theme toggling
Summary by CodeRabbit
New Features
Style
Chores
Documentation