shialoth/collano
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intial setup

Browse Source
This commit is contained in:
shialoth 2025-02-21 18:23:37 +05:30
commit 99a60c5b80
40 changed files with 2394 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
.gitignore vendored Normal file
View File

@ -0,0 +1,41 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

1
README.md Normal file
View File

@ -0,0 +1 @@
# Collano

16
eslint.config.mjs Normal file
View File

@ -0,0 +1,16 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;

7
next.config.ts Normal file
View File

@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

30
package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "collano",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"clsx": "^2.1.1",
"motion": "^12.4.5",
"next": "15.1.7",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^3.0.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.7",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

8
postcss.config.mjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

BIN
public/images/body-bg-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
public/images/body-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 KiB

BIN
public/images/sidebar-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/og-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

130
src/app/(home)/FAQsSection.tsx Normal file
View File

@ -0,0 +1,130 @@
"use client";
import Link from "next/link";
import { useRef, useState } from "react";
interface IFAQ {
question: string;
answer: string;
}
function FAQ({ question, answer }: IFAQ) {
const [isActive, setIsActive] = useState<boolean>(false);
const contentRef = useRef<HTMLDivElement>(null);
return (
<div
onClick={() => setIsActive(!isActive)}
className="py-4 border-b border-white/10 cursor-pointer overflow-hidden"
>
<div className="flex justify-between items-center">
<p
className={`flex items-center gap-2 text-lg ${
isActive ? "text-white" : "text-white/75"
}`}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={`${isActive ? "transform rotate-90" : ""} duration-200`}
>
<path
d="M9 18L15 12L9 6"
stroke="#09C04C"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
{question}
</p>
</div>
<div
ref={contentRef}
className={`${
isActive ? "pt-[10px]" : ""
} duration-300 overflow-hidden`}
style={{
maxHeight: isActive
? `${
contentRef.current?.scrollHeight
? contentRef.current?.scrollHeight + 10
: "0"
}px`
: "0px",
}}
>
<p
dangerouslySetInnerHTML={{
__html: answer,
}}
className="text-white/75"
></p>
</div>
</div>
);
}
export default function FAQsSection() {
const faqs: IFAQ[] = [
{
question: "Do I need ChatGPT plus for a subscription?",
answer:
"No you don't! This subscription is completely different from ChatGPT plus.",
},
{
question: "Do I need my own API key for a subscription?",
answer:
"No you don't! This subscription is completely different from ChatGPT plus.",
},
{
question: "How can I cancel my subscription?",
answer:
"No you don't! This subscription is completely different from ChatGPT plus.",
},
{
question: "How long will it take for support to respond?",
answer:
"No you don't! This subscription is completely different from ChatGPT plus.",
},
{
question: "What should I do if I encounter a problem?",
answer:
"No you don't! This subscription is completely different from ChatGPT plus.",
},
];
return (
<section id="faqs">
<div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
<p className="mb-2 font-mono text-sm font-medium text-[#09C04C]">
FAQs
</p>
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
Frequently Asked Question
</h2>
<p className="mb-4 text-white/75">
Answers to all your most asked questions
</p>
<div className="mb-12 w-full">
{faqs.map((faq, index) => (
<FAQ key={index} {...faq} />
))}
</div>
<p className="text-lg text-center text-white">
Still have questions? <br /> Reach out to{" "}
<Link href={"/"} className="text-[#09C04C]">
support@collano.ai
</Link>
</p>
</div>
</section>
);
}

108
src/app/(home)/FeaturesSection.tsx Normal file
View File

