Skip to content
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.

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

Fix: Feedback Landing page #104

Merged
merged 7 commits into from
Jan 31, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 3 additions & 1 deletion components/home/headerBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ const HeaderBanner: FunctionComponent = () => {
return (
<img
alt="Header banner"
src="/visuals/home/headerBanner.webp"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you add a new headerImage.webp file, then delete the headerBanner.webp file as it's not used anymore

src="/visuals/home/headerImage.webp"
className={styles.headerBanner}
width={700}
height={700}
/>
);
};
Expand Down
76 changes: 41 additions & 35 deletions components/home/homePartners.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,75 +5,81 @@ import RealmsIcon from "../icons/realms";
import NostraIcon from "../icons/nostra";
import EveraiIcon from "../icons/everai";
import AvnuIcon from "../icons/avnu";
import { CDNImg } from "../cdn/image";
import EkuboIcon from "../icons/ekubo";
import MySwapIcon from "../icons/myswap";
import Image from "next/image";

const partners = [
{
name: "Avnu",
href: "https://www.avnu.fi/",
icon: <AvnuIcon width="60" color="black" />,
icon: <AvnuIcon width="140" color="black" />,
},
{
name: "Argent",
href: "https://www.argent.xyz/",
icon: (
<CDNImg
className="w-12 h-12 object-contain mb-1"
<Image
src="/visuals/partners/argent-logo-colour.svg"
alt="Argent"
width={128}
height={128}
/>
),
},
{
name: "Starkscan",
href: "https://starkscan.co/",
icon: (
<CDNImg
className="w-12 h-12 object-contain mb-1"
<Image
src="/visuals/partners/starkscan.png"
alt="Starkscan"
width={192}
height={192}
/>
),
},
{
name: "Braavos",
href: "https://braavos.app/",
icon: (
<CDNImg
className="w-12 h-12 object-contain mb-1"
<Image
src="/visuals/partners/braavos.svg"
alt="Braavos"
width={80}
height={80}
/>
),
},
{
name: "Everai",
href: "https://www.everai.xyz/",
icon: <EveraiIcon width="60" color="black" />,
icon: <EveraiIcon width="100" color="black" />,
},
{
name: "Ekubo",
href: "https://ekubo.org/",
icon: <EkuboIcon height="40" />,
icon: <EkuboIcon height="60" />,
},
{
name: "Briq",
href: "https://briq.construction/",
icon: <BriqIcon />,
icon: <BriqIcon width="100" />,
},
{
name: "MySwap",
href: "https://www.myswap.xyz/",
icon: <MySwapIcon height="40" />,
icon: <MySwapIcon height="60" />,
},
{
name: "Carbonable",
href: "https://carbonable.io/",
icon: <CarbonableIcon />,
icon: <CarbonableIcon width="120" />,
},
{
name: "Nostra",
href: "https://www.nostra.finance",
icon: <NostraIcon height="30px" />,
icon: <NostraIcon height="50px" />,
},
{
name: "Realms",
Expand All @@ -84,48 +90,48 @@ const partners = [
name: "Voyager",
href: "https://voyager.online/",
icon: (
<CDNImg
className="w-12 h-12 object-contain mb-1"
<Image
src="/visuals/partners/voyager.png"
alt="Voyager"
width={80}
height={80}
/>
),
},
];

const HomePartners: FunctionComponent = () => {
return (
<div className="relative sm:py-12 flex items-center flex-wrap sm:flex-nowrap mb-12">
<div className="relative py-16 flex items-center flex-col sm:flex-row mb-6">
{/* Description */}
<div className="sm:mr-8 w-full sm:w-fit">
<p className="font-poppins w-full sm:w-[220px] text-sm font-medium leading-5 sm:text-left text-[14px] text-gray-500 text-center">
<p className="font-poppins w-full sm:w-[240px] text-base font-medium leading-6 sm:text-left text-gray-500 text-center">
Integrated by the whole Starknet ecosystem
</p>
</div>

{/* Slider Container */}
<div className="relative w-full overflow-hidden">
{/* Left Blur */}
<div className="absolute left-0 top-0 bottom-0 w-7 bg-gradient-to-r from-background to-transparent pointer-events-none z-10"></div>
<div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-background to-transparent pointer-events-none z-10"></div>
{/* Right Blur */}
<div className="absolute right-0 top-0 bottom-0 w-7 bg-gradient-to-l from-background to-transparent pointer-events-none z-10"></div>

{/* Scrolling Content */}
<div className="flex gap-10 whitespace-nowrap animate-marquee w-fit">
{[...partners, ...partners, ...partners, ...partners].map(
(partner, index) => (
<a
key={index}
className="flex flex-col items-center text-center"
target="_blank"
rel="noreferrer"
href={partner.href}
>
<div className="flex justify-center items-center w-16 h-16">
{partner.icon}
</div>
</a>
)
)}
<div className="flex gap-16 whitespace-nowrap animate-marquee w-fit">
{[...partners, ...partners].map((partner, index) => (
<a
key={index}
className="flex flex-col items-center text-center"
target="_blank"
rel="noreferrer"
href={partner.href}
>
<div className="flex justify-center items-center w-32 h-32">
{partner.icon}
</div>
</a>
))}
</div>
</div>
</div>
Expand Down
24 changes: 9 additions & 15 deletions components/home/homeSection2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import HomeCard from "./homeCard";
import CategoryTitle from "../UI/titles/categoryTitle";
import { Parallax } from "react-scroll-parallax";
import HomePartners from "./homePartners";
import Image from "next/image";
import useLottie from "../../hooks/useLottie";


const HomeSection2 = () => {
const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
const leftLeafRef = useRef<HTMLDivElement>(null)
const rightLeafRef = useRef<HTMLDivElement>(null)

const createObserver = useCallback(() => {
return new IntersectionObserver(
Expand Down Expand Up @@ -40,6 +43,9 @@ const HomeSection2 = () => {
};
}, [createObserver]);

useLottie(leftLeafRef, "/animations/Falling.leaf.json")
useLottie(rightLeafRef, "/animations/Falling.leaf.json")

const cardsData = [
{
img: "/visuals/home/visualEverai1.webp",
Expand Down Expand Up @@ -70,24 +76,12 @@ const HomeSection2 = () => {
return (
<div id="info" className={styles.section2}>
<Parallax speed={-5}>
<Image
src="/leaves/lilLeaf01.svg"
alt="leaf"
width={54}
height={53}
className="hidden md:block"
/>
<div ref={leftLeafRef} className="hidden md:block absolute top-80 -left-20 w-[25rem] h-[25rem]" />
</Parallax>
<HomePartners />
<CategoryTitle title="Forge Your Unique StarkNet Identity" />
<Parallax speed={-10}>
<Image
src="/leaves/lilLeaf02.svg"
alt="leaf"
className="absolute right-3 hidden md:block"
width={54}
height={53}
/>
<div ref={rightLeafRef} className="absolute -right-20 top-[25rem] hidden md:block w-[25rem] h-[25rem]" />
</Parallax>
<div className={`${styles.subsection} mt-8`}>
{cardsData.map((card, index) => (
Expand Down
32 changes: 32 additions & 0 deletions hooks/useLottie.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useEffect, type RefObject } from "react";


const useLottie = (containerRef: RefObject<HTMLElement>, animationPath: string, loop : boolean = true) => {
useEffect(() => {
let anim: any

const loadAnimation = async () => {
const lottie = (await import("lottie-web")).default
if (containerRef.current) {
anim = lottie.loadAnimation({
container: containerRef.current,
renderer: "svg",
loop: loop,
autoplay: true,
path: animationPath,
})
}
}

loadAnimation()

return () => {
if (anim) {
anim.destroy()
}
}
}, [containerRef, animationPath])
}

export default useLottie

18 changes: 18 additions & 0 deletions package-lock.json

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

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@mui/material": "^5.11.4",
"@nimiq/style": "^0.8.4",
"bn.js": "^5.2.1",
"lottie-react": "^2.4.1",
"next": "^14.2.5",
"next-sitemap": "^4.0.5",
"prettier": "^2.8.1",
Expand Down
1 change: 1 addition & 0 deletions public/animations/Falling.leaf.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"5.6.6","fr":60,"ip":0,"op":280,"w":1080,"h":1920,"nm":"aMain_FallingLeaf","ddd":1,"assets":[],"layers":[{"ddd":1,"ind":2,"ty":3,"nm":"Null 9","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"rx":{"a":0,"k":0,"ix":8},"ry":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":260,"s":[-1796]}],"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[540,144,0],"to":[0,61.911,0],"ti":[0,-121.765,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":40,"s":[600,427.085,0],"to":[0,85.203,0],"ti":[3.094,-101.909,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[475.026,710.347,0],"to":[-2.767,91.131,0],"ti":[-2.937,-96.633,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":120,"s":[675.897,993.848,0],"to":[2.903,95.529,0],"ti":[10.863,-93.697,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":160,"s":[581.943,1279.479,0],"to":[-8.399,72.442,0],"ti":[5.451,-67.549,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":190,"s":[693.316,1490.294,0],"to":[-6.214,76.995,0],"ti":[24.76,-66.033,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":220,"s":[729.116,1706.062,0],"to":[-44.779,119.419,0],"ti":[0,-61.037,0]},{"t":260,"s":[540,1984,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":280,"st":0,"bm":0},{"ddd":1,"ind":3,"ty":4,"nm":"Tree - Group 18","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-21,"ix":9},"rz":{"a":0,"k":-43,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":0,"k":[-56.736,4.939,0],"ix":2},"a":{"a":0,"k":[-171.736,-3915.062,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":1,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[70.716,-31.031],[0,0]],"o":[[0,0],[0,0]],"v":[[-188.103,-3876.906],[-158.34,-3953.217]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.349019616842,0.647058844566,0.270588248968,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-31.031,-70.716],[0,0]],"o":[[0,0],[0,0]],"v":[[-188.103,-3876.906],[-158.34,-3953.217]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.486274510622,0.247058823705,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 17","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":280,"st":0,"bm":0},{"ddd":1,"ind":4,"ty":4,"nm":"Tree - Group 17","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":0,"ix":8},"ry":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":279,"s":[1420]}],"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":120,"s":[0,0,0],"to":[0,0,0],"ti":[188,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":121,"s":[185,188,0],"to":[0,0,0],"ti":[188,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":159,"s":[185,188,0],"to":[0,0,0],"ti":[32,0,0]},{"t":160,"s":[13,32,0]}],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.427,"y":0.597},"o":{"x":0.476,"y":0.807},"t":0,"s":[525.264,-95.061,0],"to":[-1.066,48.256,0],"ti":[-1.122,-155.608,0]},{"i":{"x":0.46,"y":0.469},"o":{"x":0.465,"y":0.316},"t":40,"s":[661.61,225.568,0],"to":[0.684,94.884,0],"ti":[6.074,-117.041,0]},{"i":{"x":0.492,"y":0.823},"o":{"x":0.563,"y":0.566},"t":80,"s":[504.786,546.819,0],"to":[-5.317,102.469,0],"ti":[-0.506,-109.783,0]},{"i":{"x":0.503,"y":0.651},"o":{"x":0.53,"y":0.166},"t":120,"s":[638.133,867.455,0],"to":[0.494,107.208,0],"ti":[-3.803,-105.891,0]},{"i":{"x":0.536,"y":0.526},"o":{"x":0.498,"y":0.319},"t":160,"s":[490,1188.883,0],"to":[4.82,134.208,0],"ti":[-8.736,-101.833,0]},{"i":{"x":0.421,"y":0.73},"o":{"x":0.484,"y":0.53},"t":200,"s":[689.181,1494.116,0],"to":[17.91,208.773,0],"ti":[-0.877,-91.398,0]},{"t":260,"s":[545.264,1988.939,0]}],"ix":2},"a":{"a":0,"k":[-171.736,-3915.062,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":1,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[70.716,-31.031],[0,0]],"o":[[0,0],[0,0]],"v":[[-188.103,-3876.906],[-158.34,-3953.217]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.349019616842,0.647058844566,0.270588248968,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-31.031,-70.716],[0,0]],"o":[[0,0],[0,0]],"v":[[-188.103,-3876.906],[-158.34,-3953.217]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.486274510622,0.247058823705,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 17","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":280,"st":0,"bm":0}],"markers":[]}
Binary file removed public/visuals/home/headerBanner.webp
Binary file not shown.
Binary file added public/visuals/home/headerImage.webp
Binary file not shown.
14 changes: 8 additions & 6 deletions styles/Home.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

.section1 {
padding: 8rem 5rem 1rem 5rem;
padding: 2rem 5rem 1rem 5rem;
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -20,9 +20,10 @@
}

.headerBanner {
width: 400px;
max-width: 680px;
max-height: calc(100vh - 8rem);
width: 700px;
height: 700px;
max-width: 100%;
object-fit: contain;
min-width: 358px;
}

Expand Down Expand Up @@ -345,8 +346,7 @@ div:has(> .lilLeaf04) {
}

.section1 {
padding: 7rem 1rem 1rem;
margin-bottom: 2rem;
padding: 4rem 1rem 0.5rem;
min-height: fit-content;
flex-direction: column;
}
Expand Down Expand Up @@ -398,6 +398,8 @@ div:has(> .lilLeaf04) {

.headerBanner {
display: block;
height: auto;
max-height: 400px;
margin-top: 2rem;
margin-bottom: 1rem;
width: min(70%, 300px);
Expand Down