diff --git a/app/components/Connect.tsx b/app/components/Connect.tsx index 194bac1..a8ea61f 100644 --- a/app/components/Connect.tsx +++ b/app/components/Connect.tsx @@ -23,7 +23,7 @@ const Connect = ({ className }: { className?: string }) => { <> - +
{ Connect Wallet

- Please choose a wallet you want to connect to TokenGiver. + Please choose a wallet you want to connect to Token Giver. There are several wallet providers.

-
+
{connectors.map((connector) => { if (!connector.id || !connector.available()) return null; return ( @@ -62,11 +62,11 @@ const Connect = ({ className }: { className?: string }) => { onClick={() => connect({ connector })} className="text-xs md:text-sm" > -
+
{typeof connector.icon === "string" ? ( {`${connector.name} @@ -108,7 +108,7 @@ const Connect = ({ className }: { className?: string }) => { )}
- + {connector.name} diff --git a/app/components/Fundraiser/FeaturedCampaigns.tsx b/app/components/Fundraiser/FeaturedCampaigns.tsx index 67e4b30..d096b73 100644 --- a/app/components/Fundraiser/FeaturedCampaigns.tsx +++ b/app/components/Fundraiser/FeaturedCampaigns.tsx @@ -7,7 +7,7 @@ const featuredCampaigns = [ title: "Clean Water Initiative in Tanzania", description: "Help us build sustainable water wells in rural communities, providing clean drinking water to over 10,000 people.", - image: "/default-image.webp", + image: "/temp-2.jpg", featured: true }, { @@ -15,14 +15,14 @@ const featuredCampaigns = [ title: "Tech Education for Girls", description: "Supporting young women in STEM through coding bootcamps and mentorship programs across Southeast Asia.", - image: "/default-image.webp" + image: "/temp-0.jpg" }, { id: 3, title: "Reforestation Project Amazon", description: "Join our mission to plant 100,000 trees in deforested areas of the Amazon rainforest and support local communities.", - image: "/default-image.webp" + image: "/temp-1.jpg" } ]; diff --git a/app/components/MobileMenu.tsx b/app/components/MobileMenu.tsx index 3c20a41..e56b046 100644 --- a/app/components/MobileMenu.tsx +++ b/app/components/MobileMenu.tsx @@ -29,98 +29,40 @@ const MobileMenu = ({ const { disconnect } = useDisconnect(); const router = useRouter(); - const yRef = useRef(100); - const cRef = useRef(100); useEffect(() => { - let y = yRef.current; - let c = cRef.current; - const links = document.querySelector(".mobile-nav"); - const path = document.querySelector(".path"); - let animationFrameId: number; - - const lerp = (start: number, end: number, t: number) => { - return start * (1 - t) + end * t; - }; - if (isMenuOpen) { - setTimeout(() => { - links?.classList.add("active"); - }, 800); + document.body.style.overflow = "hidden"; } else { - links?.classList.remove("active"); + document.body.style.overflow = "auto"; } - const animate = () => { - if (isMenuOpen) { - y = +lerp(y, 0, 0.065).toFixed(2); - c = +lerp(c, 0, 0.085).toFixed(2); - yRef.current = y; - cRef.current = c; - if (y <= 0.1 && c <= 0.1) { - cancelAnimationFrame(animationFrameId); - return; - } - } else { - y = +lerp(y, 100, 0.065).toFixed(2); - c = +lerp(c, 100, 0.085).toFixed(2); - yRef.current = y; - cRef.current = c; - if (y >= 99.93 && c >= 99.93) { - cancelAnimationFrame(animationFrameId); - return; - } - } - - path?.setAttribute( - "d", - `M 0 ${y} L 0 100 100 100 100 ${y} C 50 ${c}, 50 ${c}, 0 ${y}` - ); - animationFrameId = requestAnimationFrame(animate); - }; - - animationFrameId = requestAnimationFrame(animate); - - return () => cancelAnimationFrame(animationFrameId); }, [isMenuOpen]); return (
{ e.stopPropagation(); - setTimeout(() => { - setIsMenuOpen(false); - document.body.style.overflow = "auto"; - }, 300); + setIsMenuOpen(false); }} className={`fixed left-0 top-0 z-[9999] h-screen w-screen max-[800px]:block ${ isMenuOpen ? "pointer-events-auto" : "pointer-events-none" } hidden`} > - - - - - - + {/* Background overlay */} +
+ + {/* Menu content */}
-
+
{"logo"}
-
diff --git a/app/create/components/StepThree.tsx b/app/create/components/StepThree.tsx index 2b2e6db..efe22f3 100644 --- a/app/create/components/StepThree.tsx +++ b/app/create/components/StepThree.tsx @@ -12,6 +12,7 @@ import { MediumIcon, XIcon } from "@/svgs/social.icons"; +import { useState } from "react"; interface StepThreeProps { disabled: boolean; @@ -74,9 +75,24 @@ const StepThree = ({ errors, onReview }: StepThreeProps) => { + const [selectedSocials, setSelectedSocials] = useState([]); + const [customLinkCount, setCustomLinkCount] = useState(1); + + const handleSocialSelect = (platform: string) => { + setSelectedSocials((prev) => + prev.includes(platform) + ? prev.filter((p) => p !== platform) + : [...prev, platform] + ); + }; + + const handleAddCustomLink = () => { + setCustomLinkCount((prev) => prev + 1); + }; + return (
@@ -200,29 +216,68 @@ const StepThree = ({ Social Links
- {predefinedSocialLinks.map((social) => ( -
- +
+ {predefinedSocialLinks.map((social) => ( + + ))} +
+ +
+ {selectedSocials.map((platform) => { + const social = predefinedSocialLinks.find( + (s) => s.name === platform + ); + if (!social) return null; + + return ( +
+ + {social.icon} + + )( + `socials.${platform}` as keyof StepThreeFields + )} + type="url" + className="w-full rounded-[7px] border border-[#DAE0E6] px-3 py-3 pl-10 placeholder:text-sm focus:ring-1 focus:ring-accent-green" + placeholder={social.placeholder} + disabled={disabled} + /> +
+ ); + })} +
+ +
+
+ +
- ))} - {/* Custom links section */} -
- - {[0, 1, 2].map((index) => ( + {Array.from({ length: customLinkCount }).map((_, index) => (
diff --git a/app/create/components/StepTwo.tsx b/app/create/components/StepTwo.tsx index 3bdd05b..65e2d06 100644 --- a/app/create/components/StepTwo.tsx +++ b/app/create/components/StepTwo.tsx @@ -64,7 +64,7 @@ const StepTwo = ({ return (
@@ -158,7 +158,7 @@ const StepTwo = ({ )}
-
+

Additional Campaign Images