@ -0,0 +1,108 @@
"use client";
import Image from "next/image";
import { JSX } from "react";
import img1 from "@/assets/images/feature-1.svg";
import img2 from "@/assets/images/feature-2.svg";
import img3 from "@/assets/images/feature-3.svg";
import img4 from "@/assets/images/feature-4.svg";
import img5 from "@/assets/images/feature-5.svg";
interface IFeature {
img: JSX.Element;
title: string;
description: string;
}
export default function FeaturesSection() {
const features: IFeature[] = [
{
img: <Image src={img1} alt="" />,
title: "Feature 01",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
{
img: <Image src={img2} alt="" />,
title: "Feature 02",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
{
img: <Image src={img3} alt="" />,
title: "Feature 03",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
{
img: <Image src={img4} alt="" />,
title: "Feature 04",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
{
img: <Image src={img5} alt="" />,
title: "Feature 05",
description:
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
];
return (
<section id="features">
<div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
<p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
Key Features
</p>
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
The Intelligence Layer for BNB Smart Chain
</h2>
<p className="mb-12 text-white/75">
Collano is an advanced, open-source platform that seamlessly
integrates state-of-the-art language <br /> models with BNB Smart
Chain technology. We&apos;ve created an intelligent interface that
understands your <br /> needs and executes complex blockchain
operations with unprecedented ease.
</p>
<div className="grid grid-cols-4 gap-5">
{features.map((feature, index) => {
return (
<div
key={index}
className={`${
index === 4 ? "col-span-4 px-12" : "px-5"
} py-8 border border-white/10 hover:border-[#09C04C] bg-white/10 hover:bg-[#09C04C]/10 rounded-xl flex ${
index !== 4 ? "flex-col" : ""
} items-center gap-5 duration-200`}
>
{feature.img}
<div
className={`flex flex-col ${
index !== 4 ? "items-center" : ""
}`}
>
<h3
className={`mb-2 font-serif text-2xl font-bold text-white`}
>
{feature.title}
</h3>
<p
className={`${
index !== 4 ? "text-center" : ""
} text-white/75`}
>
{feature.description}
</p>
</div>
</div>
);
})}
</div>
</div>
</section>
);
}

65
src/app/(home)/HeroSection.tsx Normal file
View File

@ -0,0 +1,65 @@
"use client";
import { ColourfulText } from "@/components/ui/colourful-text";
import Link from "next/link";
import Image from "next/image";
import img1 from "@/assets/images/hero-section-1.png";
import img2 from "@/assets/images/hero-section-2.png";
import img3 from "@/assets/images/hero-section-3.png";
import img4 from "@/assets/images/hero-section-4.png";
export default function HeroSection() {
return (
<section className="pt-[125px]">
<div className="relative mx-auto container max-w-[1110px] pt-24 px-8">
<div className="flex flex-col items-center gap-5">
<div className="ca-bg w-fit py-1.5 px-6 rounded-lg flex items-center gap-4 font-dm text-lg font-medium text-white duration-200">
CA : 0xdadkaddasdhkjzhkjhdkh2k3hksjhadkjhk23jhajd
</div>
<h1 className="font-serif text-7xl font-bold text-center text-white">
Your Intelligent Copilot <br /> for{" "}
<ColourfulText text="BNB Smart Chain" />
</h1>
<p className="text-xl text-center text-white/75">
Collano is your intelligent companion for the BNB Smart Chain
ecosystem, <br /> revolutionizing how users interact with blockchain
technology through natural <br /> language understanding and
automated assistance.
</p>
<Link
href={"/login"}
className="btn-bg w-fit py-2.5 px-8 rounded-lg flex items-center gap-4 font-dm text-xl font-semibold text-white duration-200"
>
Get Started
</Link>
</div>
<Image
src={img1}
alt=""
className="absolute top-5 -left-20 w-[185px]"
/>
<Image
src={img2}
alt=""
className="absolute -bottom-14 left-0 w-[185px]"
/>
<Image
src={img3}
alt=""
className="absolute top-20 -right-20 w-[185px]"
/>
<Image
src={img4}
alt=""
className="absolute -bottom-14 right-0 w-[155px]"
/>
</div>
</section>
);
}

225
src/app/(home)/RoadmapSection.tsx Normal file
View File

@ -0,0 +1,225 @@
"use client";
import { JSX, useState } from "react";
interface IPhase {
icon: JSX.Element;
title: string;
subTitle: string;
bigTitle: string;
description: JSX.Element;
}
export default function RoadmapSection() {
const [activePhase, setActivePhase] = useState<number>(0);
const phases: IPhase[] = [
{
icon: (
<svg
width="28"
height="29"
viewBox="0 0 28 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.38569 0.911583C8.79165 0.753186 9.22506 0.677099 9.66069 0.687749H18.3392C18.767 0.687749 19.192 0.738749 19.6142 0.911583C20.0378 1.08442 20.3792 1.35075 20.6937 1.66242L26.8378 7.8065C27.1494 8.11958 27.4158 8.46242 27.5886 8.886C27.7629 9.30817 27.8124 9.73317 27.8124 10.161V18.8395C27.8124 19.2829 27.7572 19.7122 27.5815 20.1343C27.4063 20.5334 27.1535 20.8936 26.8378 21.194L20.6937 27.3381C20.3882 27.6586 20.021 27.914 19.6142 28.0889C19.2082 28.2473 18.7748 28.3234 18.3392 28.3127H9.66069C9.21728 28.3127 8.78803 28.2575 8.36586 28.0818C7.9668 27.9067 7.60659 27.6538 7.30619 27.3381L1.16211 21.194C0.841582 20.8885 0.586181 20.5213 0.411278 20.1145C0.252881 19.7085 0.176794 19.2751 0.187444 18.8395V10.161C0.187444 9.71758 0.242694 9.28833 0.418361 8.86617C0.59357 8.46713 0.846391 8.10692 1.16211 7.8065L7.30619 1.66242C7.61928 1.35075 7.96211 1.08442 8.38569 0.911583ZM16.1249 8.83358C16.125 8.63757 16.0709 8.44535 15.9685 8.27819C15.8662 8.11103 15.7195 7.97544 15.5449 7.88644C15.3703 7.79743 15.1744 7.75847 14.979 7.77386C14.7836 7.78926 14.5962 7.85841 14.4377 7.97367L10.5419 10.807C10.3138 10.9727 10.1609 11.2222 10.1168 11.5006C10.0727 11.7791 10.141 12.0636 10.3067 12.2917C10.4724 12.5197 10.7219 12.6726 11.0003 12.7167C11.2788 12.7608 11.5633 12.6925 11.7914 12.5268L14.0014 10.9203V20.1669C14.0014 20.4487 14.1133 20.719 14.3126 20.9182C14.5118 21.1175 14.7821 21.2294 15.0639 21.2294C15.3457 21.2294 15.6159 21.1175 15.8152 20.9182C16.0144 20.719 16.1264 20.4487 16.1264 20.1669L16.1249 8.83358Z"
fill="white"
/>
</svg>
),
title: "Phase 01",
subTitle: "Q1 - 2025",
bigTitle: "Phase 01 - Heading about Phase 01",
description: (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />• Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</>
),
},
{
icon: (
<svg
width="29"
height="29"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.88569 0.911583C9.29165 0.753186 9.72506 0.677099 10.1607 0.687749H18.8392C19.267 0.687749 19.692 0.738749 20.1142 0.911583C20.5378 1.08442 20.8792 1.35075 21.1937 1.66242L27.3378 7.8065C27.6494 8.11958 27.9158 8.46242 28.0886 8.886C28.2629 9.30817 28.3124 9.73317 28.3124 10.161V18.8395C28.3124 19.2829 28.2572 19.7122 28.0815 20.1343C27.9063 20.5334 27.6535 20.8936 27.3378 21.194L21.1937 27.3381C20.8882 27.6586 20.521 27.914 20.1142 28.0889C19.7082 28.2473 19.2748 28.3234 18.8392 28.3127H10.1607C9.71728 28.3127 9.28803 28.2575 8.86586 28.0818C8.4668 27.9067 8.10659 27.6538 7.80619 27.3381L1.66211 21.194C1.34158 20.8885 1.08618 20.5213 0.911278 20.1145C0.752881 19.7085 0.676794 19.2751 0.687444 18.8395V10.161C0.687444 9.71758 0.742694 9.28833 0.918361 8.86617C1.09357 8.46713 1.34639 8.10692 1.66211 7.8065L7.80619 1.66242C8.11928 1.35075 8.46211 1.08442 8.88569 0.911583ZM12.0208 12.1443C12.0208 11.3241 12.314 10.79 12.6909 10.4514C13.0861 10.0958 13.64 9.89608 14.2279 9.89608C14.8144 9.89608 15.3698 10.0944 15.765 10.4514C16.1404 10.79 16.4337 11.3241 16.4337 12.1443C16.4337 13.3655 15.6347 14.6532 14.3229 15.975C13.3425 16.9638 12.2205 17.8351 11.2133 18.6157C10.8931 18.865 10.5829 19.1058 10.2924 19.3382C10.1207 19.4759 9.99608 19.6636 9.93565 19.8753C9.87523 20.0869 9.88203 20.3121 9.95513 20.5198C10.0282 20.7274 10.164 20.9072 10.3437 21.0343C10.5234 21.1614 10.7382 21.2296 10.9583 21.2294H18.0416C18.3234 21.2294 18.5937 21.1175 18.7929 20.9182C18.9922 20.719 19.1041 20.4487 19.1041 20.1669C19.1041 19.8851 18.9922 19.6149 18.7929 19.4156C18.5937 19.2164 18.3234 19.1044 18.0416 19.1044H14.0183C14.6317 18.5987 15.2593 18.049 15.8316 17.471C17.2228 16.0685 18.5587 14.2537 18.5587 12.1443C18.5587 10.756 18.0345 9.63683 17.1859 8.87183C16.3544 8.12383 15.2749 7.77108 14.2279 7.77108C13.1796 7.77108 12.1001 8.12383 11.2685 8.87183C10.4185 9.63683 9.89578 10.756 9.89578 12.1443C9.89578 12.4261 10.0077 12.6964 10.207 12.8956C10.4062 13.0949 10.6765 13.2068 10.9583 13.2068C11.2401 13.2068 11.5103 13.0949 11.7096 12.8956C11.9088 12.6964 12.0208 12.4261 12.0208 12.1443Z"
fill="white"
/>
</svg>
),
title: "Phase 02",
subTitle: "Q2 - 2025",
bigTitle: "Phase 02 - Heading about Phase 02",
description: (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />• Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</>
),
},
{
icon: (
<svg
width="28"
height="29"
viewBox="0 0 28 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.38569 0.911583C8.79165 0.753186 9.22506 0.677099 9.66069 0.687749H18.3392C18.767 0.687749 19.192 0.738749 19.6142 0.911583C20.0378 1.08442 20.3792 1.35075 20.6937 1.66242L26.8378 7.8065C27.1494 8.11958 27.4158 8.46242 27.5886 8.886C27.7629 9.30817 27.8124 9.73317 27.8124 10.161V18.8395C27.8124 19.2829 27.7572 19.7122 27.5815 20.1343C27.4063 20.5334 27.1535 20.8936 26.8378 21.194L20.6937 27.3381C20.3882 27.6586 20.021 27.914 19.6142 28.0889C19.2082 28.2473 18.7748 28.3234 18.3392 28.3127H9.66069C9.21728 28.3127 8.78803 28.2575 8.36586 28.0818C7.9668 27.9067 7.60659 27.6538 7.30619 27.3381L1.16211 21.194C0.841582 20.8885 0.586181 20.5213 0.411278 20.1145C0.252881 19.7085 0.176794 19.2751 0.187444 18.8395V10.161C0.187444 9.71758 0.242694 9.28833 0.418361 8.86617C0.59357 8.46713 0.846391 8.10692 1.16211 7.8065L7.30619 1.66242C7.61928 1.35075 7.96211 1.08442 8.38569 0.911583ZM18.6041 11.6584C18.6041 10.3338 17.9624 9.32092 17.05 8.6735C16.1689 8.04875 15.0554 7.77108 13.9999 7.77108C12.9445 7.77108 11.831 8.04875 10.9499 8.6735C10.0389 9.3195 9.39578 10.3338 9.39578 11.6584C9.39578 11.9402 9.50772 12.2105 9.70698 12.4097C9.90623 12.609 10.1765 12.7209 10.4583 12.7209C10.7401 12.7209 11.0103 12.609 11.2096 12.4097C11.4088 12.2105 11.5208 11.9402 11.5208 11.6584C11.5208 11.1002 11.7644 10.7022 12.1795 10.4061C12.6272 10.0887 13.2845 9.89608 13.9999 9.89608C14.7154 9.89608 15.3727 10.0887 15.8204 10.4061C16.234 10.6993 16.4763 11.0946 16.4791 11.6485C16.4791 11.6542 16.4791 11.6683 16.4763 11.6867C16.472 11.7292 16.4649 11.8001 16.4465 11.8865C16.4007 12.1095 16.3164 12.3229 16.1972 12.5169C15.962 12.8952 15.4294 13.4377 13.9999 13.4377C13.7182 13.4377 13.4479 13.5497 13.2486 13.7489C13.0494 13.9482 12.9374 14.2185 12.9374 14.5002C12.9374 14.782 13.0494 15.0523 13.2486 15.2515C13.4479 15.4508 13.7182 15.5627 13.9999 15.5627C15.4308 15.5627 15.962 16.1053 16.1972 16.4836C16.3583 16.7468 16.4549 17.0444 16.4791 17.352C16.4763 17.9045 16.234 18.3012 15.8204 18.5944C15.3727 18.9117 14.7154 19.1044 13.9999 19.1044C13.2845 19.1044 12.6272 18.9117 12.1795 18.5944C11.7644 18.2983 11.5208 17.9002 11.5208 17.3421C11.5208 17.0603 11.4088 16.79 11.2096 16.5908C11.0103 16.3915 10.7401 16.2796 10.4583 16.2796C10.1765 16.2796 9.90623 16.3915 9.70698 16.5908C9.50772 16.79 9.39578 17.0603 9.39578 17.3421C9.39578 18.6667 10.0389 19.6796 10.9499 20.327C11.831 20.9517 12.9445 21.2294 13.9999 21.2294C15.0554 21.2294 16.1689 20.9517 17.05 20.327C17.9609 19.681 18.6041 18.6667 18.6041 17.3421V17.3392C18.5765 16.6382 18.3687 15.9561 18.0006 15.3587C17.8009 15.0375 17.554 14.7481 17.2682 14.5002C17.5671 14.2396 17.8094 13.9477 18.0006 13.6417C18.3687 13.0444 18.5765 12.3623 18.6041 11.6612V11.6584Z"
fill="white"
/>
</svg>
),
title: "Phase 03",
subTitle: "Q3 - 2025",
bigTitle: "Phase 03 - Heading about Phase 03",
description: (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />• Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</>
),
},
{
icon: (
<svg
width="29"
height="29"
viewBox="0 0 29 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.88575 0.911583C9.29171 0.753186 9.72512 0.677099 10.1608 0.687749H18.8393C19.2671 0.687749 19.6921 0.738749 20.1143 0.911583C20.5378 1.08442 20.8793 1.35075 21.1938 1.66242L27.3378 7.8065C27.6495 8.11958 27.9158 8.46242 28.0887 8.886C28.2629 9.30817 28.3125 9.73317 28.3125 10.161V18.8395C28.3125 19.2829 28.2573 19.7122 28.0816 20.1343C27.9064 20.5334 27.6536 20.8936 27.3378 21.194L21.1938 27.3381C20.8883 27.6586 20.521 27.914 20.1143 28.0889C19.7083 28.2473 19.2749 28.3234 18.8393 28.3127H10.1608C9.71734 28.3127 9.28809 28.2575 8.86592 28.0818C8.46686 27.9067 8.10665 27.6538 7.80625 27.3381L1.66217 21.194C1.34164 20.8885 1.08624 20.5213 0.911339 20.1145C0.752942 19.7085 0.676855 19.2751 0.687505 18.8395V10.161C0.687505 9.71758 0.742755 9.28833 0.918422 8.86617C1.09363 8.46713 1.34645 8.10692 1.66217 7.8065L7.80625 1.66242C8.11934 1.35075 8.46217 1.08442 8.88575 0.911583ZM16.3502 9.11692C16.3896 8.98188 16.4018 8.84036 16.3862 8.70056C16.3705 8.56076 16.3272 8.42546 16.2588 8.30252C16.1904 8.17959 16.0983 8.07145 15.9878 7.9844C15.8773 7.89734 15.7506 7.8331 15.6151 7.7954C15.4795 7.75769 15.3379 7.74728 15.1983 7.76475C15.0587 7.78223 14.924 7.82726 14.8019 7.89722C14.6799 7.96718 14.5729 8.06067 14.4873 8.17229C14.4017 8.2839 14.3391 8.41141 14.3031 8.54742C13.7605 10.4996 12.6598 12.3299 11.6638 13.6956C11.1442 14.4075 10.5836 15.0886 9.98509 15.7356C9.95135 15.7712 9.91735 15.8067 9.88309 15.8418L9.85759 15.8673L9.85192 15.873C9.70343 16.0217 9.60236 16.211 9.56149 16.4172C9.52061 16.6233 9.54177 16.8369 9.62229 17.031C9.7028 17.2251 9.83906 17.3909 10.0138 17.5076C10.1886 17.6242 10.394 17.6864 10.6042 17.6863H14.8542V20.1669C14.8542 20.4487 14.9661 20.719 15.1654 20.9182C15.3646 21.1175 15.6349 21.2294 15.9167 21.2294C16.1985 21.2294 16.4687 21.1175 16.668 20.9182C16.8672 20.719 16.9792 20.4487 16.9792 20.1669V17.6877H17.6875C17.9693 17.6877 18.2395 17.5758 18.4388 17.3766C18.6381 17.1773 18.75 16.907 18.75 16.6252C18.75 16.3435 18.6381 16.0732 18.4388 15.8739C18.2395 15.6747 17.9693 15.5627 17.6875 15.5627H16.9792V14.5002C16.9792 14.2185 16.8672 13.9482 16.668 13.7489C16.4687 13.5497 16.1985 13.4377 15.9167 13.4377C15.6349 13.4377 15.3646 13.5497 15.1654 13.7489C14.9661 13.9482 14.8542 14.2185 14.8542 14.5002V15.5627H12.919C13.0678 15.3715 13.2236 15.1661 13.3808 14.9493C14.4504 13.4831 15.7113 11.4162 16.3502 9.11833"
fill="white"
/>
</svg>
),
title: "Phase 04",
subTitle: "Q4 - 2025",
bigTitle: "Phase 04 - Heading about Phase 04",
description: (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. <br />
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. <br />
• Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. <br />• Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</>
),
},
];
return (
<section id="roadmap">
<div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
<p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
Roadmap
</p>
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
From Hero to SuperHero, we keep building
</h2>
<p className="mb-8 text-white/75">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. <br /> Excepteur sint occaecat
cupidatat non proident.
</p>
<div className="mb-5 grid grid-cols-4 gap-5">
{phases.map((phase, index) => {
return (
<div
key={index}
onClick={() => {
setActivePhase(index);
}}
className={`py-5 px-7 border ${
activePhase === index
? "border-[#09C04C] bg-[#09C04C]/10"
: "border-white/10 bg-white/10"
} rounded-xl flex items-center gap-4 cursor-pointer duration-200`}
>
{phase.icon}
<div>
<p className="font-mono font-medium text-[#09C04C]">
{phase.subTitle}
</p>
<h3 className="font-serif text-2xl font-semibold text-white">
{phase.title}
</h3>
</div>
</div>
);
})}
</div>
<div className="p-8 border border-[#09C04C] bg-[#09C04C]/10 rounded-xl space-y-4">
<h3 className="font-serif text-2xl font-semibold text-white">
{phases[activePhase].bigTitle}
</h3>
<p className="leading-7 text-white/75">
{phases[activePhase].description}
</p>
</div>
</div>
</section>
);
}

62
src/app/(home)/TokenomicsSection.tsx Normal file
View File

@ -0,0 +1,62 @@
import Image from "next/image";
import img1 from "@/assets/images/tokenomics.png";
export default function TokenomicsSection() {
return (
<section id="tokenomics">
<div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
<p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
Tokenomics
</p>
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
Tokenomics clear as transparent glass
</h2>
<p className="mb-8 text-white/75">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla <br /> pariatur. Excepteur sint occaecat
cupidatat non proident.
</p>
<div className="grid grid-cols-[auto_420px] items-center gap-8">
<div className="space-y-3">
<div className="p-8 border border-[#09C04C] bg-[#09C04C]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200">
<p className="font-mono font-medium uppercase text-[#09C04C]">
Supply
</p>
<h3 className="font-serif text-2xl font-semibold text-white">
90% Circulating Supply
</h3>
<p className="text-white/75">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div className="p-8 border border-[#D1CA0D] bg-[#D1CA0D]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200">
<p className="font-mono font-medium uppercase text-[#D1CA0D]">
Allocations
</p>
<h3 className="font-serif text-2xl font-semibold text-white">
10% Dev Allocations
</h3>
<p className="text-white/75">
Team Allocations : 5% (Vested with a linear cliff) <br />{" "}
Strategic Partnerships and Marketing : 5%
</p>
</div>
</div>
<div className="flex">
<Image src={img1} alt="" className="w-full" />
</div>
</div>
</div>
</section>
);
}

30
src/app/(home)/page.tsx Normal file
View File

@ -0,0 +1,30 @@
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import HeroSection from "./HeroSection";
import FeaturesSection from "./FeaturesSection";
import RoadmapSection from "./RoadmapSection";
import TokenomicsSection from "./TokenomicsSection";
import FAQsSection from "./FAQsSection";
export default function Home() {
return (
<main
className="min-h-[100svh]"
style={{
backgroundImage: `url("/images/body-bg-2.png")`,
backgroundSize: "cover",
backgroundPosition: "top",
}}
>
<Navbar />
<HeroSection />
<FeaturesSection />
<RoadmapSection />
<TokenomicsSection />
<FAQsSection />
<Footer />
</main>
);
}

920
src/app/dashboard/home/page.tsx Normal file
View File

@ -0,0 +1,920 @@
"use client";
import { useState } from "react";
import { JSX } from "react";
import Link from "next/link";
import Image from "next/image";
import logoImg from "@/assets/images/brand/logo.svg";
interface IItem {
icon: JSX.Element;
title: string;
}
export default function DashboardHome() {
const [isWalletPopupActive, setIsWalletPopupActive] = useState<boolean>(true);
const items: IItem[] = [
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.2852 19.3647L5.82243 20.7506C4.39103 21.0164 3.67534 21.1493 3.26303 20.737C2.85072 20.3246 2.98362 19.6089 3.24943 18.1774L4.63523 10.7143C4.85745 9.51762 4.96856 8.91925 5.36302 8.5577C5.75749 8.19616 6.47889 8.1256 7.9217 7.98448C9.31227 7.84847 10.6283 7.37177 12 6L18 12.0005C16.6283 13.3723 16.1513 14.6874 16.0151 16.0781C15.8738 17.5211 15.8031 18.2426 15.4416 18.637C15.0801 19.0314 14.4818 19.1425 13.2852 19.3647Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M11 15.2105C10.4405 15.1197 9.92895 14.8763 9.52632 14.4737M9.52632 14.4737C9.12368 14.0711 8.8803 13.5595 8.78947 13M9.52632 14.4737L4 20"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M12 6C12.7123 4.9491 13.6771 3.1812 15.1065 3.01098C16.0822 2.89479 16.8906 3.70312 18.5072 5.31978L18.6802 5.49277C20.2969 7.10944 21.1052 7.91777 20.989 8.8935C20.8188 10.3229 19.0509 11.2877 18 12"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
</svg>
),
title: "Write",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 19L11.1069 10.7479C9.76348 6.91597 9.09177 5 8 5C6.90823 5 6.23652 6.91597 4.89309 10.7479L2 19M4.5 12H11.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21.9692 13.9392V18.4392M21.9692 13.9392C22.0164 13.1161 22.0182 12.4891 21.9194 11.9773C21.6864 10.7709 20.4258 10.0439 19.206 9.89599C18.0385 9.75447 17.1015 10.055 16.1535 11.4363M21.9692 13.9392H19.1256C18.6887 13.9392 18.2481 13.9603 17.8272 14.0773C15.2545 14.7925 15.4431 18.4003 18.0233 18.845C18.3099 18.8944 18.6025 18.9156 18.8927 18.9026C19.5703 18.8724 20.1955 18.545 20.7321 18.1301C21.3605 17.644 21.9692 16.9655 21.9692 15.9392V13.9392Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Grammar",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 5.96552H8.15M8.15 5.96552H10.25M8.15 5.96552V5M12 5.96552H10.25M10.25 5.96552C9.88076 7.28593 9.10754 8.53411 8.225 9.63103M8.225 9.63103C7.4942 10.5394 6.68843 11.344 5.975 12M8.225 9.63103C7.775 9.10345 7.145 8.24984 6.965 7.86364M8.225 9.63103L9.575 11.0345"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.02231 16.9777C7.07674 18.6978 7.26397 19.7529 7.90796 20.5376C8.07418 20.7401 8.25989 20.9258 8.46243 21.092C9.56878 22 11.2125 22 14.5 22C17.7875 22 19.4312 22 20.5376 21.092C20.7401 20.9258 20.9258 20.7401 21.092 20.5376C22 19.4312 22 17.7875 22 14.5C22 11.2125 22 9.56878 21.092 8.46243C20.9258 8.25989 20.7401 8.07418 20.5376 7.90796C19.7563 7.26676 18.707 7.07837 17 7.02303M7.02231 16.9777C5.30217 16.9233 4.24713 16.736 3.46243 16.092C3.25989 15.9258 3.07418 15.7401 2.90796 15.5376C2 14.4312 2 12.7875 2 9.5C2 6.21252 2 4.56878 2.90796 3.46243C3.07418 3.25989 3.25989 3.07418 3.46243 2.90796C4.56878 2 6.21252 2 9.5 2C12.7875 2 14.4312 2 15.5376 2.90796C15.7401 3.07418 15.9258 3.25989 16.092 3.46243C16.736 4.24713 16.9233 5.30217 16.9777 7.02231C16.9777 7.02231 16.9777 7.02231 17 7.02303M7.02231 16.9777L17 7.02303"
stroke="#09C04C"
strokeWidth="1.5"
/>
<path
d="M13 19L13.8333 17M13.8333 17L15.5 13L17.1667 17M13.8333 17H17.1667M18 19L17.1667 17"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Translate",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 13V10.6569C20 9.83935 20 9.4306 19.8478 9.06306C19.6955 8.69552 19.4065 8.40649 18.8284 7.82843L14.0919 3.09188C13.593 2.593 13.3436 2.34355 13.0345 2.19575C12.9702 2.165 12.9044 2.13772 12.8372 2.11401C12.5141 2 12.1614 2 11.4558 2C8.21082 2 6.58831 2 5.48933 2.88607C5.26731 3.06508 5.06508 3.26731 4.88607 3.48933C4 4.58831 4 6.21082 4 9.45584V14C4 17.7712 4 19.6569 5.17157 20.8284C6.23467 21.8915 7.8857 21.99 11 21.9991M13 2.5V3C13 5.82843 13 7.24264 13.8787 8.12132C14.7574 9 16.1716 9 19 9H19.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M20 22L17.8529 19.8529M17.8529 19.8529C17.9675 19.7384 18.0739 19.6158 18.1714 19.486C18.602 18.913 18.8571 18.2006 18.8571 17.4286C18.8571 15.535 17.3221 14 15.4286 14C13.535 14 12 15.535 12 17.4286C12 19.3221 13.535 20.8571 15.4286 20.8571C16.3753 20.8571 17.2325 20.4734 17.8529 19.8529Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Detect",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.8295 14.2542C19.1276 13.9312 19.2766 13.7698 19.435 13.6756C19.8171 13.4483 20.2876 13.4412 20.6761 13.6569C20.8372 13.7463 20.9908 13.9032 21.298 14.2171C21.6053 14.531 21.7589 14.6879 21.8464 14.8524C22.0575 15.2492 22.0506 15.7299 21.8281 16.1203C21.7359 16.2821 21.5779 16.4343 21.2617 16.7388L17.5003 20.3617C16.9012 20.9387 16.6016 21.2273 16.2272 21.3735C15.8528 21.5197 15.4413 21.509 14.6181 21.4874L14.5062 21.4845C14.2556 21.478 14.1303 21.4747 14.0574 21.392C13.9846 21.3094 13.9945 21.1817 14.0144 20.9265L14.0252 20.7879C14.0812 20.0694 14.1092 19.7102 14.2495 19.3873C14.3898 19.0644 14.6318 18.8022 15.1158 18.2778L18.8295 14.2542Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M22 10.5V9.71749C22 7.77787 22 6.80807 21.4142 6.2055C20.8284 5.60294 19.8856 5.60294 18 5.60294H15.9214C15.004 5.60294 14.9964 5.60116 14.1715 5.18834L10.8399 3.52114C9.44884 2.82504 8.75332 2.47699 8.01238 2.50118C7.27143 2.52537 6.59877 2.91808 5.25345 3.70351L4.02558 4.42037C3.03739 4.99729 2.54329 5.28576 2.27164 5.76564C2 6.24553 2 6.82993 2 7.99873V16.2157C2 17.7514 2 18.5193 2.34226 18.9467C2.57001 19.231 2.88916 19.4222 3.242 19.4856C3.77226 19.5808 4.42148 19.2018 5.71987 18.4437C6.60156 17.929 7.45011 17.3944 8.50487 17.5394C9.38869 17.6608 10.21 18.2185 11 18.6138"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 2.5V17.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M15 5.5V13.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "MindMap",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 16V14C19 11.1716 19 9.75736 18.1213 8.87868C17.2426 8 15.8284 8 13 8H11C8.17157 8 6.75736 8 5.87868 8.87868C5 9.75736 5 11.1716 5 14V16C5 18.8284 5 20.2426 5.87868 21.1213C6.75736 22 8.17157 22 11 22H13C15.8284 22 17.2426 22 18.1213 21.1213C19 20.2426 19 18.8284 19 16Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M19 18C20.4142 18 21.1213 18 21.5607 17.5607C22 17.1213 22 16.4142 22 15C22 13.5858 22 12.8787 21.5607 12.4393C21.1213 12 20.4142 12 19 12"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M5 18C3.58579 18 2.87868 18 2.43934 17.5607C2 17.1213 2 16.4142 2 15C2 13.5858 2 12.8787 2.43934 12.4393C2.87868 12 3.58579 12 5 12"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M13.5 3.5C13.5 4.32843 12.8284 5 12 5C11.1716 5 10.5 4.32843 10.5 3.5C10.5 2.67157 11.1716 2 12 2C12.8284 2 13.5 2.67157 13.5 3.5Z"
stroke="#09C04C"
strokeWidth="1.5"
/>
<path
d="M12 5V8"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 13V14"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15 13V14"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 17.5C10 17.5 10.6667 18 12 18C13.3333 18 14 17.5 14 17.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
),
title: "Bots",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 12.6344C18 16.1465 17.4279 10.621 15.3496 11.0165C13 11.4637 11.5 16.4445 13 16.4445C14.5 16.4445 12.5 10.5 10.5 12.5556C8.5 14.6111 7.85936 17.2946 6.23526 15.3025C-1.5 5.81446 4.99998 -1.14994 8.16322 3.45685C10.1653 6.37256 6.5 16.9769 2 22"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 21H19"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "Documents",
},
{
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 14V10C22 6.22876 22 4.34315 20.8284 3.17157C19.6569 2 17.7712 2 14 2H12C8.22876 2 6.34315 2 5.17157 3.17157C4 4.34315 4 6.22876 4 10V14C4 17.7712 4 19.6569 5.17157 20.8284C6.34315 22 8.22876 22 12 22H14C17.7712 22 19.6569 22 20.8284 20.8284C22 19.6569 22 17.7712 22 14Z"
stroke="#09C04C"
strokeWidth="1.5"
/>
<path
d="M5 6H2M5 12H2M5 18H2"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 7H13.5M15.5 11H13.5"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 22V2"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
title: "PDFs",
},
];
return (
<div className="p-2.5 h-[100svh]">
<main className="h-full grid grid-cols-[340px_auto]">
<div className="p-10 flex flex-col justify-between">
<div>
<Link href={"/"} className="flex items-center gap-2.5">
<Image src={logoImg} alt="" width={180} />
<p className="px-1.5 bg-[#D1CA0D] rounded-lg font-mono font-medium uppercase text-[#193818]">
Beta
</p>
</Link>
<div className="my-5 w-full h-px bg-[#6B6700]"></div>
<p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
Your Conversations
</p>
<div className="w-full space-y-1.5">
<Link
href={"/"}
className="w-full py-2 px-4 bg-white/5 rounded-lg flex text-white duration-200"
>
Getting Started with...
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Lorem Ipsum..
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Duis aute irure...
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Dolor in reprehenderit...
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Excepteur sint...
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Ut enim ad minim...
</Link>
<Link
href={"/"}
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-white duration-200"
>
Lorem ipsum dolor...
</Link>
</div>
</div>
<div>
<div className="p-5 bg-white/10 rounded-lg flex justify-between items-center">
<p className="flex items-center gap-3 font-medium text-white">
<svg
width="27"
height="22"
viewBox="0 0 27 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.25 14.75V7.25"
stroke="white"
strokeWidth="1.875"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24.5416 7.25H21.2885C19.0581 7.25 17.25 8.92887 17.25 11C17.25 13.0711 19.0581 14.75 21.2885 14.75H24.5416C24.6459 14.75 24.6979 14.75 24.7419 14.7474C25.416 14.7063 25.9529 14.2078 25.9971 13.5818C26 13.5409 26 13.4925 26 13.3959V8.60412C26 8.5075 26 8.45907 25.9971 8.41825C25.9529 7.7923 25.416 7.2937 24.7419 7.25268C24.6979 7.25 24.6459 7.25 24.5416 7.25Z"
stroke="white"
strokeWidth="1.875"
/>
<path
d="M24.7062 7.25C24.6091 4.90962 24.2957 3.47469 23.2855 2.46446C21.8211 1 19.464 1 14.75 1H11C6.28595 1 3.92894 1 2.46446 2.46446C1 3.92894 1 6.28595 1 11C1 15.714 1 18.0711 2.46446 19.5355C3.92894 21 6.28595 21 11 21H14.75C19.464 21 21.8211 21 23.2855 19.5355C24.2957 18.5254 24.6091 17.0904 24.7062 14.75"
stroke="white"
strokeWidth="1.875"
/>
<path
d="M20.9888 11H21.0003"
stroke="white"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>{" "}
0x..........abcd
</p>
<button className="flex">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.3083 4.38394C15.7173 4.38394 15.4217 4.38394 15.1525 4.28405C15.1151 4.27017 15.0783 4.25491 15.042 4.23828C14.781 4.11855 14.5721 3.90959 14.1541 3.49167C13.1922 2.52977 12.7113 2.04882 12.1195 2.00447C12.04 1.99851 11.96 1.99851 11.8805 2.00447C11.2887 2.04882 10.8077 2.52977 9.84585 3.49166C9.42793 3.90959 9.21897 4.11855 8.95797 4.23828C8.92172 4.25491 8.88486 4.27017 8.84747 4.28405C8.57825 4.38394 8.28273 4.38394 7.69171 4.38394H7.58269C6.07478 4.38394 5.32083 4.38394 4.85239 4.85239C4.38394 5.32083 4.38394 6.07478 4.38394 7.58269V7.69171C4.38394 8.28273 4.38394 8.57825 4.28405 8.84747C4.27017 8.88486 4.25491 8.92172 4.23828 8.95797C4.11855 9.21897 3.90959 9.42793 3.49166 9.84585C2.52977 10.8077 2.04882 11.2887 2.00447 11.8805C1.99851 11.96 1.99851 12.04 2.00447 12.1195C2.04882 12.7113 2.52977 13.1922 3.49166 14.1541C3.90959 14.5721 4.11855 14.781 4.23828 15.042C4.25491 15.0783 4.27017 15.1151 4.28405 15.1525C4.38394 15.4217 4.38394 15.7173 4.38394 16.3083V16.4173C4.38394 17.9252 4.38394 18.6792 4.85239 19.1476C5.32083 19.6161 6.07478 19.6161 7.58269 19.6161H7.69171C8.28273 19.6161 8.57825 19.6161 8.84747 19.716C8.88486 19.7298 8.92172 19.7451 8.95797 19.7617C9.21897 19.8815 9.42793 20.0904 9.84585 20.5083C10.8077 21.4702 11.2887 21.9512 11.8805 21.9955C11.96 22.0015 12.0399 22.0015 12.1195 21.9955C12.7113 21.9512 13.1922 21.4702 14.1541 20.5083C14.5721 20.0904 14.781 19.8815 15.042 19.7617C15.0783 19.7451 15.1151 19.7298 15.1525 19.716C15.4217 19.6161 15.7173 19.6161 16.3083 19.6161H16.4173C17.9252 19.6161 18.6792 19.6161 19.1476 19.1476C19.6161 18.6792 19.6161 17.9252 19.6161 16.4173V16.3083C19.6161 15.7173 19.6161 15.4217 19.716 15.1525C19.7298 15.1151 19.7451 15.0783 19.7617 15.042C19.8815 14.781 20.0904 14.5721 20.5083 14.1541C21.4702 13.1922 21.9512 12.7113 21.9955 12.1195C22.0015 12.0399 22.0015 11.96 21.9955 11.8805C21.9512 11.2887 21.4702 10.8077 20.5083 9.84585C20.0904 9.42793 19.8815 9.21897 19.7617 8.95797C19.7451 8.92172 19.7298 8.88486 19.716 8.84747C19.6161 8.57825 19.6161 8.28273 19.6161 7.69171V7.58269C19.6161 6.07478 19.6161 5.32083 19.1476 4.85239C18.6792 4.38394 17.9252 4.38394 16.4173 4.38394H16.3083Z"
stroke="white"
strokeWidth="1.5"
/>
<path
d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
stroke="white"
strokeWidth="1.5"
/>
</svg>
</button>
</div>
<div className="mt-3.5 mb-5 w-full h-px bg-white/10"></div>
<div className="flex justify-between items-center">
<p className="text-white/75">© 2025 Collano Labs</p>
<div className="flex items-center gap-4">
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2719 1.58661H18.0831L11.9414 8.60619L19.1666 18.1582H13.5093L9.07834 12.365L4.00827 18.1582H1.19534L7.76451 10.65L0.833313 1.58661H6.63424L10.6395 6.88189L15.2719 1.58661ZM14.2852 16.4756H15.843L5.78781 3.18089H4.1162L14.2852 16.4756Z"
fill="white"
/>
</svg>
</Link>
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.42967 10.5292C9.39247 11.0849 9.87385 11.3627 10.4026 11.3632C10.9312 11.3636 11.4131 11.0866 12.3769 10.5326L18.5204 7.00114C18.7978 6.84173 18.9687 6.54622 18.9687 6.22631C18.9687 5.9064 18.7978 5.6109 18.5204 5.45148L12.3747 1.91871C11.4119 1.3653 10.9306 1.0886 10.4024 1.08881C9.87422 1.08901 9.39308 1.36609 8.43078 1.92025L3.14748 4.96274C3.10831 4.9853 3.08875 4.99656 3.07049 5.00723C1.26576 6.06373 0.150741 7.99253 0.135832 10.0837C0.135681 10.1048 0.135681 10.1274 0.135681 10.1726C0.135681 10.2178 0.135681 10.2403 0.135832 10.2614C0.150708 12.3502 1.26324 14.2772 3.06475 15.3346C3.08296 15.3453 3.1025 15.3565 3.14161 15.3791L6.45105 17.2899C8.37945 18.4033 9.34364 18.96 10.4025 18.9603C11.4613 18.9607 12.4259 18.4046 14.3551 17.2926L17.8486 15.2786C18.8146 14.7217 19.2976 14.4433 19.5628 13.9843C19.828 13.5253 19.828 12.9678 19.828 11.8528V9.69893C19.828 9.3896 19.6605 9.10456 19.3902 8.95403C19.1287 8.8084 18.81 8.81056 18.5505 8.95973L11.3869 13.0776C10.9063 13.3539 10.6659 13.492 10.4022 13.4921C10.1385 13.4922 9.89813 13.3542 9.41733 13.0782L4.56884 10.295C4.32598 10.1556 4.20453 10.0859 4.10699 10.0733C3.88462 10.0446 3.67081 10.1692 3.5861 10.3768C3.54896 10.4679 3.5497 10.6079 3.55121 10.8879C3.55231 11.0941 3.55287 11.1972 3.57213 11.292C3.6153 11.5043 3.72699 11.6966 3.8901 11.8392C3.96293 11.9029 4.05219 11.9544 4.23075 12.0575L9.41459 15.0494C9.89665 15.3276 10.1377 15.4667 10.4023 15.4668C10.667 15.4669 10.9081 15.3279 11.3903 15.0499L17.7441 11.3873C17.9088 11.2924 17.9912 11.2449 18.053 11.2806C18.1147 11.3163 18.1147 11.4113 18.1147 11.6014V12.5784C18.1147 12.8572 18.1147 12.9965 18.0484 13.1113C17.9821 13.226 17.8613 13.2957 17.6198 13.4349L12.3791 16.4558C11.4143 17.0119 10.9319 17.29 10.4024 17.2898C9.8729 17.2895 9.39074 17.011 8.42647 16.454L3.52336 13.6217C3.50779 13.6126 3.50001 13.6082 3.49275 13.6039C2.46469 13.0032 1.83034 11.9042 1.82439 10.7134C1.82435 10.705 1.82435 10.6961 1.82435 10.6781V9.78126C1.82435 9.12394 2.17443 8.5164 2.74312 8.18677C3.24564 7.89548 3.86548 7.8949 4.36853 8.18526L8.42967 10.5292Z"
fill="white"
/>
</svg>
</Link>
</div>
</div>
</div>
</div>
<div
className="pt-[200px] pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
style={{
backgroundImage: `url("/images/body-bg.png")`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="w-full max-w-[780px] space-y-7">
<div>
<p className="font-mono text-sm font-medium text-[#09C04C]">
COLLANO v1.0
</p>
<h1 className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white">
Welcome John 👋
</h1>
<p className="mb-5 text-white/75">We’re glad to see you today</p>
</div>
<div className="p-1 border border-white/10 bg-[#121A15] rounded-2xl grid grid-cols-8">
{items.map((item, index) => {
return (
<div
key={index}
className="p-5 hover:bg-white/5 rounded-xl flex flex-col items-center gap-2 cursor-pointer duration-200"
>
{item.icon}
<p className="font-medium text-white">{item.title}</p>
</div>
);
})}
</div>
</div>
<div className="w-full max-w-[780px] space-y-2">
<div className="flex items-center gap-2">
<button className="py-1.5 px-2 border border-[#09C04C] bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.2656 2.73445C13.8814 1.3503 9.95415 3.03341 6.49378 6.49378C3.03341 9.95415 1.3503 13.8814 2.73445 15.2656C4.1186 16.6497 8.04585 14.9666 11.5062 11.5062C14.9666 8.04585 16.6497 4.1186 15.2656 2.73445Z"
stroke="#09C04C"
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.73445 2.73445C1.3503 4.1186 3.03341 8.04585 6.49378 11.5062C9.95415 14.9666 13.8814 16.6497 15.2656 15.2656C16.6497 13.8814 14.9666 9.95415 11.5062 6.49378C8.04585 3.03341 4.1186 1.3503 2.73445 2.73445Z"
stroke="#09C04C"
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.00675 9H9"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
DeepThink(R1)
</button>
<button
className="py-1.5 px-2 border border-[#09C04C] bg-[#09C04C] rounded-xl flex items-center gap-1.5 text-base font-medium text-white"
style={{
background: `linearGradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 100%), #09C04C`,
}}
>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z"
stroke="white"
strokeWidth="1.125"
/>
<path
d="M6 9C6 13.5 9 16.5 9 16.5C9 16.5 12 13.5 12 9C12 4.5 9 1.5 9 1.5C9 1.5 6 4.5 6 9Z"
stroke="white"
strokeWidth="1.125"
strokeLinejoin="round"
/>
<path
d="M15.75 11.25H2.25"
stroke="white"
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.75 6.75H2.25"
stroke="white"
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Search
</button>
</div>
<div className="relative">
<textarea
placeholder="Ask me anything..."
className="w-full h-[135px] p-5 resize-none outline-none border border-white/10 focus:border-[#09C04C] bg-[#121A15] rounded-2xl text-base text-white placeholder:text-white/75 duration-200"
></textarea>
<div className="absolute bottom-0 left-0 w-full p-5 flex justify-between">
<p className="flex items-center gap-2 text-white/50">
Press{" "}
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="16"
height="16"
rx="4"
fill="#09C04C"
fillOpacity="0.1"
/>
<path
d="M11.9993 4.00134V4.70112C11.9993 6.38072 11.9993 7.22054 11.6725 7.86204C11.3849 8.42635 10.9261 8.88515 10.3618 9.17266C9.72034 9.49955 8.88051 9.49955 7.20091 9.49955H4.00195M4.00195 9.49955L6.50114 7.00037M4.00195 9.49955L6.50114 11.9987"
stroke="#09C04C"
strokeWidth="0.999675"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>{" "}
to send
</p>
<button className="flex">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.0477 3.05293C18.8697 0.707361 2.48648 6.4532 2.50001 8.551C2.51535 10.9299 8.89809 11.6617 10.6672 12.1581C11.7311 12.4565 12.016 12.7625 12.2613 13.8781C13.3723 18.9305 13.9301 21.4435 15.2014 21.4996C17.2278 21.5892 23.1733 5.342 21.0477 3.05293Z"
stroke="#09C04C"
strokeWidth="1.5"
/>
<path
d="M11.5 12.5L15 9"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</main>
<div
className={`fixed z-[1000] top-0 left-0 w-full h-full bg-black/50 backdrop-blur-lg flex justify-center items-center ${
!isWalletPopupActive ? "opacity-0 pointer-events-none" : ""
} duration-200`}
>
<button
onClick={() => {
setIsWalletPopupActive(false);
}}
className="absolute top-5 right-5 flex"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6 18M6 6L18 18"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
<div className="w-full max-w-[420px] p-5 border border-white/10 bg-white/10 rounded-2xl">
<p className="font-mono text-sm font-medium uppercase text-center text-[#09C04C]">
My Wallet
</p>
<h3 className="mt-1.5 mb-2 font-serif text-2xl font-bold text-center text-white">
<span>$</span>29.02
</h3>
<p className="flex justify-center items-center gap-3 font-mono text-sm font-medium uppercase text-center text-[#09C04C]">
0xabcd...123{" "}
<span className="flex items-center gap-2">
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.75 6V3.9C6.75 3.05992 6.75 2.63988 6.91349 2.31902C7.0573 2.03677 7.28677 1.8073 7.56902 1.66349C7.88988 1.5 8.30992 1.5 9.15 1.5H14.85C15.6901 1.5 16.1102 1.5 16.431 1.66349C16.7132 1.8073 16.9427 2.03677 17.0865 2.31902C17.25 2.63988 17.25 3.05992 17.25 3.9V9.6C17.25 10.4401 17.25 10.8601 17.0865 11.181C16.9427 11.4632 16.7132 11.6927 16.431 11.8365C16.1102 12 15.6901 12 14.85 12H12.75M4.65 16.5H10.35C11.1901 16.5 11.6101 16.5 11.931 16.3365C12.2132 16.1927 12.4427 15.9632 12.5865 15.681C12.75 15.3602 12.75 14.9401 12.75 14.1V8.4C12.75 7.55992 12.75 7.13988 12.5865 6.81902C12.4427 6.53677 12.2132 6.3073 11.931 6.16349C11.6101 6 11.1901 6 10.35 6H4.65C3.80992 6 3.38988 6 3.06902 6.16349C2.78677 6.3073 2.5573 6.53677 2.41349 6.81902C2.25 7.13988 2.25 7.55992 2.25 8.4V14.1C2.25 14.9401 2.25 15.3602 2.41349 15.681C2.5573 15.9632 2.78677 16.1927 3.06902 16.3365C3.38988 16.5 3.80992 16.5 4.65 16.5Z"
stroke="#09C04C"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.75 7.00001V3.00001M15.75 3.00001H11.75M15.75 3.00001L9.75 9M8.41667 3H6.95C5.82989 3 5.26984 3 4.84202 3.21799C4.46569 3.40973 4.15973 3.71569 3.96799 4.09202C3.75 4.51984 3.75 5.07989 3.75 6.2V11.8C3.75 12.9201 3.75 13.4801 3.96799 13.908C4.15973 14.2843 4.46569 14.5903 4.84202 14.782C5.26984 15 5.82989 15 6.95 15H12.55C13.6701 15 14.2301 15 14.658 14.782C15.0343 14.5903 15.3403 14.2843 15.532 13.908C15.75 13.4801 15.75 12.9201 15.75 11.8V10.3333"
stroke="#09C04C"
strokeWidth="1.33333"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
</p>
<div className="mt-6 space-y-2">
<div
onClick={() => {
setIsWalletPopupActive(false);
}}
className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200"
>
<div className="flex items-center gap-2.5">
<svg
width="31"
height="32"
viewBox="0 0 31 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
y="0.75"
width="30.5"
height="30.5"
rx="15.25"
fill="#FF007A"
/>
<g clipPath="url(#clip0_4_686)">
<path
d="M10.9321 7.08979C10.6482 7.046 10.6361 7.04147 10.7705 7.02183C11.0272 6.98257 11.6312 7.03543 12.048 7.13358C13.0205 7.36312 13.9054 7.95205 14.8507 8.99854L15.1014 9.2764L15.4608 9.21902C16.9739 8.9774 18.5112 9.16918 19.7993 9.75963C20.1542 9.92272 20.7129 10.2459 20.7809 10.3289C20.805 10.3561 20.8458 10.5252 20.8715 10.708C20.9681 11.3392 20.9213 11.8209 20.7265 12.1818C20.6208 12.3781 20.6148 12.44 20.6857 12.6092C20.7197 12.6788 20.7725 12.7376 20.8382 12.7787C20.9038 12.8198 20.9797 12.8416 21.0572 12.8417C21.3774 12.8417 21.7217 12.3283 21.8802 11.6125L21.9436 11.3271L22.069 11.4691C22.7591 12.2452 23.2997 13.3023 23.3918 14.0543L23.416 14.2506L23.3012 14.0725C23.1344 13.7995 22.9103 13.5661 22.6443 13.3884C22.1822 13.0849 21.693 12.9807 20.4003 12.9127C19.2315 12.8523 18.5701 12.7526 17.9147 12.5397C16.7988 12.1773 16.237 11.6971 14.9111 9.96953C14.3222 9.2009 13.9598 8.77656 13.5974 8.43528C12.7744 7.65758 11.9665 7.24986 10.9321 7.0913V7.08979Z"
fill="white"
/>
<path
d="M21.0519 8.80326C21.0806 8.28982 21.1501 7.95005 21.292 7.64049C21.3231 7.56225 21.3621 7.48737 21.4083 7.41699C21.4159 7.41699 21.3917 7.5076 21.3539 7.61783C21.2513 7.91985 21.2331 8.3306 21.3056 8.8093C21.3962 9.41635 21.4461 9.50394 22.0909 10.1593C22.3944 10.4674 22.7462 10.854 22.8746 11.0216L23.1072 11.3236L22.8746 11.1077C22.5907 10.8434 21.9383 10.3269 21.7934 10.2529C21.6967 10.2046 21.6816 10.2046 21.6227 10.2635C21.5669 10.3179 21.5563 10.3994 21.5472 10.786C21.5367 11.3885 21.4536 11.7751 21.2543 12.1602C21.1471 12.3716 21.1305 12.3263 21.2271 12.0892C21.2996 11.914 21.3071 11.8355 21.3071 11.2526C21.3071 10.0823 21.1652 9.79992 20.3452 9.31971C20.0979 9.17685 19.8439 9.04583 19.5841 8.92708C19.4561 8.87563 19.332 8.81507 19.2126 8.74587C19.2353 8.72322 20.0356 8.95578 20.3573 9.07809C20.8375 9.26232 20.916 9.28497 20.9749 9.26383C21.0127 9.24873 21.0323 9.13548 21.0504 8.80326H21.0519ZM11.4885 10.8071C10.9132 10.0189 10.5553 8.8093 10.6338 7.90475L10.6565 7.62538L10.7878 7.64804C11.0355 7.69334 11.4598 7.85039 11.6592 7.9712C12.2043 8.3004 12.4414 8.73379 12.6815 9.84824C12.7525 10.1744 12.8446 10.5429 12.8869 10.6697C12.9548 10.8706 13.2146 11.3402 13.4245 11.6452C13.5755 11.8657 13.4758 11.9699 13.1406 11.9397C12.6286 11.8944 11.9355 11.4187 11.4885 10.8071ZM20.3512 16.6769C17.6572 15.6002 16.7089 14.6639 16.7089 13.0859C16.7089 12.8533 16.7165 12.663 16.727 12.663C16.7361 12.663 16.8403 12.7386 16.9581 12.8337C17.5047 13.2686 18.1163 13.4543 19.8106 13.7005C20.8073 13.8454 21.366 13.9617 21.884 14.1324C23.53 14.6745 24.5463 15.7738 24.7894 17.2734C24.8589 17.7083 24.8196 18.5237 24.7033 18.9541C24.6127 19.2939 24.3379 19.9054 24.2654 19.9296C24.2443 19.9372 24.2246 19.8601 24.2201 19.7544C24.1929 19.1927 23.906 18.6445 23.4258 18.2338C22.8791 17.7672 22.1452 17.3957 20.3512 16.6784V16.6769ZM18.4606 17.1254C18.429 16.9341 18.3856 16.745 18.3307 16.5591L18.2613 16.3552L18.3896 16.4987C18.5663 16.695 18.7068 16.9472 18.8245 17.2839C18.9151 17.5406 18.9242 17.6161 18.9242 18.0329C18.9242 18.4422 18.9121 18.5282 18.8276 18.7578C18.7115 19.0982 18.517 19.4065 18.2598 19.6578C17.7675 20.1561 17.1348 20.431 16.2211 20.5457C16.0626 20.5654 15.6005 20.5986 15.1943 20.6197C14.1689 20.6726 13.4939 20.7828 12.8884 20.9942C12.8335 21.0183 12.7746 21.0322 12.7147 21.035C12.6906 21.0108 13.1043 20.7662 13.4441 20.6031C13.9243 20.3721 14.403 20.2467 15.4752 20.07C16.0037 19.9825 16.5519 19.8752 16.6908 19.833C18.0015 19.4343 18.6766 18.4029 18.4606 17.1254Z"
fill="white"
/>
<path
d="M19.695 19.3063C19.3371 18.5421 19.254 17.8037 19.4503 17.1151C19.4715 17.0396 19.5047 16.9807 19.5258 16.9807C19.5455 16.9807 19.6315 17.026 19.7131 17.0819C19.8792 17.1921 20.2084 17.3779 21.0903 17.8551C22.1896 18.4515 22.8178 18.9121 23.2437 19.4407C23.6167 19.9012 23.8477 20.4283 23.9595 21.0685C24.0229 21.431 23.9851 22.3068 23.8915 22.6722C23.5955 23.826 22.91 24.732 21.9284 25.2605C21.7849 25.3376 21.6566 25.401 21.6415 25.401C21.6279 25.401 21.6807 25.2696 21.7578 25.108C22.0885 24.4224 22.1262 23.7565 21.8771 23.015C21.723 22.5605 21.4119 22.0063 20.7837 21.0685C20.0529 19.9813 19.8747 19.6898 19.695 19.3063ZM9.57434 23.4333C10.5755 22.5937 11.8183 21.9987 12.9524 21.8145C13.5365 21.7396 14.1291 21.7626 14.7056 21.8825C15.4305 22.0667 16.0798 22.4805 16.4166 22.9712C16.7458 23.453 16.8877 23.8713 17.0357 24.8045C17.0931 25.1714 17.1565 25.5414 17.1746 25.6245C17.2849 26.1077 17.5008 26.4943 17.7666 26.6876C18.1894 26.9956 18.9203 27.0153 19.6376 26.7374C19.7121 26.7031 19.7908 26.6787 19.8717 26.6649C19.8973 26.6906 19.5364 26.9307 19.2827 27.0576C18.9817 27.2176 18.645 27.2987 18.3042 27.2931C17.6473 27.2931 17.1021 26.9609 16.6461 26.2844C16.4788 25.998 16.3296 25.7014 16.1991 25.3965C15.7189 24.3077 15.4818 23.977 14.9246 23.613C14.4383 23.2959 13.8117 23.24 13.3405 23.4696C12.7214 23.7716 12.5492 24.5568 12.9932 25.0552C13.2006 25.2693 13.4719 25.4103 13.7664 25.4569C13.8833 25.4729 14.0023 25.4636 14.1153 25.4296C14.2284 25.3955 14.3328 25.3376 14.4214 25.2597C14.5101 25.1818 14.5809 25.0857 14.6292 24.978C14.6775 24.8702 14.702 24.7534 14.7011 24.6354C14.7011 24.3077 14.5743 24.1219 14.2556 23.977C13.8192 23.7822 13.3526 24.0102 13.3541 24.4164C13.3541 24.5901 13.4311 24.6988 13.6063 24.7788C13.718 24.8287 13.7211 24.8317 13.6289 24.8136C13.2303 24.7305 13.1366 24.2518 13.4568 23.9347C13.8434 23.5541 14.6407 23.7218 14.914 24.2427C15.0288 24.4617 15.0424 24.8966 14.9427 25.1594C14.7162 25.7483 14.0638 26.0579 13.3994 25.8887C12.9464 25.774 12.7637 25.6501 12.2185 25.0929C11.2717 24.1234 10.9047 23.9347 9.53961 23.7233L9.27686 23.6825L9.57434 23.4333Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.12937 6.08256C8.2915 9.89705 10.4706 11.4706 10.7122 11.8028C10.9115 12.0776 10.836 12.3253 10.4947 12.5186C10.252 12.6405 9.98785 12.7139 9.71703 12.7345C9.49504 12.7345 9.41803 12.6499 9.41803 12.6499C9.28967 12.5291 9.21719 12.5503 8.55728 11.386C7.99623 10.5128 7.42842 9.64397 6.85389 8.77958C6.80557 8.73428 6.80708 8.73428 8.46516 11.6835C8.73245 12.2981 8.51801 12.5231 8.51801 12.6107C8.51801 12.7889 8.46818 12.8825 8.24771 13.1286C7.87925 13.5364 7.71465 13.9954 7.59535 14.9453C7.46246 16.0099 7.08796 16.7619 6.04901 18.05C5.44196 18.8036 5.34229 18.941 5.18826 19.246C4.99497 19.6281 4.94212 19.8425 4.92098 20.3242C4.89833 20.8361 4.94212 21.1653 5.09917 21.6531C5.23508 22.082 5.38004 22.3629 5.747 22.9276C6.06412 23.4154 6.24533 23.7778 6.24533 23.9198C6.24533 24.0315 6.26647 24.0315 6.75876 23.9213C7.93059 23.6585 8.88346 23.1964 9.41954 22.6271C9.75176 22.2753 9.82877 22.082 9.83179 21.6003C9.8333 21.2862 9.82273 21.2197 9.73666 21.0385C9.59773 20.744 9.34403 20.4979 8.7853 20.1173C8.0514 19.619 7.7373 19.2188 7.65273 18.6677C7.58025 18.2146 7.6633 17.896 8.06801 17.0519C8.48781 16.176 8.59201 15.803 8.66298 14.9226C8.70829 14.3533 8.7702 14.1283 8.9348 13.9471C9.10695 13.7599 9.26098 13.6964 9.68682 13.6391C10.38 13.5439 10.8194 13.3672 11.1818 13.035C11.3271 12.9151 11.4443 12.7648 11.5252 12.5947C11.6061 12.4246 11.6486 12.2388 11.6499 12.0504L11.665 11.7333L11.4884 11.531C10.8526 10.794 4.70352 5.50269 4.66426 5.50269C4.65671 5.50269 4.8651 5.76393 5.12937 6.08256ZM6.60322 20.9041C6.6725 20.7817 6.6931 20.6378 6.66091 20.5009C6.62872 20.364 6.54611 20.2443 6.42956 20.1657C6.20304 20.0147 5.84817 20.0871 5.84817 20.2819C5.84817 20.3424 5.88139 20.3861 5.9569 20.4239C6.08375 20.4888 6.09281 20.5613 5.99314 20.7108C5.89197 20.8603 5.90103 20.9917 6.01579 21.0823C6.20153 21.2258 6.46429 21.1472 6.60322 20.9041ZM12.1015 13.8067C11.7768 13.9048 11.4612 14.2476 11.3615 14.607C11.3026 14.826 11.3374 15.2111 11.4264 15.3288C11.5714 15.5206 11.7103 15.5705 12.0894 15.569C12.8293 15.5644 13.4726 15.2488 13.5481 14.8532C13.6085 14.53 13.3261 14.083 12.9365 13.8852C12.6719 13.7778 12.3815 13.7504 12.1015 13.8067ZM12.9683 14.4787C13.0815 14.3171 13.0317 14.1434 12.8369 14.0256C12.4684 13.8006 11.9082 13.9864 11.9082 14.3337C11.9082 14.5074 12.1996 14.6961 12.4669 14.6961C12.6451 14.6961 12.8897 14.5904 12.9683 14.4787Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_4_686">
<rect
width="21.1413"
height="22.6514"
fill="white"
transform="translate(4.66357 4.74731)"
/>
</clipPath>
</defs>
</svg>
<p className="font-mono font-medium text-white">
Uniswap <br /> <span className="font-semibold">UNI</span>
</p>
</div>
<p className="text-white">0.0068123546875413</p>
</div>
<div
onClick={() => {
setIsWalletPopupActive(false);
}}
className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200"
>
<div className="flex items-center gap-2.5">
<svg
width="31"
height="32"
viewBox="0 0 31 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
y="0.75"
width="30.5"
height="30.5"
rx="15.25"
fill="#FF007A"
/>
<g clipPath="url(#clip0_4_686)">
<path
d="M10.9321 7.08979C10.6482 7.046 10.6361 7.04147 10.7705 7.02183C11.0272 6.98257 11.6312 7.03543 12.048 7.13358C13.0205 7.36312 13.9054 7.95205 14.8507 8.99854L15.1014 9.2764L15.4608 9.21902C16.9739 8.9774 18.5112 9.16918 19.7993 9.75963C20.1542 9.92272 20.7129 10.2459 20.7809 10.3289C20.805 10.3561 20.8458 10.5252 20.8715 10.708C20.9681 11.3392 20.9213 11.8209 20.7265 12.1818C20.6208 12.3781 20.6148 12.44 20.6857 12.6092C20.7197 12.6788 20.7725 12.7376 20.8382 12.7787C20.9038 12.8198 20.9797 12.8416 21.0572 12.8417C21.3774 12.8417 21.7217 12.3283 21.8802 11.6125L21.9436 11.3271L22.069 11.4691C22.7591 12.2452 23.2997 13.3023 23.3918 14.0543L23.416 14.2506L23.3012 14.0725C23.1344 13.7995 22.9103 13.5661 22.6443 13.3884C22.1822 13.0849 21.693 12.9807 20.4003 12.9127C19.2315 12.8523 18.5701 12.7526 17.9147 12.5397C16.7988 12.1773 16.237 11.6971 14.9111 9.96953C14.3222 9.2009 13.9598 8.77656 13.5974 8.43528C12.7744 7.65758 11.9665 7.24986 10.9321 7.0913V7.08979Z"
fill="white"
/>
<path
d="M21.0519 8.80326C21.0806 8.28982 21.1501 7.95005 21.292 7.64049C21.3231 7.56225 21.3621 7.48737 21.4083 7.41699C21.4159 7.41699 21.3917 7.5076 21.3539 7.61783C21.2513 7.91985 21.2331 8.3306 21.3056 8.8093C21.3962 9.41635 21.4461 9.50394 22.0909 10.1593C22.3944 10.4674 22.7462 10.854 22.8746 11.0216L23.1072 11.3236L22.8746 11.1077C22.5907 10.8434 21.9383 10.3269 21.7934 10.2529C21.6967 10.2046 21.6816 10.2046 21.6227 10.2635C21.5669 10.3179 21.5563 10.3994 21.5472 10.786C21.5367 11.3885 21.4536 11.7751 21.2543 12.1602C21.1471 12.3716 21.1305 12.3263 21.2271 12.0892C21.2996 11.914 21.3071 11.8355 21.3071 11.2526C21.3071 10.0823 21.1652 9.79992 20.3452 9.31971C20.0979 9.17685 19.8439 9.04583 19.5841 8.92708C19.4561 8.87563 19.332 8.81507 19.2126 8.74587C19.2353 8.72322 20.0356 8.95578 20.3573 9.07809C20.8375 9.26232 20.916 9.28497 20.9749 9.26383C21.0127 9.24873 21.0323 9.13548 21.0504 8.80326H21.0519ZM11.4885 10.8071C10.9132 10.0189 10.5553 8.8093 10.6338 7.90475L10.6565 7.62538L10.7878 7.64804C11.0355 7.69334 11.4598 7.85039 11.6592 7.9712C12.2043 8.3004 12.4414 8.73379 12.6815 9.84824C12.7525 10.1744 12.8446 10.5429 12.8869 10.6697C12.9548 10.8706 13.2146 11.3402 13.4245 11.6452C13.5755 11.8657 13.4758 11.9699 13.1406 11.9397C12.6286 11.8944 11.9355 11.4187 11.4885 10.8071ZM20.3512 16.6769C17.6572 15.6002 16.7089 14.6639 16.7089 13.0859C16.7089 12.8533 16.7165 12.663 16.727 12.663C16.7361 12.663 16.8403 12.7386 16.9581 12.8337C17.5047 13.2686 18.1163 13.4543 19.8106 13.7005C20.8073 13.8454 21.366 13.9617 21.884 14.1324C23.53 14.6745 24.5463 15.7738 24.7894 17.2734C24.8589 17.7083 24.8196 18.5237 24.7033 18.9541C24.6127 19.2939 24.3379 19.9054 24.2654 19.9296C24.2443 19.9372 24.2246 19.8601 24.2201 19.7544C24.1929 19.1927 23.906 18.6445 23.4258 18.2338C22.8791 17.7672 22.1452 17.3957 20.3512 16.6784V16.6769ZM18.4606 17.1254C18.429 16.9341 18.3856 16.745 18.3307 16.5591L18.2613 16.3552L18.3896 16.4987C18.5663 16.695 18.7068 16.9472 18.8245 17.2839C18.9151 17.5406 18.9242 17.6161 18.9242 18.0329C18.9242 18.4422 18.9121 18.5282 18.8276 18.7578C18.7115 19.0982 18.517 19.4065 18.2598 19.6578C17.7675 20.1561 17.1348 20.431 16.2211 20.5457C16.0626 20.5654 15.6005 20.5986 15.1943 20.6197C14.1689 20.6726 13.4939 20.7828 12.8884 20.9942C12.8335 21.0183 12.7746 21.0322 12.7147 21.035C12.6906 21.0108 13.1043 20.7662 13.4441 20.6031C13.9243 20.3721 14.403 20.2467 15.4752 20.07C16.0037 19.9825 16.5519 19.8752 16.6908 19.833C18.0015 19.4343 18.6766 18.4029 18.4606 17.1254Z"
fill="white"
/>
<path
d="M19.695 19.3063C19.3371 18.5421 19.254 17.8037 19.4503 17.1151C19.4715 17.0396 19.5047 16.9807 19.5258 16.9807C19.5455 16.9807 19.6315 17.026 19.7131 17.0819C19.8792 17.1921 20.2084 17.3779 21.0903 17.8551C22.1896 18.4515 22.8178 18.9121 23.2437 19.4407C23.6167 19.9012 23.8477 20.4283 23.9595 21.0685C24.0229 21.431 23.9851 22.3068 23.8915 22.6722C23.5955 23.826 22.91 24.732 21.9284 25.2605C21.7849 25.3376 21.6566 25.401 21.6415 25.401C21.6279 25.401 21.6807 25.2696 21.7578 25.108C22.0885 24.4224 22.1262 23.7565 21.8771 23.015C21.723 22.5605 21.4119 22.0063 20.7837 21.0685C20.0529 19.9813 19.8747 19.6898 19.695 19.3063ZM9.57434 23.4333C10.5755 22.5937 11.8183 21.9987 12.9524 21.8145C13.5365 21.7396 14.1291 21.7626 14.7056 21.8825C15.4305 22.0667 16.0798 22.4805 16.4166 22.9712C16.7458 23.453 16.8877 23.8713 17.0357 24.8045C17.0931 25.1714 17.1565 25.5414 17.1746 25.6245C17.2849 26.1077 17.5008 26.4943 17.7666 26.6876C18.1894 26.9956 18.9203 27.0153 19.6376 26.7374C19.7121 26.7031 19.7908 26.6787 19.8717 26.6649C19.8973 26.6906 19.5364 26.9307 19.2827 27.0576C18.9817 27.2176 18.645 27.2987 18.3042 27.2931C17.6473 27.2931 17.1021 26.9609 16.6461 26.2844C16.4788 25.998 16.3296 25.7014 16.1991 25.3965C15.7189 24.3077 15.4818 23.977 14.9246 23.613C14.4383 23.2959 13.8117 23.24 13.3405 23.4696C12.7214 23.7716 12.5492 24.5568 12.9932 25.0552C13.2006 25.2693 13.4719 25.4103 13.7664 25.4569C13.8833 25.4729 14.0023 25.4636 14.1153 25.4296C14.2284 25.3955 14.3328 25.3376 14.4214 25.2597C14.5101 25.1818 14.5809 25.0857 14.6292 24.978C14.6775 24.8702 14.702 24.7534 14.7011 24.6354C14.7011 24.3077 14.5743 24.1219 14.2556 23.977C13.8192 23.7822 13.3526 24.0102 13.3541 24.4164C13.3541 24.5901 13.4311 24.6988 13.6063 24.7788C13.718 24.8287 13.7211 24.8317 13.6289 24.8136C13.2303 24.7305 13.1366 24.2518 13.4568 23.9347C13.8434 23.5541 14.6407 23.7218 14.914 24.2427C15.0288 24.4617 15.0424 24.8966 14.9427 25.1594C14.7162 25.7483 14.0638 26.0579 13.3994 25.8887C12.9464 25.774 12.7637 25.6501 12.2185 25.0929C11.2717 24.1234 10.9047 23.9347 9.53961 23.7233L9.27686 23.6825L9.57434 23.4333Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.12937 6.08256C8.2915 9.89705 10.4706 11.4706 10.7122 11.8028C10.9115 12.0776 10.836 12.3253 10.4947 12.5186C10.252 12.6405 9.98785 12.7139 9.71703 12.7345C9.49504 12.7345 9.41803 12.6499 9.41803 12.6499C9.28967 12.5291 9.21719 12.5503 8.55728 11.386C7.99623 10.5128 7.42842 9.64397 6.85389 8.77958C6.80557 8.73428 6.80708 8.73428 8.46516 11.6835C8.73245 12.2981 8.51801 12.5231 8.51801 12.6107C8.51801 12.7889 8.46818 12.8825 8.24771 13.1286C7.87925 13.5364 7.71465 13.9954 7.59535 14.9453C7.46246 16.0099 7.08796 16.7619 6.04901 18.05C5.44196 18.8036 5.34229 18.941 5.18826 19.246C4.99497 19.6281 4.94212 19.8425 4.92098 20.3242C4.89833 20.8361 4.94212 21.1653 5.09917 21.6531C5.23508 22.082 5.38004 22.3629 5.747 22.9276C6.06412 23.4154 6.24533 23.7778 6.24533 23.9198C6.24533 24.0315 6.26647 24.0315 6.75876 23.9213C7.93059 23.6585 8.88346 23.1964 9.41954 22.6271C9.75176 22.2753 9.82877 22.082 9.83179 21.6003C9.8333 21.2862 9.82273 21.2197 9.73666 21.0385C9.59773 20.744 9.34403 20.4979 8.7853 20.1173C8.0514 19.619 7.7373 19.2188 7.65273 18.6677C7.58025 18.2146 7.6633 17.896 8.06801 17.0519C8.48781 16.176 8.59201 15.803 8.66298 14.9226C8.70829 14.3533 8.7702 14.1283 8.9348 13.9471C9.10695 13.7599 9.26098 13.6964 9.68682 13.6391C10.38 13.5439 10.8194 13.3672 11.1818 13.035C11.3271 12.9151 11.4443 12.7648 11.5252 12.5947C11.6061 12.4246 11.6486 12.2388 11.6499 12.0504L11.665 11.7333L11.4884 11.531C10.8526 10.794 4.70352 5.50269 4.66426 5.50269C4.65671 5.50269 4.8651 5.76393 5.12937 6.08256ZM6.60322 20.9041C6.6725 20.7817 6.6931 20.6378 6.66091 20.5009C6.62872 20.364 6.54611 20.2443 6.42956 20.1657C6.20304 20.0147 5.84817 20.0871 5.84817 20.2819C5.84817 20.3424 5.88139 20.3861 5.9569 20.4239C6.08375 20.4888 6.09281 20.5613 5.99314 20.7108C5.89197 20.8603 5.90103 20.9917 6.01579 21.0823C6.20153 21.2258 6.46429 21.1472 6.60322 20.9041ZM12.1015 13.8067C11.7768 13.9048 11.4612 14.2476 11.3615 14.607C11.3026 14.826 11.3374 15.2111 11.4264 15.3288C11.5714 15.5206 11.7103 15.5705 12.0894 15.569C12.8293 15.5644 13.4726 15.2488 13.5481 14.8532C13.6085 14.53 13.3261 14.083 12.9365 13.8852C12.6719 13.7778 12.3815 13.7504 12.1015 13.8067ZM12.9683 14.4787C13.0815 14.3171 13.0317 14.1434 12.8369 14.0256C12.4684 13.8006 11.9082 13.9864 11.9082 14.3337C11.9082 14.5074 12.1996 14.6961 12.4669 14.6961C12.6451 14.6961 12.8897 14.5904 12.9683 14.4787Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_4_686">
<rect
width="21.1413"
height="22.6514"
fill="white"
transform="translate(4.66357 4.74731)"
/>
</clipPath>
</defs>
</svg>
<p className="font-mono font-medium text-white">
Uniswap <br /> <span className="font-semibold">UNI</span>
</p>
</div>
<p className="text-white">0.0068123546875413</p>
</div>
<div
onClick={() => {
setIsWalletPopupActive(false);
}}
className="w-full p-3 border border-white/25 bg-white/10 hover:bg-white/15 rounded-lg flex justify-between items-center cursor-pointer duration-200"
>
<div className="flex items-center gap-2.5">
<svg
width="31"
height="32"
viewBox="0 0 31 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
y="0.75"
width="30.5"
height="30.5"
rx="15.25"
fill="#FF007A"
/>
<g clipPath="url(#clip0_4_686)">
<path
d="M10.9321 7.08979C10.6482 7.046 10.6361 7.04147 10.7705 7.02183C11.0272 6.98257 11.6312 7.03543 12.048 7.13358C13.0205 7.36312 13.9054 7.95205 14.8507 8.99854L15.1014 9.2764L15.4608 9.21902C16.9739 8.9774 18.5112 9.16918 19.7993 9.75963C20.1542 9.92272 20.7129 10.2459 20.7809 10.3289C20.805 10.3561 20.8458 10.5252 20.8715 10.708C20.9681 11.3392 20.9213 11.8209 20.7265 12.1818C20.6208 12.3781 20.6148 12.44 20.6857 12.6092C20.7197 12.6788 20.7725 12.7376 20.8382 12.7787C20.9038 12.8198 20.9797 12.8416 21.0572 12.8417C21.3774 12.8417 21.7217 12.3283 21.8802 11.6125L21.9436 11.3271L22.069 11.4691C22.7591 12.2452 23.2997 13.3023 23.3918 14.0543L23.416 14.2506L23.3012 14.0725C23.1344 13.7995 22.9103 13.5661 22.6443 13.3884C22.1822 13.0849 21.693 12.9807 20.4003 12.9127C19.2315 12.8523 18.5701 12.7526 17.9147 12.5397C16.7988 12.1773 16.237 11.6971 14.9111 9.96953C14.3222 9.2009 13.9598 8.77656 13.5974 8.43528C12.7744 7.65758 11.9665 7.24986 10.9321 7.0913V7.08979Z"
fill="white"
/>
<path
d="M21.0519 8.80326C21.0806 8.28982 21.1501 7.95005 21.292 7.64049C21.3231 7.56225 21.3621 7.48737 21.4083 7.41699C21.4159 7.41699 21.3917 7.5076 21.3539 7.61783C21.2513 7.91985 21.2331 8.3306 21.3056 8.8093C21.3962 9.41635 21.4461 9.50394 22.0909 10.1593C22.3944 10.4674 22.7462 10.854 22.8746 11.0216L23.1072 11.3236L22.8746 11.1077C22.5907 10.8434 21.9383 10.3269 21.7934 10.2529C21.6967 10.2046 21.6816 10.2046 21.6227 10.2635C21.5669 10.3179 21.5563 10.3994 21.5472 10.786C21.5367 11.3885 21.4536 11.7751 21.2543 12.1602C21.1471 12.3716 21.1305 12.3263 21.2271 12.0892C21.2996 11.914 21.3071 11.8355 21.3071 11.2526C21.3071 10.0823 21.1652 9.79992 20.3452 9.31971C20.0979 9.17685 19.8439 9.04583 19.5841 8.92708C19.4561 8.87563 19.332 8.81507 19.2126 8.74587C19.2353 8.72322 20.0356 8.95578 20.3573 9.07809C20.8375 9.26232 20.916 9.28497 20.9749 9.26383C21.0127 9.24873 21.0323 9.13548 21.0504 8.80326H21.0519ZM11.4885 10.8071C10.9132 10.0189 10.5553 8.8093 10.6338 7.90475L10.6565 7.62538L10.7878 7.64804C11.0355 7.69334 11.4598 7.85039 11.6592 7.9712C12.2043 8.3004 12.4414 8.73379 12.6815 9.84824C12.7525 10.1744 12.8446 10.5429 12.8869 10.6697C12.9548 10.8706 13.2146 11.3402 13.4245 11.6452C13.5755 11.8657 13.4758 11.9699 13.1406 11.9397C12.6286 11.8944 11.9355 11.4187 11.4885 10.8071ZM20.3512 16.6769C17.6572 15.6002 16.7089 14.6639 16.7089 13.0859C16.7089 12.8533 16.7165 12.663 16.727 12.663C16.7361 12.663 16.8403 12.7386 16.9581 12.8337C17.5047 13.2686 18.1163 13.4543 19.8106 13.7005C20.8073 13.8454 21.366 13.9617 21.884 14.1324C23.53 14.6745 24.5463 15.7738 24.7894 17.2734C24.8589 17.7083 24.8196 18.5237 24.7033 18.9541C24.6127 19.2939 24.3379 19.9054 24.2654 19.9296C24.2443 19.9372 24.2246 19.8601 24.2201 19.7544C24.1929 19.1927 23.906 18.6445 23.4258 18.2338C22.8791 17.7672 22.1452 17.3957 20.3512 16.6784V16.6769ZM18.4606 17.1254C18.429 16.9341 18.3856 16.745 18.3307 16.5591L18.2613 16.3552L18.3896 16.4987C18.5663 16.695 18.7068 16.9472 18.8245 17.2839C18.9151 17.5406 18.9242 17.6161 18.9242 18.0329C18.9242 18.4422 18.9121 18.5282 18.8276 18.7578C18.7115 19.0982 18.517 19.4065 18.2598 19.6578C17.7675 20.1561 17.1348 20.431 16.2211 20.5457C16.0626 20.5654 15.6005 20.5986 15.1943 20.6197C14.1689 20.6726 13.4939 20.7828 12.8884 20.9942C12.8335 21.0183 12.7746 21.0322 12.7147 21.035C12.6906 21.0108 13.1043 20.7662 13.4441 20.6031C13.9243 20.3721 14.403 20.2467 15.4752 20.07C16.0037 19.9825 16.5519 19.8752 16.6908 19.833C18.0015 19.4343 18.6766 18.4029 18.4606 17.1254Z"
fill="white"
/>
<path
d="M19.695 19.3063C19.3371 18.5421 19.254 17.8037 19.4503 17.1151C19.4715 17.0396 19.5047 16.9807 19.5258 16.9807C19.5455 16.9807 19.6315 17.026 19.7131 17.0819C19.8792 17.1921 20.2084 17.3779 21.0903 17.8551C22.1896 18.4515 22.8178 18.9121 23.2437 19.4407C23.6167 19.9012 23.8477 20.4283 23.9595 21.0685C24.0229 21.431 23.9851 22.3068 23.8915 22.6722C23.5955 23.826 22.91 24.732 21.9284 25.2605C21.7849 25.3376 21.6566 25.401 21.6415 25.401C21.6279 25.401 21.6807 25.2696 21.7578 25.108C22.0885 24.4224 22.1262 23.7565 21.8771 23.015C21.723 22.5605 21.4119 22.0063 20.7837 21.0685C20.0529 19.9813 19.8747 19.6898 19.695 19.3063ZM9.57434 23.4333C10.5755 22.5937 11.8183 21.9987 12.9524 21.8145C13.5365 21.7396 14.1291 21.7626 14.7056 21.8825C15.4305 22.0667 16.0798 22.4805 16.4166 22.9712C16.7458 23.453 16.8877 23.8713 17.0357 24.8045C17.0931 25.1714 17.1565 25.5414 17.1746 25.6245C17.2849 26.1077 17.5008 26.4943 17.7666 26.6876C18.1894 26.9956 18.9203 27.0153 19.6376 26.7374C19.7121 26.7031 19.7908 26.6787 19.8717 26.6649C19.8973 26.6906 19.5364 26.9307 19.2827 27.0576C18.9817 27.2176 18.645 27.2987 18.3042 27.2931C17.6473 27.2931 17.1021 26.9609 16.6461 26.2844C16.4788 25.998 16.3296 25.7014 16.1991 25.3965C15.7189 24.3077 15.4818 23.977 14.9246 23.613C14.4383 23.2959 13.8117 23.24 13.3405 23.4696C12.7214 23.7716 12.5492 24.5568 12.9932 25.0552C13.2006 25.2693 13.4719 25.4103 13.7664 25.4569C13.8833 25.4729 14.0023 25.4636 14.1153 25.4296C14.2284 25.3955 14.3328 25.3376 14.4214 25.2597C14.5101 25.1818 14.5809 25.0857 14.6292 24.978C14.6775 24.8702 14.702 24.7534 14.7011 24.6354C14.7011 24.3077 14.5743 24.1219 14.2556 23.977C13.8192 23.7822 13.3526 24.0102 13.3541 24.4164C13.3541 24.5901 13.4311 24.6988 13.6063 24.7788C13.718 24.8287 13.7211 24.8317 13.6289 24.8136C13.2303 24.7305 13.1366 24.2518 13.4568 23.9347C13.8434 23.5541 14.6407 23.7218 14.914 24.2427C15.0288 24.4617 15.0424 24.8966 14.9427 25.1594C14.7162 25.7483 14.0638 26.0579 13.3994 25.8887C12.9464 25.774 12.7637 25.6501 12.2185 25.0929C11.2717 24.1234 10.9047 23.9347 9.53961 23.7233L9.27686 23.6825L9.57434 23.4333Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.12937 6.08256C8.2915 9.89705 10.4706 11.4706 10.7122 11.8028C10.9115 12.0776 10.836 12.3253 10.4947 12.5186C10.252 12.6405 9.98785 12.7139 9.71703 12.7345C9.49504 12.7345 9.41803 12.6499 9.41803 12.6499C9.28967 12.5291 9.21719 12.5503 8.55728 11.386C7.99623 10.5128 7.42842 9.64397 6.85389 8.77958C6.80557 8.73428 6.80708 8.73428 8.46516 11.6835C8.73245 12.2981 8.51801 12.5231 8.51801 12.6107C8.51801 12.7889 8.46818 12.8825 8.24771 13.1286C7.87925 13.5364 7.71465 13.9954 7.59535 14.9453C7.46246 16.0099 7.08796 16.7619 6.04901 18.05C5.44196 18.8036 5.34229 18.941 5.18826 19.246C4.99497 19.6281 4.94212 19.8425 4.92098 20.3242C4.89833 20.8361 4.94212 21.1653 5.09917 21.6531C5.23508 22.082 5.38004 22.3629 5.747 22.9276C6.06412 23.4154 6.24533 23.7778 6.24533 23.9198C6.24533 24.0315 6.26647 24.0315 6.75876 23.9213C7.93059 23.6585 8.88346 23.1964 9.41954 22.6271C9.75176 22.2753 9.82877 22.082 9.83179 21.6003C9.8333 21.2862 9.82273 21.2197 9.73666 21.0385C9.59773 20.744 9.34403 20.4979 8.7853 20.1173C8.0514 19.619 7.7373 19.2188 7.65273 18.6677C7.58025 18.2146 7.6633 17.896 8.06801 17.0519C8.48781 16.176 8.59201 15.803 8.66298 14.9226C8.70829 14.3533 8.7702 14.1283 8.9348 13.9471C9.10695 13.7599 9.26098 13.6964 9.68682 13.6391C10.38 13.5439 10.8194 13.3672 11.1818 13.035C11.3271 12.9151 11.4443 12.7648 11.5252 12.5947C11.6061 12.4246 11.6486 12.2388 11.6499 12.0504L11.665 11.7333L11.4884 11.531C10.8526 10.794 4.70352 5.50269 4.66426 5.50269C4.65671 5.50269 4.8651 5.76393 5.12937 6.08256ZM6.60322 20.9041C6.6725 20.7817 6.6931 20.6378 6.66091 20.5009C6.62872 20.364 6.54611 20.2443 6.42956 20.1657C6.20304 20.0147 5.84817 20.0871 5.84817 20.2819C5.84817 20.3424 5.88139 20.3861 5.9569 20.4239C6.08375 20.4888 6.09281 20.5613 5.99314 20.7108C5.89197 20.8603 5.90103 20.9917 6.01579 21.0823C6.20153 21.2258 6.46429 21.1472 6.60322 20.9041ZM12.1015 13.8067C11.7768 13.9048 11.4612 14.2476 11.3615 14.607C11.3026 14.826 11.3374 15.2111 11.4264 15.3288C11.5714 15.5206 11.7103 15.5705 12.0894 15.569C12.8293 15.5644 13.4726 15.2488 13.5481 14.8532C13.6085 14.53 13.3261 14.083 12.9365 13.8852C12.6719 13.7778 12.3815 13.7504 12.1015 13.8067ZM12.9683 14.4787C13.0815 14.3171 13.0317 14.1434 12.8369 14.0256C12.4684 13.8006 11.9082 13.9864 11.9082 14.3337C11.9082 14.5074 12.1996 14.6961 12.4669 14.6961C12.6451 14.6961 12.8897 14.5904 12.9683 14.4787Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_4_686">
<rect
width="21.1413"
height="22.6514"
fill="white"
transform="translate(4.66357 4.74731)"
/>
</clipPath>
</defs>
</svg>
<p className="font-mono font-medium text-white">
Uniswap <br /> <span className="font-semibold">UNI</span>
</p>
</div>
<p className="text-white">0.0068123546875413</p>
</div>
</div>
</div>
</div>
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
</div>
);
}

188
src/app/delegate/page.tsx Normal file
View File

@ -0,0 +1,188 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import logoImg from "@/assets/images/brand/logo.svg";
export default function Delegate() {
return (
<div className="p-2.5 h-[100svh]">
<main className="h-full grid grid-cols-[450px_auto]">
<div className="relative p-10 flex flex-col justify-between">
<div className="relative z-10">
<div>
<Link href={"/"} className="mb-20 flex items-center gap-2.5">
<Image src={logoImg} alt="" width={180} />
<p className="px-1.5 bg-[#09C04C] rounded-lg font-mono font-medium uppercase text-[#193818]">
Beta
</p>
</Link>
</div>
<p className="font-mono text-sm font-medium uppercase text-[#09C04C]">
Get Started
</p>
<h1 className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white">
Welcome
</h1>
<p className="text-white/75">
Collano is your intelligent companion for the BNB Smart Chain
ecosystem, revolutionizing how users interact with blockchain
technology through natural language understanding and automated
assistance.
</p>
</div>
<div className="relative z-10 w-full flex justify-between items-center">
<div className="flex gap-5">
<Link href={"/"} className="text-white/75">
Terms of Service
</Link>
<Link href={"/"} className="text-white/75">
Privacy Policy
</Link>
</div>
<div className="flex items-center gap-4">
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2719 1.58661H18.0831L11.9414 8.60619L19.1666 18.1582H13.5093L9.07834 12.365L4.00827 18.1582H1.19534L7.76451 10.65L0.833313 1.58661H6.63424L10.6395 6.88189L15.2719 1.58661ZM14.2852 16.4756H15.843L5.78781 3.18089H4.1162L14.2852 16.4756Z"
fill="white"
/>
</svg>
</Link>
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.42967 10.5292C9.39247 11.0849 9.87385 11.3627 10.4026 11.3632C10.9312 11.3636 11.4131 11.0866 12.3769 10.5326L18.5204 7.00114C18.7978 6.84173 18.9687 6.54622 18.9687 6.22631C18.9687 5.9064 18.7978 5.6109 18.5204 5.45148L12.3747 1.91871C11.4119 1.3653 10.9306 1.0886 10.4024 1.08881C9.87422 1.08901 9.39308 1.36609 8.43078 1.92025L3.14748 4.96274C3.10831 4.9853 3.08875 4.99656 3.07049 5.00723C1.26576 6.06373 0.150741 7.99253 0.135832 10.0837C0.135681 10.1048 0.135681 10.1274 0.135681 10.1726C0.135681 10.2178 0.135681 10.2403 0.135832 10.2614C0.150708 12.3502 1.26324 14.2772 3.06475 15.3346C3.08296 15.3453 3.1025 15.3565 3.14161 15.3791L6.45105 17.2899C8.37945 18.4033 9.34364 18.96 10.4025 18.9603C11.4613 18.9607 12.4259 18.4046 14.3551 17.2926L17.8486 15.2786C18.8146 14.7217 19.2976 14.4433 19.5628 13.9843C19.828 13.5253 19.828 12.9678 19.828 11.8528V9.69893C19.828 9.3896 19.6605 9.10456 19.3902 8.95403C19.1287 8.8084 18.81 8.81056 18.5505 8.95973L11.3869 13.0776C10.9063 13.3539 10.6659 13.492 10.4022 13.4921C10.1385 13.4922 9.89813 13.3542 9.41733 13.0782L4.56884 10.295C4.32598 10.1556 4.20453 10.0859 4.10699 10.0733C3.88462 10.0446 3.67081 10.1692 3.5861 10.3768C3.54896 10.4679 3.5497 10.6079 3.55121 10.8879C3.55231 11.0941 3.55287 11.1972 3.57213 11.292C3.6153 11.5043 3.72699 11.6966 3.8901 11.8392C3.96293 11.9029 4.05219 11.9544 4.23075 12.0575L9.41459 15.0494C9.89665 15.3276 10.1377 15.4667 10.4023 15.4668C10.667 15.4669 10.9081 15.3279 11.3903 15.0499L17.7441 11.3873C17.9088 11.2924 17.9912 11.2449 18.053 11.2806C18.1147 11.3163 18.1147 11.4113 18.1147 11.6014V12.5784C18.1147 12.8572 18.1147 12.9965 18.0484 13.1113C17.9821 13.226 17.8613 13.2957 17.6198 13.4349L12.3791 16.4558C11.4143 17.0119 10.9319 17.29 10.4024 17.2898C9.8729 17.2895 9.39074 17.011 8.42647 16.454L3.52336 13.6217C3.50779 13.6126 3.50001 13.6082 3.49275 13.6039C2.46469 13.0032 1.83034 11.9042 1.82439 10.7134C1.82435 10.705 1.82435 10.6961 1.82435 10.6781V9.78126C1.82435 9.12394 2.17443 8.5164 2.74312 8.18677C3.24564 7.89548 3.86548 7.8949 4.36853 8.18526L8.42967 10.5292Z"
fill="white"
/>
</svg>
</Link>
</div>
</div>
<Image
src={"/images/sidebar-icon.png"}
alt=""
width={550}
height={550}
className="absolute bottom-20 -right-20 opacity-20"
/>
</div>
<div
className="relative z-10 pt-[200px] bg-[#121A15] rounded-xl flex justify-center"
style={{
backgroundImage: `url("/images/body-bg.png")`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="w-full max-w-[780px] space-y-7">
<div className="w-full max-w-[550px]">
<p className="font-mono text-sm font-medium text-[#09C04C]">
Delegate
</p>
<h3 className="mt-1.5 mb-6 font-serif text-2xl font-bold text-white">
Delegate your wallet
</h3>
<div className="mb-5 w-full p-3 border border-white/25 bg-white/10 rounded-lg flex items-center gap-3">
<svg
width="27"
height="22"
viewBox="0 0 27 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.25 14.75V7.25"
stroke="white"
strokeWidth="1.875"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24.5416 7.25H21.2885C19.0581 7.25 17.25 8.92887 17.25 11C17.25 13.0711 19.0581 14.75 21.2885 14.75H24.5416C24.6459 14.75 24.6979 14.75 24.7419 14.7474C25.416 14.7063 25.9529 14.2078 25.9971 13.5818C26 13.5409 26 13.4925 26 13.3959V8.60412C26 8.5075 26 8.45907 25.9971 8.41825C25.9529 7.7923 25.416 7.2937 24.7419 7.25268C24.6979 7.25 24.6459 7.25 24.5416 7.25Z"
stroke="white"
strokeWidth="1.875"
/>
<path
d="M24.7062 7.25C24.6091 4.90962 24.2957 3.47469 23.2855 2.46446C21.8211 1 19.464 1 14.75 1H11C6.28595 1 3.92894 1 2.46446 2.46446C1 3.92894 1 6.28595 1 11C1 15.714 1 18.0711 2.46446 19.5355C3.92894 21 6.28595 21 11 21H14.75C19.464 21 21.8211 21 23.2855 19.5355C24.2957 18.5254 24.6091 17.0904 24.7062 14.75"
stroke="white"
strokeWidth="1.875"
/>
<path
d="M20.9888 11H21.0003"
stroke="white"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="font-medium text-white">
0x625EF1A576fAF469A0685871FAB46B9bE158ed49
</p>
</div>
<p className="mb-5 text-white/75">
After delegating your wallet, you would be able to access
Collano Labs AI, BNB CoPilot Program
</p>
<Link
href={"/dashboard/home"}
className="btn-bg w-fit py-2.5 px-10 rounded-lg flex items-center gap-4 font-dm text-lg font-semibold text-white duration-200"
>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 12.5C22 6.97715 17.5228 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0228 6.47715 22.5 12 22.5C17.5228 22.5 22 18.0228 22 12.5Z"
stroke="white"
strokeWidth="1.5"
/>
<path
d="M8 13L10.5 15.5L16 9.5"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="w-px h-[25px] bg-white block"></span>
Delegate
</Link>
</div>
</div>
</div>
</main>
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
</div>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

27
src/app/globals.css Normal file
View File

@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.btn-bg {
border: 1px solid #09c04c;
background: rgba(9, 192, 76, 0.15);
box-shadow: 0px 0px 20px 5px rgba(9, 192, 76, 0.25) inset;
}
.btn-bg:hover {
border-color: #d1ca0d;
background: rgba(209, 202, 13, 0.15);
box-shadow: 0px 0px 5px 4px rgba(209, 202, 13, 0.25),
0px 0px 20px 5px rgba(209, 202, 13, 0.25) inset;
}
.ca-bg {
border: 1px solid #d1ca0d;
background: rgba(209, 202, 13, 0.15);
box-shadow: 0px 0px 5px 4px rgba(209, 202, 13, 0.25),
0px 0px 20px 5px rgba(209, 202, 13, 0.25) inset;
}

58
src/app/layout.tsx Normal file
View File

@ -0,0 +1,58 @@
import type { Metadata } from "next";
import {
DM_Sans,
Geist,
Geist_Mono,
Plus_Jakarta_Sans,
} from "next/font/google";
import "./globals.css";
const dmSans = DM_Sans({
variable: "--font-dm-sans",
subsets: ["latin"],
});
const geist = Geist({
variable: "--font-geist",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
const plusJakartaSans = Plus_Jakarta_Sans({
variable: "--font-plus-jakarta-sans",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Collano",
description:
"Collano is your intelligent companion for the BNB Smart Chain ecosystem, revolutionizing how users interact with blockchain technology through natural language understanding and automated assistance.",
openGraph: {
type: "website",
url: "https://ai-proj-10.vercel.app",
title: "Collano",
description:
"Collano is your intelligent companion for the BNB Smart Chain ecosystem, revolutionizing how users interact with blockchain technology through natural language understanding and automated assistance.",
images: `https://ai-proj-10.vercel.app/og-banner.png`,
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${dmSans.variable} ${geist.className} ${geist.variable} ${geistMono.variable} ${plusJakartaSans.variable} antialiased min-h-[100svh] bg-[#063A19]`}
>
{children}
</body>
</html>
);
}

217
src/app/login/page.tsx Normal file
View File

@ -0,0 +1,217 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import logoImg from "@/assets/images/brand/logo.svg";
import { motion } from "motion/react";
export default function Login() {
return (
<div className="p-2.5 h-[100svh]">
<main className="h-full grid grid-cols-[450px_auto]">
<div className="relative p-10 flex flex-col justify-between">
<div className="relative z-10">
<motion.div
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25 }}
>
<Link href={"/"} className="mb-20 flex items-center gap-2.5">
<Image src={logoImg} alt="" width={180} />
<p className="px-1.5 bg-[#09C04C] rounded-lg font-mono font-medium uppercase text-[#193818]">
Beta
</p>
</Link>
</motion.div>
<motion.p
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.1 }}
className="font-mono text-sm font-medium uppercase text-[#09C04C]"
>
Get Started
</motion.p>
<motion.h1
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.2 }}
className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white"
>
Welcome
</motion.h1>
<motion.p
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.3 }}
className="text-white/75"
>
Collano is your intelligent companion for the BNB Smart Chain
ecosystem, revolutionizing how users interact with blockchain
technology through natural language understanding and automated
assistance.
</motion.p>
</div>
<div className="relative z-10 w-full flex justify-between items-center">
<motion.div
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.4 }}
className="flex gap-5"
>
<Link href={"/"} className="text-white/75">
Terms of Service
</Link>
<Link href={"/"} className="text-white/75">
Privacy Policy
</Link>
</motion.div>
<motion.div
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.5 }}
className="flex items-center gap-4"
>
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2719 1.58661H18.0831L11.9414 8.60619L19.1666 18.1582H13.5093L9.07834 12.365L4.00827 18.1582H1.19534L7.76451 10.65L0.833313 1.58661H6.63424L10.6395 6.88189L15.2719 1.58661ZM14.2852 16.4756H15.843L5.78781 3.18089H4.1162L14.2852 16.4756Z"
fill="white"
/>
</svg>
</Link>
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.42967 10.5292C9.39247 11.0849 9.87385 11.3627 10.4026 11.3632C10.9312 11.3636 11.4131 11.0866 12.3769 10.5326L18.5204 7.00114C18.7978 6.84173 18.9687 6.54622 18.9687 6.22631C18.9687 5.9064 18.7978 5.6109 18.5204 5.45148L12.3747 1.91871C11.4119 1.3653 10.9306 1.0886 10.4024 1.08881C9.87422 1.08901 9.39308 1.36609 8.43078 1.92025L3.14748 4.96274C3.10831 4.9853 3.08875 4.99656 3.07049 5.00723C1.26576 6.06373 0.150741 7.99253 0.135832 10.0837C0.135681 10.1048 0.135681 10.1274 0.135681 10.1726C0.135681 10.2178 0.135681 10.2403 0.135832 10.2614C0.150708 12.3502 1.26324 14.2772 3.06475 15.3346C3.08296 15.3453 3.1025 15.3565 3.14161 15.3791L6.45105 17.2899C8.37945 18.4033 9.34364 18.96 10.4025 18.9603C11.4613 18.9607 12.4259 18.4046 14.3551 17.2926L17.8486 15.2786C18.8146 14.7217 19.2976 14.4433 19.5628 13.9843C19.828 13.5253 19.828 12.9678 19.828 11.8528V9.69893C19.828 9.3896 19.6605 9.10456 19.3902 8.95403C19.1287 8.8084 18.81 8.81056 18.5505 8.95973L11.3869 13.0776C10.9063 13.3539 10.6659 13.492 10.4022 13.4921C10.1385 13.4922 9.89813 13.3542 9.41733 13.0782L4.56884 10.295C4.32598 10.1556 4.20453 10.0859 4.10699 10.0733C3.88462 10.0446 3.67081 10.1692 3.5861 10.3768C3.54896 10.4679 3.5497 10.6079 3.55121 10.8879C3.55231 11.0941 3.55287 11.1972 3.57213 11.292C3.6153 11.5043 3.72699 11.6966 3.8901 11.8392C3.96293 11.9029 4.05219 11.9544 4.23075 12.0575L9.41459 15.0494C9.89665 15.3276 10.1377 15.4667 10.4023 15.4668C10.667 15.4669 10.9081 15.3279 11.3903 15.0499L17.7441 11.3873C17.9088 11.2924 17.9912 11.2449 18.053 11.2806C18.1147 11.3163 18.1147 11.4113 18.1147 11.6014V12.5784C18.1147 12.8572 18.1147 12.9965 18.0484 13.1113C17.9821 13.226 17.8613 13.2957 17.6198 13.4349L12.3791 16.4558C11.4143 17.0119 10.9319 17.29 10.4024 17.2898C9.8729 17.2895 9.39074 17.011 8.42647 16.454L3.52336 13.6217C3.50779 13.6126 3.50001 13.6082 3.49275 13.6039C2.46469 13.0032 1.83034 11.9042 1.82439 10.7134C1.82435 10.705 1.82435 10.6961 1.82435 10.6781V9.78126C1.82435 9.12394 2.17443 8.5164 2.74312 8.18677C3.24564 7.89548 3.86548 7.8949 4.36853 8.18526L8.42967 10.5292Z"
fill="white"
/>
</svg>
</Link>
</motion.div>
</div>
<Image
src={"/images/sidebar-icon.png"}
alt=""
width={550}
height={550}
className="absolute bottom-20 -right-20 opacity-20"
/>
</div>
<div
className="relative z-10 pt-[200px] bg-[#121A15] rounded-xl flex justify-center"
style={{
backgroundImage: `url("/images/body-bg.png")`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="w-full max-w-[780px] space-y-7">
<div>
<motion.p
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.1 }}
className="font-mono text-sm font-medium uppercase text-[#09C04C]"
>
Authenticate
</motion.p>
<motion.h1
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.2 }}
className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white"
>
Sign in to your account
</motion.h1>
<motion.p
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.3 }}
className="mb-5 text-white/75"
>
By proceeding you agree to our{" "}
<Link href={"/"} className="text-[#09C04C]/75 hover:underline">
Terms of Service
</Link>{" "}
and{" "}
<Link href={"/"} className="text-[#09C04C]/75 hover:underline">
Privacy Policy.
</Link>
</motion.p>
<motion.div
initial={{ y: -25, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.25, delay: 0.4 }}
>
<Link
href={"/delegate"}
className="btn-bg w-fit py-2.5 px-10 rounded-lg flex items-center gap-4 font-dm text-lg font-semibold text-white duration-200"
>
Log In
<span className="w-px h-[25px] bg-white block"></span>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 3.59502C10.457 3.53241 10.9245 3.5 11.4 3.5C16.7019 3.5 21 7.52944 21 12.5C21 17.4706 16.7019 21.5 11.4 21.5C10.9245 21.5 10.457 21.4676 10 21.405"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M10.5 15C11.0057 14.5085 13 13.2002 13 12.5M13 12.5C13 11.7998 11.0057 10.4915 10.5 10M13 12.5H3"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Link>
</motion.div>
</div>
</div>
</div>
</main>
<div className="absolute -z-10 -top-1/3 -left-[180px] w-[750px] h-[750px] bg-[#6B6700] blur-[150px] rounded-full"></div>
</div>
);
}

