From 28c3fd5041478f72917d60894d7c358e0ec97b53 Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Sat, 27 Sep 2025 21:26:14 +0100 Subject: [PATCH 1/3] fix: fix hero svg --- components/landing-page/BackedBy.tsx | 126 +++++++++--------- components/landing-page/Banner.tsx | 2 +- components/landing-page/Hero.tsx | 64 +++++++-- .../landing-page/about/AboutUsDifferent.tsx | 28 +++- public/elipse1.svg | 18 +-- public/elipse2.svg | 18 +-- public/elipse3.svg | 18 +-- 7 files changed, 163 insertions(+), 111 deletions(-) diff --git a/components/landing-page/BackedBy.tsx b/components/landing-page/BackedBy.tsx index daef4dfc3..c47fd9304 100644 --- a/components/landing-page/BackedBy.tsx +++ b/components/landing-page/BackedBy.tsx @@ -101,7 +101,7 @@ const BackedBy = () => { }; useGSAP( - (context, contextSafe) => { + () => { if ( !containerRef.current || !column1Ref.current || @@ -110,82 +110,82 @@ const BackedBy = () => { ) return; - const container = containerRef.current; + // const container = containerRef.current; - const createSeamlessScrollAnimation = ( - element: HTMLElement, - direction: 'up' | 'down' = 'up' - ) => { - const children = Array.from(element.children); - const totalHeight = children.reduce((acc, child) => { - const rect = child.getBoundingClientRect(); - return acc + rect.height + 24; - }, 0); + // const createSeamlessScrollAnimation = ( + // element: HTMLElement, + // direction: 'up' | 'down' = 'up' + // ) => { + // const children = Array.from(element.children); + // const totalHeight = children.reduce((acc, child) => { + // const rect = child.getBoundingClientRect(); + // return acc + rect.height + 24; + // }, 0); - const wrapper = document.createElement('div'); - wrapper.style.position = 'relative'; + // const wrapper = document.createElement('div'); + // wrapper.style.position = 'relative'; - children.forEach(child => { - wrapper.appendChild(child); - }); + // children.forEach(child => { + // wrapper.appendChild(child); + // }); - const clone = wrapper.cloneNode(true) as HTMLElement; - wrapper.appendChild(clone); + // const clone = wrapper.cloneNode(true) as HTMLElement; + // wrapper.appendChild(clone); - element.innerHTML = ''; - element.appendChild(wrapper); + // element.innerHTML = ''; + // element.appendChild(wrapper); - const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; + // const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; - gsap.set(wrapper, { - y: 0, - force3D: true, - willChange: 'transform', - }); + // gsap.set(wrapper, { + // y: 0, + // force3D: true, + // willChange: 'transform', + // }); - const animation = gsap.to(wrapper, { - y: scrollDistance, - duration: 30, - ease: 'none', - repeat: -1, - force3D: true, - transformOrigin: 'center center', - immediateRender: false, - lazy: false, - }); + // const animation = gsap.to(wrapper, { + // y: scrollDistance, + // duration: 30, + // ease: 'none', + // repeat: -1, + // force3D: true, + // transformOrigin: 'center center', + // immediateRender: false, + // lazy: false, + // }); - return animation; - }; + // return animation; + // }; - const animations = [ - createSeamlessScrollAnimation(column1Ref.current, 'up'), - createSeamlessScrollAnimation(column2Ref.current, 'down'), - createSeamlessScrollAnimation(column3Ref.current, 'up'), - ]; + // const animations = [ + // createSeamlessScrollAnimation(column1Ref.current, 'up'), + // createSeamlessScrollAnimation(column2Ref.current, 'down'), + // createSeamlessScrollAnimation(column3Ref.current, 'up'), + // ]; - const handleMouseEnter = - contextSafe?.(() => { - animations.forEach(anim => anim.pause()); - }) || - (() => { - animations.forEach(anim => anim.pause()); - }); + // const handleMouseEnter = + // contextSafe?.(() => { + // animations.forEach(anim => anim.pause()); + // }) || + // (() => { + // animations.forEach(anim => anim.pause()); + // }); - const handleMouseLeave = - contextSafe?.(() => { - animations.forEach(anim => anim.resume()); - }) || - (() => { - animations.forEach(anim => anim.resume()); - }); + // const handleMouseLeave = + // contextSafe?.(() => { + // animations.forEach(anim => anim.resume()); + // }) || + // (() => { + // animations.forEach(anim => anim.resume()); + // }); - container.addEventListener('mouseenter', handleMouseEnter); - container.addEventListener('mouseleave', handleMouseLeave); + // container.addEventListener('mouseenter', handleMouseEnter); + // container.addEventListener('mouseleave', handleMouseLeave); - return () => { - container.removeEventListener('mouseenter', handleMouseEnter); - container.removeEventListener('mouseleave', handleMouseLeave); - }; + // return () => { + // container.removeEventListener('mouseenter', handleMouseEnter); + // container.removeEventListener('mouseleave', handleMouseLeave); + // }; }, { scope: containerRef, diff --git a/components/landing-page/Banner.tsx b/components/landing-page/Banner.tsx index 2e757b517..61506a13a 100644 --- a/components/landing-page/Banner.tsx +++ b/components/landing-page/Banner.tsx @@ -4,7 +4,7 @@ import Link from 'next/link'; const CleanBanner = () => { return ( -
+
diff --git a/components/landing-page/Hero.tsx b/components/landing-page/Hero.tsx index ee58554ff..0d6aefcc4 100644 --- a/components/landing-page/Hero.tsx +++ b/components/landing-page/Hero.tsx @@ -41,16 +41,31 @@ export default function Hero({ className = '' }: HeroProps) { const setupAnimations = useCallback(() => { if (!heroRef.current) return; - const ellipseImg = heroRef.current.querySelector('.ellipse-image'); + const ellipseImg = heroRef.current.querySelectorAll('.ellipse-image'); const sphereImg = heroRef.current.querySelector('.sphere-image'); if (ellipseImg) { - gsap.to(ellipseImg, { - ...animationConfig.ellipse, - willChange: 'transform', - force3D: true, - immediateRender: false, - lazy: true, + ellipseImg.forEach((img, i) => { + // Common scale animation + gsap.to(img, { + ...animationConfig.ellipse, + willChange: 'transform', + force3D: true, + immediateRender: false, + lazy: true, + }); + + // Rotation animation per ellipse + const direction = i === 0 || i === 1 ? 2 : -1; + gsap.to(img, { + rotation: direction * 360, + ease: 'none', + duration: 60, + repeat: -1, + transformOrigin: '50% 50%', + force3D: true, + willChange: 'transform', + }); }); } @@ -75,7 +90,29 @@ export default function Hero({ className = '' }: HeroProps) { }, { scope: heroRef, dependencies: [setupAnimations] } ); - + const ellipses = [ + { + src: '/elipse1.svg', + width: 'w-[50%]', + z: 'z-10', + opacity: '', + sizes: '50vw', + }, + { + src: '/elipse2.svg', + width: 'w-[65%]', + z: 'z-10', + opacity: '', + sizes: '90vw', + }, + { + src: '/elipse3.svg', + width: 'w-[80%]', + z: 'z-10', + opacity: '', + sizes: '100vw', + }, + ]; return (
*/} - {[1, 2, 3].map(elipse => ( + {ellipses.map((ellipse, i) => ( ))} -
(
+ +
-
+ +

- + + - - - + + + - - - - + + + + diff --git a/public/elipse2.svg b/public/elipse2.svg index 7f0326214..f737d99af 100644 --- a/public/elipse2.svg +++ b/public/elipse2.svg @@ -1,14 +1,14 @@ - - + + - - - + + + - - - - + + + + diff --git a/public/elipse3.svg b/public/elipse3.svg index c7939e4a2..2ddc42f5c 100644 --- a/public/elipse3.svg +++ b/public/elipse3.svg @@ -1,14 +1,14 @@ - - + + - - - + + + - - - - + + + + From a1521a5136e3380d977bb1ebc9447cc5f3641966 Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Tue, 30 Sep 2025 16:29:48 +0100 Subject: [PATCH 2/3] fix: revert backed by component --- components/landing-page/BackedBy.tsx | 126 +++++++++++++-------------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/components/landing-page/BackedBy.tsx b/components/landing-page/BackedBy.tsx index c47fd9304..daef4dfc3 100644 --- a/components/landing-page/BackedBy.tsx +++ b/components/landing-page/BackedBy.tsx @@ -101,7 +101,7 @@ const BackedBy = () => { }; useGSAP( - () => { + (context, contextSafe) => { if ( !containerRef.current || !column1Ref.current || @@ -110,82 +110,82 @@ const BackedBy = () => { ) return; - // const container = containerRef.current; + const container = containerRef.current; - // const createSeamlessScrollAnimation = ( - // element: HTMLElement, - // direction: 'up' | 'down' = 'up' - // ) => { - // const children = Array.from(element.children); - // const totalHeight = children.reduce((acc, child) => { - // const rect = child.getBoundingClientRect(); - // return acc + rect.height + 24; - // }, 0); + const createSeamlessScrollAnimation = ( + element: HTMLElement, + direction: 'up' | 'down' = 'up' + ) => { + const children = Array.from(element.children); + const totalHeight = children.reduce((acc, child) => { + const rect = child.getBoundingClientRect(); + return acc + rect.height + 24; + }, 0); - // const wrapper = document.createElement('div'); - // wrapper.style.position = 'relative'; + const wrapper = document.createElement('div'); + wrapper.style.position = 'relative'; - // children.forEach(child => { - // wrapper.appendChild(child); - // }); + children.forEach(child => { + wrapper.appendChild(child); + }); - // const clone = wrapper.cloneNode(true) as HTMLElement; - // wrapper.appendChild(clone); + const clone = wrapper.cloneNode(true) as HTMLElement; + wrapper.appendChild(clone); - // element.innerHTML = ''; - // element.appendChild(wrapper); + element.innerHTML = ''; + element.appendChild(wrapper); - // const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; + const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; - // gsap.set(wrapper, { - // y: 0, - // force3D: true, - // willChange: 'transform', - // }); + gsap.set(wrapper, { + y: 0, + force3D: true, + willChange: 'transform', + }); - // const animation = gsap.to(wrapper, { - // y: scrollDistance, - // duration: 30, - // ease: 'none', - // repeat: -1, - // force3D: true, - // transformOrigin: 'center center', - // immediateRender: false, - // lazy: false, - // }); + const animation = gsap.to(wrapper, { + y: scrollDistance, + duration: 30, + ease: 'none', + repeat: -1, + force3D: true, + transformOrigin: 'center center', + immediateRender: false, + lazy: false, + }); - // return animation; - // }; + return animation; + }; - // const animations = [ - // createSeamlessScrollAnimation(column1Ref.current, 'up'), - // createSeamlessScrollAnimation(column2Ref.current, 'down'), - // createSeamlessScrollAnimation(column3Ref.current, 'up'), - // ]; + const animations = [ + createSeamlessScrollAnimation(column1Ref.current, 'up'), + createSeamlessScrollAnimation(column2Ref.current, 'down'), + createSeamlessScrollAnimation(column3Ref.current, 'up'), + ]; - // const handleMouseEnter = - // contextSafe?.(() => { - // animations.forEach(anim => anim.pause()); - // }) || - // (() => { - // animations.forEach(anim => anim.pause()); - // }); + const handleMouseEnter = + contextSafe?.(() => { + animations.forEach(anim => anim.pause()); + }) || + (() => { + animations.forEach(anim => anim.pause()); + }); - // const handleMouseLeave = - // contextSafe?.(() => { - // animations.forEach(anim => anim.resume()); - // }) || - // (() => { - // animations.forEach(anim => anim.resume()); - // }); + const handleMouseLeave = + contextSafe?.(() => { + animations.forEach(anim => anim.resume()); + }) || + (() => { + animations.forEach(anim => anim.resume()); + }); - // container.addEventListener('mouseenter', handleMouseEnter); - // container.addEventListener('mouseleave', handleMouseLeave); + container.addEventListener('mouseenter', handleMouseEnter); + container.addEventListener('mouseleave', handleMouseLeave); - // return () => { - // container.removeEventListener('mouseenter', handleMouseEnter); - // container.removeEventListener('mouseleave', handleMouseLeave); - // }; + return () => { + container.removeEventListener('mouseenter', handleMouseEnter); + container.removeEventListener('mouseleave', handleMouseLeave); + }; }, { scope: containerRef, From b862d17ad7d174b4e2b8288e6e7dda73ac85a1a7 Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Tue, 7 Oct 2025 01:05:40 +0100 Subject: [PATCH 3/3] fix: modify md editor --- components/auth/SignupForm.tsx | 4 +- .../project/CreateProjectModal/Details.tsx | 2 +- .../CreateProjectModal/md-editor-custom.css | 99 ++++++++++++------- 3 files changed, 68 insertions(+), 37 deletions(-) diff --git a/components/auth/SignupForm.tsx b/components/auth/SignupForm.tsx index c6a845856..5bcc088b8 100644 --- a/components/auth/SignupForm.tsx +++ b/components/auth/SignupForm.tsx @@ -106,10 +106,10 @@ const SignupForm = ({ onLoadingChange }: SignupFormProps) => { // }); // } } - } catch { + } catch (error) { form.setError('root', { type: 'manual', - message: 'Failed to create account. Please try again.', + message: `Failed to create account. Please try again. ${error instanceof Error ? error.message : String(error)}`, }); } }; diff --git a/components/landing-page/project/CreateProjectModal/Details.tsx b/components/landing-page/project/CreateProjectModal/Details.tsx index 21792cedb..f09efa829 100644 --- a/components/landing-page/project/CreateProjectModal/Details.tsx +++ b/components/landing-page/project/CreateProjectModal/Details.tsx @@ -5,7 +5,7 @@ import { Label } from '@/components/ui/label'; import { cn } from '@/lib/utils'; import { z } from 'zod'; import MDEditor from '@uiw/react-md-editor'; -// import './md-editor-custom.css'; +import './md-editor-custom.css'; interface DetailsProps { onDataChange?: (data: DetailsFormData) => void; diff --git a/components/landing-page/project/CreateProjectModal/md-editor-custom.css b/components/landing-page/project/CreateProjectModal/md-editor-custom.css index 54acbd0eb..cb0aef649 100644 --- a/components/landing-page/project/CreateProjectModal/md-editor-custom.css +++ b/components/landing-page/project/CreateProjectModal/md-editor-custom.css @@ -1,4 +1,3 @@ -/* Custom styles for MDEditor to match the current UI theme */ .w-md-editor { background-color: #1a1a1a !important; border: none !important; @@ -7,17 +6,25 @@ .w-md-editor-toolbar { background-color: #1a1a1a !important; border-bottom: 1px solid #484848 !important; - padding: 8px 12px !important; + padding: 15px 12px !important; } .w-md-editor-toolbar button { color: #b5b5b5 !important; background-color: transparent !important; border: none !important; - padding: 8px !important; + padding: 10px !important; margin: 2px !important; border-radius: 4px !important; transition: all 0.2s ease !important; + font-size: 15px !important; + min-width: 26px !important; + min-height: 26px !important; +} + +.w-md-editor-toolbar button svg { + width: 10px !important; + height: 10px !important; } .w-md-editor-toolbar button:hover { @@ -30,21 +37,22 @@ color: #000000 !important; } +/* Removed vertical demarcators/dividers */ .w-md-editor-toolbar .w-md-editor-divider { - background-color: #484848 !important; - margin: 4px 8px !important; + display: none !important; } .w-md-editor-text-pre, .w-md-editor-text-input { - background-color: #101010 !important; color: #ffffff !important; + background: #101010 !important; font-size: 14px !important; line-height: 1.5 !important; } -.w-md-editor-text-pre { - color: #b5b5b5 !important; +/* Removed conflicting color override for text-pre */ +.w-md-editor-text-pre > * { + color: #ffffff !important; } .w-md-editor-text-input::placeholder { @@ -123,32 +131,6 @@ gap: 4px; } -.w-md-editor-toolbar .w-md-editor-toolbar-group:not(:last-child)::after { - content: ''; - width: 1px; - height: 20px; - background-color: #484848; - margin: 0 8px; -} - -/* Hide specific toolbar items if needed */ -/* Uncomment the lines below to hide specific toolbar buttons */ - -/* Hide fullscreen button */ -/* .w-md-editor-toolbar button[data-name="fullscreen"] { - display: none !important; -} */ - -/* Hide help button */ -/* .w-md-editor-toolbar button[data-name="help"] { - display: none !important; -} */ - -/* Hide preview toggle */ -/* .w-md-editor-toolbar button[data-name="preview"] { - display: none !important; -} */ - /* Custom button styling for specific commands */ .w-md-editor-toolbar button[data-name='bold'] { font-weight: bold !important; @@ -161,3 +143,52 @@ .w-md-editor-toolbar button[data-name='strikethrough'] { text-decoration: line-through !important; } + +.w-md-editor-text { + height: 100vh !important; + background-color: #101010 !important; +} + +.wmde-markdown-color { + color: #ffffff !important; +} + +.w-md-editor-text-input, +.w-md-editor-text-input textarea { + color: #ffffff !important; + caret-color: #ffffff !important; + background-color: transparent !important; +} + +.w-md-editor-area textarea, +.w-md-editor-input textarea, +textarea.w-md-editor-text-input { + color: #ffffff !important; + background-color: transparent !important; +} + +/* Override any inherited black text color */ +.w-md-editor-text * { + color: inherit !important; +} + +.w-md-editor-text, +.w-md-editor-area, +.w-md-editor-input { + color: #ffffff !important; +} + +.w-md-editor-content { + border: 1px solid transparent !important; + transition: border-color 0.2s ease !important; +} + +.w-md-editor-content:has(.w-md-editor-text:focus-within) { + border-color: #a7f950 !important; +} + +.w-md-editor-toolbar button[data-name='help'], +.w-md-editor-toolbar button[data-name='quote'], +.w-md-editor-toolbar button[data-name='hr'] { + display: none !important; +}