BIN
src/assets/images/brand/footer-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

10
src/assets/images/brand/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 392 KiB

6
src/assets/images/feature-1.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M15.6498 53.471H15C12.643 53.471 11.4645 53.471 10.7322 52.7388C10 52.0065 10 50.828 10 48.471V45.691C10 44.3948 10 43.7468 10.333 43.168C10.6659 42.589 11.1682 42.297 12.1727 41.7128C18.7864 37.866 28.1787 35.7008 34.4477 39.4398C34.8687 39.691 35.2477 39.9943 35.5712 40.3578C36.9665 41.925 36.865 44.2903 35.257 45.6938C34.9172 45.99 34.5555 46.215 34.191 46.293C34.4905 46.2583 34.7775 46.2185 35.0515 46.1748C37.33 45.8113 39.2425 44.5938 40.9935 43.271L45.5115 39.8583C47.1042 38.655 49.4682 38.6548 51.0612 39.8575C52.4955 40.9405 52.934 42.7235 52.0272 44.1768C50.97 45.8718 49.4802 48.04 48.0497 49.3648C46.6172 50.6915 44.4847 51.876 42.7437 52.7163C40.815 53.6473 38.6845 54.1835 36.5172 54.5345C32.122 55.2458 27.5415 55.1373 23.1908 54.241C20.7313 53.7343 18.177 53.471 15.6498 53.471Z" fill="#09C04C"/>
<path d="M27.1532 8.40837C28.4197 6.13612 29.0532 5 30 5C30.9467 5 31.5802 6.13612 32.8467 8.40837L33.1745 8.99622C33.5345 9.64192 33.7145 9.96477 33.995 10.1778C34.2757 10.3908 34.6252 10.4699 35.324 10.6281L35.9605 10.772C38.4202 11.3286 39.65 11.6068 39.9425 12.5477C40.2352 13.4887 39.3967 14.4691 37.72 16.4299L37.286 16.9372C36.8095 17.4944 36.5712 17.773 36.4642 18.1177C36.357 18.4624 36.393 18.8341 36.465 19.5775L36.5305 20.2544C36.784 22.8706 36.911 24.1787 36.1447 24.7602C35.3787 25.3417 34.2272 24.8116 31.9242 23.7512L31.3285 23.4769C30.674 23.1755 30.3467 23.0248 30 23.0248C29.6532 23.0248 29.326 23.1755 28.6715 23.4769L28.0757 23.7512C25.7727 24.8116 24.6212 25.3417 23.8551 24.7602C23.0891 24.1787 23.2159 22.8706 23.4694 20.2544L23.535 19.5775C23.607 18.8341 23.643 18.4624 23.5359 18.1177C23.4287 17.773 23.1904 17.4944 22.7139 16.9372L22.2801 16.4299C20.6032 14.4691 19.7648 13.4887 20.0574 12.5477C20.35 11.6068 21.5798 11.3286 24.0395 10.772L24.6759 10.6281C25.3747 10.4699 25.7242 10.3908 26.005 10.1778C26.2855 9.96477 26.4655 9.64192 26.8255 8.99622L27.1532 8.40837Z" fill="#09C04C"/>
<path d="M48.5765 19.2042C49.21 18.0681 49.5265 17.5 50 17.5C50.4735 17.5 50.79 18.0681 51.4235 19.2042L51.5873 19.4981C51.7673 19.821 51.8573 19.9824 51.9975 20.0889C52.1378 20.1954 52.3125 20.235 52.662 20.314L52.9803 20.386C54.21 20.6643 54.825 20.8034 54.9713 21.2739C55.1175 21.7443 54.6985 22.2345 53.86 23.215L53.643 23.4686C53.4048 23.7472 53.2858 23.8865 53.232 24.0589C53.1785 24.2312 53.1965 24.4171 53.2325 24.7888L53.2653 25.1273C53.392 26.4353 53.4555 27.0892 53.0725 27.38C52.6895 27.6707 52.1138 27.4058 50.9623 26.8755L50.6643 26.7385C50.337 26.5878 50.1735 26.5125 50 26.5125C49.8265 26.5125 49.663 26.5878 49.3358 26.7385L49.0378 26.8755C47.8863 27.4058 47.3105 27.6707 46.9275 27.38C46.5445 27.0892 46.608 26.4353 46.7348 25.1273L46.7675 24.7888C46.8035 24.4171 46.8215 24.2312 46.768 24.0589C46.7143 23.8865 46.5953 23.7472 46.357 23.4686L46.14 23.215C45.3018 22.2345 44.8825 21.7443 45.0288 21.2739C45.175 20.8034 45.79 20.6643 47.0198 20.386L47.338 20.314C47.6875 20.235 47.8623 20.1954 48.0025 20.0889C48.1428 19.9824 48.2328 19.821 48.4128 19.4981L48.5765 19.2042Z" fill="#09C04C"/>
<path d="M8.57659 19.2042C9.20991 18.0681 9.52659 17.5 10 17.5C10.4734 17.5 10.7901 18.0681 11.4234 19.2042L11.5873 19.4981C11.7673 19.821 11.8572 19.9824 11.9975 20.0889C12.1378 20.1954 12.3126 20.235 12.6621 20.314L12.9802 20.386C14.2101 20.6643 14.825 20.8034 14.9713 21.2739C15.1176 21.7443 14.6984 22.2345 13.86 23.215L13.6431 23.4686C13.4048 23.7472 13.2857 23.8865 13.2321 24.0589C13.1785 24.2312 13.1965 24.4171 13.2325 24.7888L13.2653 25.1273C13.3921 26.4353 13.4555 27.0892 13.0724 27.38C12.6894 27.6707 12.1137 27.4058 10.9622 26.8755L10.6643 26.7385C10.337 26.5878 10.1734 26.5125 10 26.5125C9.82659 26.5125 9.66298 26.5878 9.33576 26.7385L9.03784 26.8755C7.88636 27.4058 7.31061 27.6707 6.92759 27.38C6.54456 27.0892 6.60796 26.4353 6.73471 25.1273L6.76751 24.7888C6.80354 24.4171 6.82154 24.2312 6.76794 24.0589C6.71436 23.8865 6.59524 23.7472 6.35696 23.4686L6.14006 23.215C5.30164 22.2345 4.88241 21.7443 5.02871 21.2739C5.17501 20.8034 5.78994 20.6643 7.01979 20.386L7.33796 20.314C7.68744 20.235 7.86219 20.1954 8.00249 20.0889C8.14279 19.9824 8.23278 19.821 8.41273 19.4981L8.57659 19.2042Z" fill="#09C04C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

6
src/assets/images/feature-2.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M7.92892 7.92892C5 10.8579 5 15.5719 5 25V35C5 44.428 5 49.1422 7.92892 52.071C10.8579 55 15.5719 55 25 55H35C44.428 55 49.1422 55 52.071 52.071C55 49.1422 55 44.428 55 35V25C55 15.5719 55 10.8579 52.071 7.92892C49.1422 5 44.428 5 35 5H25C15.5719 5 10.8579 5 7.92892 7.92892Z" fill="#09C04C"/>
<path d="M19.7824 21.7925C20.2372 20.2876 21.0194 18.983 21.8669 18.0839C22.7679 17.128 23.4946 16.875 23.8067 16.875C24.5709 16.875 25.5968 17.3191 26.5328 19.4157C27.4793 21.5364 28.1253 24.9839 28.1253 30C28.1253 35.247 28.7875 39.2995 30.0433 42.113C31.3098 44.9505 33.3805 46.875 36.1933 46.875C38.0035 46.875 39.6515 45.7725 40.862 44.4882C42.126 43.1472 43.1923 41.3267 43.8073 39.2925C44.107 38.3012 43.5463 37.2547 42.555 36.9552C41.5638 36.6555 40.5173 37.2162 40.2178 38.2075C39.7628 39.7122 38.9808 41.017 38.1333 41.916C37.2323 42.872 36.5055 43.125 36.1933 43.125C35.4293 43.125 34.4033 42.681 33.4675 40.5845C32.521 38.4637 31.8753 35.0162 31.8753 30C31.8753 24.7532 31.2128 20.7007 29.957 17.8871C28.6903 15.0494 26.6195 13.125 23.8067 13.125C21.9966 13.125 20.3486 14.2274 19.138 15.5117C17.874 16.8528 16.8077 18.6732 16.1928 20.7075C15.8931 21.6987 16.4538 22.7452 17.445 23.0448C18.4363 23.3444 19.4827 22.7837 19.7824 21.7925Z" fill="#09C04C"/>
<path d="M15 28.125C13.9645 28.125 13.125 28.9645 13.125 30C13.125 31.0355 13.9645 31.875 15 31.875H23.75C24.7855 31.875 25.625 31.0355 25.625 30C25.625 28.9645 24.7855 28.125 23.75 28.125H15Z" fill="#09C04C"/>
<path d="M36.25 28.125C35.2145 28.125 34.375 28.9645 34.375 30C34.375 31.0355 35.2145 31.875 36.25 31.875H45C46.0355 31.875 46.875 31.0355 46.875 30C46.875 28.9645 46.0355 28.125 45 28.125H36.25Z" fill="#09C04C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
src/assets/images/feature-3.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.0557 51.5453C25.4447 53.8488 27.6392 55.0003 30 55.0003V30.0003L6.59505 17.6819C6.56057 17.7373 6.52675 17.7932 6.4935 17.8497C5 20.3859 5 23.542 5 29.854V30.1465C5 36.4585 5 39.6148 6.4935 42.151C7.98697 44.6873 10.6766 46.0988 16.0557 48.9215L21.0557 51.5453Z" fill="#09C04C"/>
<path opacity="0.7" d="M43.9435 11.0788L38.9435 8.45492C34.5545 6.15165 32.36 5 29.9992 5C27.6385 5 25.444 6.15165 21.0549 8.45492L16.0549 11.0788C10.7955 13.8388 8.10726 15.2495 6.59424 17.6816L29.9992 30L53.4042 17.6816C51.891 15.2495 49.2027 13.8388 43.9435 11.0788Z" fill="#09C04C"/>
<path opacity="0.5" d="M53.5065 17.8497C53.4732 17.7932 53.4395 17.7373 53.405 17.6819L30 30.0003V55.0003C32.3607 55.0003 34.5552 53.8488 38.9442 51.5453L43.9442 48.9215C49.3235 46.0988 52.013 44.6873 53.5065 42.151C55 39.6148 55 36.4585 55 30.1465V29.854C55 23.542 55 20.3859 53.5065 17.8497Z" fill="#09C04C"/>
<path d="M15.8084 11.2095C15.8904 11.1664 15.9732 11.123 16.0565 11.0793L19.7904 9.11987L42.5423 21.6334L52.6015 16.6038C52.9458 16.9936 53.245 17.4044 53.5073 17.8498C53.8813 18.4849 54.1615 19.1588 54.3718 19.9114L44.3758 24.9093V32.5005C44.3758 33.536 43.5363 34.3755 42.5008 34.3755C41.4653 34.3755 40.6258 33.536 40.6258 32.5005V26.7842L31.8758 31.1592V54.7605C31.2335 54.9205 30.623 55.0005 30.0008 55.0005C29.3788 55.0005 28.768 54.9205 28.1258 54.7605V31.1592L5.62988 19.9114C5.84003 19.1588 6.12033 18.4849 6.49428 17.8498C6.75661 17.4044 7.05581 16.9936 7.40003 16.6038L30.0008 27.9042L38.4663 23.6714L15.8084 11.2095Z" fill="#09C04C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/images/feature-4.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8292 14.4283L14.1738 24.7859C10.962 29.1315 9.35611 31.3043 10.241 33.0125C10.2556 33.041 10.2707 33.069 10.2863 33.0968C11.2236 34.7793 13.9972 34.7793 19.5444 34.7793C22.627 34.7793 24.1683 34.7793 25.135 35.6885L25.185 35.7365L34.865 24.3117L34.815 24.2635C33.8685 23.3347 33.8685 21.8538 33.8685 18.8921V18.1178C33.8685 9.90623 33.8685 5.80046 31.5603 5.09303C29.2518 4.38563 26.7775 7.73318 21.8292 14.4283Z" fill="#09C04C"/>
<path opacity="0.5" d="M26.1318 41.108V41.882C26.1318 50.0935 26.1318 54.1995 28.44 54.9067C30.7485 55.6142 33.2228 52.2667 38.1713 45.5715L45.8265 35.214C49.0385 30.8685 50.6443 28.6957 49.7595 26.9872C49.7448 26.959 49.7298 26.931 49.7143 26.9032C48.7768 25.2207 46.0033 25.2207 40.456 25.2207C37.3735 25.2207 35.8323 25.2207 34.8655 24.3115L25.1855 35.7365C26.132 36.6652 26.1318 38.1462 26.1318 41.108Z" fill="#09C04C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

9
src/assets/images/feature-5.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M30.0015 40C15.6017 40 13.0508 25.6488 12.5989 14.2662C12.4732 11.0999 12.4103 9.51682 13.5996 8.05207C14.7889 6.58735 16.2123 6.34718 19.0592 5.86685C21.8693 5.39273 25.5427 5 30.0015 5C34.4605 5 38.134 5.39273 40.944 5.86685C43.7907 6.34718 45.2142 6.58735 46.4035 8.05207C47.5927 9.51682 47.53 11.0999 47.4042 14.2662C46.9525 25.6488 44.4015 40 30.0015 40Z" fill="#09C04C"/>
<path d="M44.101 31.055L51.1422 27.143C53.0232 26.098 53.9637 25.5755 54.4817 24.6952C54.9997 23.8149 54.9997 22.739 54.9997 20.5872V20.4059C55 17.7968 55 16.4923 54.292 15.5102C53.5842 14.5281 52.3467 14.1156 49.8715 13.2905L47.5 12.5L47.4577 12.7116C47.446 13.1848 47.4255 13.7002 47.403 14.2661C47.1822 19.8271 46.4605 26.0968 44.101 31.055Z" fill="#09C04C"/>
<path d="M12.5977 14.2662C12.8185 19.8274 13.5403 26.0972 15.9002 31.0557L8.85763 27.143C6.97658 26.098 6.03605 25.5755 5.51808 24.6952C5.0001 23.8149 5.00008 22.739 5 20.5872V20.4058C4.99993 17.7969 4.9999 16.4923 5.70775 15.5102C6.4156 14.5281 7.65315 14.1156 10.1283 13.2905L12.4999 12.5L12.5432 12.7168C12.5549 13.1885 12.5753 13.7022 12.5977 14.2662Z" fill="#09C04C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.125 55C13.125 53.9645 13.9645 53.125 15 53.125H45C46.0355 53.125 46.875 53.9645 46.875 55C46.875 56.0355 46.0355 56.875 45 56.875H15C13.9645 56.875 13.125 56.0355 13.125 55Z" fill="#09C04C"/>
<path opacity="0.5" d="M38.6455 53.125H21.3574L22.0995 48.7505C22.3332 47.5817 23.3592 46.7407 24.5509 46.7407H35.452C36.6435 46.7407 37.6697 47.5817 37.9032 48.7505L38.6455 53.125Z" fill="#09C04C"/>
<path d="M30.0005 40.0006C29.3515 40.0006 28.7268 39.9713 28.125 39.9146V46.7408H31.875V39.9146C31.2735 39.9713 30.649 40.0006 30.0005 40.0006Z" fill="#09C04C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9675 14.5178C32.6682 14.808 33.125 15.4917 33.125 16.2501V26.25C33.125 27.2855 32.2855 28.125 31.25 28.125C30.2145 28.125 29.375 27.2855 29.375 26.25V20.7767L28.8257 21.3259C28.0935 22.0581 26.9065 22.0581 26.1742 21.3259C25.442 20.5936 25.442 19.4065 26.1742 18.6742L29.9242 14.9242C30.4605 14.388 31.267 14.2276 31.9675 14.5178Z" fill="#09C04C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/hero-section-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/images/hero-section-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
src/assets/images/hero-section-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/images/hero-section-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
src/assets/images/tokenomics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 469 KiB

63
src/components/Footer.tsx Normal file
View File

@ -0,0 +1,63 @@
import Image from "next/image";
import logoImg from "@/assets/images/brand/footer-logo.png";
import Link from "next/link";
export default function Footer() {
return (
<footer className="pt-28">
<div className="mx-auto container max-w-[1110px] px-8">
<div className="relative mt-8 mb-12 flex justify-between items-center">
<div className="absolute -top-8 left-0 w-full border-t border-[#09C04C]"></div>
<p className="text-white/75">© 2025 Collano Labs</p>
<div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 flex items-center gap-4">
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.2719 1.58661H18.0831L11.9414 8.60619L19.1666 18.1582H13.5093L9.07834 12.365L4.00827 18.1582H1.19534L7.76451 10.65L0.833313 1.58661H6.63424L10.6395 6.88189L15.2719 1.58661ZM14.2852 16.4756H15.843L5.78781 3.18089H4.1162L14.2852 16.4756Z"
fill="white"
/>
</svg>
</Link>
<Link href={"/"} className="flex">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.42967 10.5292C9.39247 11.0849 9.87385 11.3627 10.4026 11.3632C10.9312 11.3636 11.4131 11.0866 12.3769 10.5326L18.5204 7.00114C18.7978 6.84173 18.9687 6.54622 18.9687 6.22631C18.9687 5.9064 18.7978 5.6109 18.5204 5.45148L12.3747 1.91871C11.4119 1.3653 10.9306 1.0886 10.4024 1.08881C9.87422 1.08901 9.39308 1.36609 8.43078 1.92025L3.14748 4.96274C3.10831 4.9853 3.08875 4.99656 3.07049 5.00723C1.26576 6.06373 0.150741 7.99253 0.135832 10.0837C0.135681 10.1048 0.135681 10.1274 0.135681 10.1726C0.135681 10.2178 0.135681 10.2403 0.135832 10.2614C0.150708 12.3502 1.26324 14.2772 3.06475 15.3346C3.08296 15.3453 3.1025 15.3565 3.14161 15.3791L6.45105 17.2899C8.37945 18.4033 9.34364 18.96 10.4025 18.9603C11.4613 18.9607 12.4259 18.4046 14.3551 17.2926L17.8486 15.2786C18.8146 14.7217 19.2976 14.4433 19.5628 13.9843C19.828 13.5253 19.828 12.9678 19.828 11.8528V9.69893C19.828 9.3896 19.6605 9.10456 19.3902 8.95403C19.1287 8.8084 18.81 8.81056 18.5505 8.95973L11.3869 13.0776C10.9063 13.3539 10.6659 13.492 10.4022 13.4921C10.1385 13.4922 9.89813 13.3542 9.41733 13.0782L4.56884 10.295C4.32598 10.1556 4.20453 10.0859 4.10699 10.0733C3.88462 10.0446 3.67081 10.1692 3.5861 10.3768C3.54896 10.4679 3.5497 10.6079 3.55121 10.8879C3.55231 11.0941 3.55287 11.1972 3.57213 11.292C3.6153 11.5043 3.72699 11.6966 3.8901 11.8392C3.96293 11.9029 4.05219 11.9544 4.23075 12.0575L9.41459 15.0494C9.89665 15.3276 10.1377 15.4667 10.4023 15.4668C10.667 15.4669 10.9081 15.3279 11.3903 15.0499L17.7441 11.3873C17.9088 11.2924 17.9912 11.2449 18.053 11.2806C18.1147 11.3163 18.1147 11.4113 18.1147 11.6014V12.5784C18.1147 12.8572 18.1147 12.9965 18.0484 13.1113C17.9821 13.226 17.8613 13.2957 17.6198 13.4349L12.3791 16.4558C11.4143 17.0119 10.9319 17.29 10.4024 17.2898C9.8729 17.2895 9.39074 17.011 8.42647 16.454L3.52336 13.6217C3.50779 13.6126 3.50001 13.6082 3.49275 13.6039C2.46469 13.0032 1.83034 11.9042 1.82439 10.7134C1.82435 10.705 1.82435 10.6961 1.82435 10.6781V9.78126C1.82435 9.12394 2.17443 8.5164 2.74312 8.18677C3.24564 7.89548 3.86548 7.8949 4.36853 8.18526L8.42967 10.5292Z"
fill="white"
/>
</svg>
</Link>
</div>
<div className="flex items-center gap-5">
<Link href={"/"} className="text-white/75">
Terms of Service
</Link>
<span className="w-[4px] h-[4px] bg-[#d9d9d9]/75 rounded-full"></span>
<Link href={"/"} className="text-white/75">
Privacy Policy
</Link>
</div>
</div>
<Image src={logoImg} alt="" className="w-full opacity-25" />
</div>
</footer>
);
}

50
src/components/Navbar.tsx Normal file
View File

@ -0,0 +1,50 @@
import Link from "next/link";
import Image from "next/image";
import logoImg from "@/assets/images/brand/logo.svg";
export default function Navbar() {
return (
<nav className="fixed z-[1000] top-10 left-0 w-full">
<div className="mx-auto container max-w-[1110px] px-8">
<div className="p-5 border border-white/10 bg-white/10 backdrop-blur-2xl rounded-xl flex justify-between items-center">
<Link href={"/"} className="flex">
<Image src={logoImg} alt="" width={135} />
</Link>
<ul className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 flex gap-9">
<li>
<Link href={"#features"} className="text-base text-white">
Features
</Link>
</li>
<li>
<Link href={"#roadmap"} className="text-base text-white">
Roadmap
</Link>
</li>
<li>
<Link href={"#tokenomics"} className="text-base text-white">
Tokenomics
</Link>
</li>
<li>
<Link href={"#faqs"} className="text-base text-white">
FAQs
</Link>
</li>
</ul>
<Link
href={"/login"}
className="btn-bg w-fit py-1.5 px-6 rounded-lg flex items-center gap-4 font-dm text-lg font-semibold text-white duration-200"
>
Get Started
</Link>
</div>
</div>
</nav>
);
}

54
src/components/ui/colourful-text.tsx Normal file
View File

@ -0,0 +1,54 @@
"use client";
import React from "react";
import { motion } from "motion/react";
export function ColourfulText({ text }: { text: string }) {
const colors = [
"rgb(131, 179, 32)",
"rgb(47, 195, 106)",
"rgb(42, 169, 210)",
"rgb(4, 112, 202)",
"rgb(107, 10, 255)",
"rgb(183, 0, 218)",
"rgb(218, 0, 171)",
"rgb(230, 64, 92)",
"rgb(232, 98, 63)",
"rgb(249, 129, 47)",
];
const [currentColors, setCurrentColors] = React.useState(colors);
const [count, setCount] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
const shuffled = [...colors].sort(() => Math.random() - 0.5);
setCurrentColors(shuffled);
setCount((prev) => prev + 1);
}, 5000);
return () => clearInterval(interval);
}, []);
return text.split("").map((char, index) => (
<motion.span
key={`${char}-${count}-${index}`}
initial={{
y: 0,
}}
animate={{
color: currentColors[index % currentColors.length],
y: [0, -3, 0],
scale: [1, 1.01, 1],
filter: ["blur(0px)", `blur(5px)`, "blur(0px)"],
opacity: [1, 0.8, 1],
}}
transition={{
duration: 0.5,
delay: index * 0.05,
}}
className="inline-block whitespace-pre font-sans tracking-tight"
>
{char}
</motion.span>
));
}

6
src/lib/utils.ts Normal file
View File

@ -0,0 +1,6 @@
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

20
tailwind.config.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Config } from "tailwindcss";
export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: {
dm: ["var(--font-dm-sans)"],
sans: ["var(--font-geist)"],
mono: ["var(--font-geist-mono)"],
serif: ["var(--font-plus-jakarta-sans)"],
},
},
},
plugins: [],
} satisfies Config;

27
tsconfig.json Normal file
View File

@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}