final ui
This commit is contained in:
parent
99a60c5b80
commit
0b0089a7f3
@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useRef, useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
interface IFAQ {
|
||||
question: string;
|
||||
@ -17,7 +18,11 @@ function FAQ({ question, answer }: IFAQ) {
|
||||
className="py-4 border-b border-white/10 cursor-pointer overflow-hidden"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<p
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className={`flex items-center gap-2 text-lg ${
|
||||
isActive ? "text-white" : "text-white/75"
|
||||
}`}
|
||||
@ -39,7 +44,7 @@ function FAQ({ question, answer }: IFAQ) {
|
||||
/>
|
||||
</svg>
|
||||
{question}
|
||||
</p>
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -57,12 +62,16 @@ function FAQ({ question, answer }: IFAQ) {
|
||||
: "0px",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: answer,
|
||||
}}
|
||||
className="text-white/75"
|
||||
></p>
|
||||
></motion.p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -100,17 +109,35 @@ export default function FAQsSection() {
|
||||
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]">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-2 font-mono text-sm font-medium text-[#09C04C]"
|
||||
>
|
||||
FAQs
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
|
||||
<motion.h2
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mb-3 font-serif text-4xl font-bold text-white"
|
||||
>
|
||||
Frequently Asked Question
|
||||
</h2>
|
||||
</motion.h2>
|
||||
|
||||
<p className="mb-4 text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mb-4 text-white/75"
|
||||
>
|
||||
Answers to all your most asked questions
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<div className="mb-12 w-full">
|
||||
{faqs.map((faq, index) => (
|
||||
@ -118,12 +145,18 @@ export default function FAQsSection() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-center text-white">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="text-lg text-center text-white"
|
||||
>
|
||||
Still have questions? <br /> Reach out to{" "}
|
||||
<Link href={"/"} className="text-[#09C04C]">
|
||||
support@collano.ai
|
||||
</Link>
|
||||
</p>
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -6,6 +6,8 @@ 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";
|
||||
import { GlareCard } from "@/components/ui/glare-card";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
interface IFeature {
|
||||
img: JSX.Element;
|
||||
@ -50,58 +52,77 @@ export default function FeaturesSection() {
|
||||
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]">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]"
|
||||
>
|
||||
Key Features
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
|
||||
<motion.h2
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mb-3 font-serif text-4xl font-bold text-white"
|
||||
>
|
||||
The Intelligence Layer for BNB Smart Chain
|
||||
</h2>
|
||||
</motion.h2>
|
||||
|
||||
<p className="mb-12 text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
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've created an intelligent interface that
|
||||
understands your <br /> needs and executes complex blockchain
|
||||
operations with unprecedented ease.
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<div className="grid grid-cols-4 gap-5">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
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 key={index} className={`${index === 4 ? "col-span-4" : ""}`}>
|
||||
<GlareCard index={index}>
|
||||
{feature.img}
|
||||
|
||||
<div
|
||||
className={`flex flex-col ${
|
||||
index !== 4 ? "items-center" : ""
|
||||
}`}
|
||||
>
|
||||
<h3
|
||||
className={`mb-2 font-serif text-2xl font-bold text-white`}
|
||||
<div
|
||||
className={`flex flex-col ${
|
||||
index !== 4 ? "items-center" : ""
|
||||
}`}
|
||||
>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<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>
|
||||
<p
|
||||
className={`${
|
||||
index !== 4 ? "text-center" : ""
|
||||
} text-white/75`}
|
||||
>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</GlareCard>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ColourfulText } from "@/components/ui/colourful-text";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
@ -6,59 +7,121 @@ 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";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function HeroSection() {
|
||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
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>
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
"4H5RiKf7N5Ji7jbozjccG8SqTq3zQbnGXAtdyNL5MugC"
|
||||
);
|
||||
setIsCopied(true);
|
||||
}}
|
||||
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 cursor-pointer"
|
||||
>
|
||||
CA :{" "}
|
||||
{isCopied
|
||||
? "Copied!"
|
||||
: "4H5RiKf7N5Ji7jbozjccG8SqTq3zQbnGXAtdyNL5MugC"}{" "}
|
||||
</motion.div>
|
||||
|
||||
<h1 className="font-serif text-7xl font-bold text-center text-white">
|
||||
<motion.h1
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="font-serif text-7xl font-bold text-center text-white"
|
||||
>
|
||||
Your Intelligent Copilot <br /> for{" "}
|
||||
<ColourfulText text="BNB Smart Chain" />
|
||||
</h1>
|
||||
</motion.h1>
|
||||
|
||||
<p className="text-xl text-center text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
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>
|
||||
</motion.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"
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-fit"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<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>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
src={img1}
|
||||
alt=""
|
||||
className="absolute top-5 -left-20 w-[185px]"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ y: -25, scale: 0, opacity: 0 }}
|
||||
whileInView={{ y: 0, scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="absolute top-5 -left-20 w-fit h-fit"
|
||||
>
|
||||
<Image src={img1} alt="" className="w-[185px]" />
|
||||
</motion.div>
|
||||
|
||||
<Image
|
||||
src={img2}
|
||||
alt=""
|
||||
className="absolute -bottom-14 left-0 w-[185px]"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ y: -25, scale: 0, opacity: 0 }}
|
||||
whileInView={{ y: 0, scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1 }}
|
||||
className="absolute -bottom-14 left-0 w-fit h-fit"
|
||||
>
|
||||
<Image src={img2} alt="" className="w-[185px]" />
|
||||
</motion.div>
|
||||
|
||||
<Image
|
||||
src={img3}
|
||||
alt=""
|
||||
className="absolute top-20 -right-20 w-[185px]"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ y: -25, scale: 0, opacity: 0 }}
|
||||
whileInView={{ y: 0, scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="absolute top-20 -right-20 w-fit h-fit"
|
||||
>
|
||||
<Image src={img3} alt="" className=" w-[185px]" />
|
||||
</motion.div>
|
||||
|
||||
<Image
|
||||
src={img4}
|
||||
alt=""
|
||||
className="absolute -bottom-14 right-0 w-[155px]"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ y: -25, scale: 0, opacity: 0 }}
|
||||
whileInView={{ y: 0, scale: 1, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1.2 }}
|
||||
className="absolute -bottom-14 right-0 w-fit h-fit"
|
||||
>
|
||||
<Image src={img4} alt="" className="w-[155px]" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
67
src/app/(home)/MobileSection.tsx
Normal file
67
src/app/(home)/MobileSection.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import mobileImg from "@/assets/images/mobile.png";
|
||||
|
||||
export default function MobileSection() {
|
||||
return (
|
||||
<section id="features">
|
||||
<div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
|
||||
<div className="p-8 border border-[#E4DC0E] bg-gradient-to-b from-[#E4DC0E]/5 to-[#E4DC0E]/25 rounded-xl grid grid-cols-2">
|
||||
<div>
|
||||
<svg
|
||||
width="60"
|
||||
height="60"
|
||||
viewBox="0 0 60 60"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mb-4"
|
||||
>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M30.129 5C34.3295 4.99998 37.6567 4.99993 40.2607 5.35613C42.9405 5.7227 45.1095 6.49508 46.82 8.23545C48.5305 9.97583 49.2897 12.1827 49.65 14.9093C50 17.5585 50 20.9438 50 25.2175V34.7825C50 39.0563 50 42.4415 49.65 45.0908C49.2897 47.8173 48.5305 50.0242 46.82 51.7645C45.1095 53.505 42.9405 54.2772 40.2607 54.6437C37.6567 55 34.3295 55 30.1292 55H29.871C25.6705 55 22.3432 55 19.7394 54.6437C17.0595 54.2772 14.8905 53.505 13.18 51.7645C11.4694 50.0242 10.7103 47.8173 10.35 45.0908C9.99995 42.4415 9.99998 39.0563 10 34.7825V25.2175C9.99998 20.9437 9.99995 17.5586 10.35 14.9093C10.7103 12.1827 11.4694 9.97583 13.18 8.23545C14.8905 6.49508 17.0595 5.7227 19.7394 5.35613C22.3433 4.99993 25.6705 4.99998 29.871 5H30.129Z"
|
||||
fill="#E4DC0E"
|
||||
/>
|
||||
<path
|
||||
d="M21.4282 46.2781C21.4282 45.3146 22.1957 44.5338 23.1425 44.5338H36.8567C37.8035 44.5338 38.571 45.3146 38.571 46.2781C38.571 47.2413 37.8035 48.0221 36.8567 48.0221H23.1425C22.1957 48.0221 21.4282 47.2413 21.4282 46.2781Z"
|
||||
fill="#E4DC0E"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<motion.h2
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mb-3 flex items-center gap-3 font-serif text-4xl font-bold text-white"
|
||||
>
|
||||
Mobile Version{" "}
|
||||
<span className="py-[2px] px-2.5 bg-[#E4DC0E] rounded-lg font-mono text-xl font-semibold uppercase text-[#193818]">
|
||||
COMING SOON
|
||||
</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="text-white/75"
|
||||
>
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={mobileImg}
|
||||
alt=""
|
||||
className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import { JSX, useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
interface IPhase {
|
||||
icon: JSX.Element;
|
||||
@ -166,29 +167,51 @@ export default function RoadmapSection() {
|
||||
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]">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]"
|
||||
>
|
||||
Roadmap
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
|
||||
<motion.h2
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mb-3 font-serif text-4xl font-bold text-white"
|
||||
>
|
||||
From Hero to SuperHero, we keep building
|
||||
</h2>
|
||||
</motion.h2>
|
||||
|
||||
<p className="mb-8 text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
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>
|
||||
</motion.p>
|
||||
|
||||
<div className="mb-5 grid grid-cols-4 gap-5">
|
||||
{phases.map((phase, index) => {
|
||||
return (
|
||||
<div
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 + index * 0.2 }}
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setActivePhase(index);
|
||||
}}
|
||||
className={`py-5 px-7 border ${
|
||||
className={`relative hover:-top-2 py-5 px-7 border ${
|
||||
activePhase === index
|
||||
? "border-[#09C04C] bg-[#09C04C]/10"
|
||||
: "border-white/10 bg-white/10"
|
||||
@ -205,20 +228,78 @@ export default function RoadmapSection() {
|
||||
{phase.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</motion.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>
|
||||
{activePhase === 0 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
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>
|
||||
<p className="leading-7 text-white/75">
|
||||
{phases[activePhase].description}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activePhase === 1 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
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>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activePhase === 2 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
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>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activePhase === 3 && (
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
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>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import img1 from "@/assets/images/tokenomics.png";
|
||||
|
||||
@ -5,23 +7,47 @@ 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]">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]"
|
||||
>
|
||||
Tokenomics
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h2 className="mb-3 font-serif text-4xl font-bold text-white">
|
||||
<motion.h2
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mb-3 font-serif text-4xl font-bold text-white"
|
||||
>
|
||||
Tokenomics clear as transparent glass
|
||||
</h2>
|
||||
</motion.h2>
|
||||
|
||||
<p className="mb-8 text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
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>
|
||||
</motion.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">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
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>
|
||||
@ -34,27 +60,54 @@ export default function TokenomicsSection() {
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
</motion.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>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1 }}
|
||||
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>
|
||||
<h3 className="font-serif text-2xl font-semibold text-white">
|
||||
5% Team Allocations
|
||||
</h3>
|
||||
|
||||
<p className="text-white/75">
|
||||
Team Allocations : 5% (Vested with a linear cliff) <br />{" "}
|
||||
Strategic Partnerships and Marketing : 5%
|
||||
</p>
|
||||
<p className="text-white/75">Vested with a linear cliff</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1.2 }}
|
||||
className="p-8 border border-[#D15F0D] bg-[#D15F0D]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200"
|
||||
>
|
||||
<p className="font-mono font-medium uppercase text-[#D15F0D]">
|
||||
PARTNERSHIPS
|
||||
</p>
|
||||
|
||||
<h3 className="font-serif text-2xl font-semibold text-white">
|
||||
5% For Strategic Partnerships and Marketing
|
||||
</h3>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1 }}
|
||||
className="flex"
|
||||
>
|
||||
<Image src={img1} alt="" className="w-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,6 +2,7 @@ import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import HeroSection from "./HeroSection";
|
||||
import FeaturesSection from "./FeaturesSection";
|
||||
import MobileSection from "./MobileSection";
|
||||
import RoadmapSection from "./RoadmapSection";
|
||||
import TokenomicsSection from "./TokenomicsSection";
|
||||
import FAQsSection from "./FAQsSection";
|
||||
@ -20,6 +21,7 @@ export default function Home() {
|
||||
|
||||
<HeroSection />
|
||||
<FeaturesSection />
|
||||
<MobileSection />
|
||||
<RoadmapSection />
|
||||
<TokenomicsSection />
|
||||
<FAQsSection />
|
||||
|
||||
119
src/app/dashboard/Types.tsx
Normal file
119
src/app/dashboard/Types.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Types() {
|
||||
const [state, setState] = useState<number>(0);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setState(0);
|
||||
}}
|
||||
className={`py-1.5 px-2 border border-[#09C04C] ${
|
||||
state === 0 ? "bg-[#09C04C]" : "bg-[#121A15]"
|
||||
} rounded-xl flex items-center gap-1.5 text-base font-medium text-white duration-200`}
|
||||
>
|
||||
<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"
|
||||
className={`${
|
||||
state === 0 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
<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"
|
||||
className={`${
|
||||
state === 0 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
<path
|
||||
d="M9.00675 9H9"
|
||||
stroke="#09C04C"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`${
|
||||
state === 0 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
</svg>
|
||||
DeepThink(R1)
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setState(1);
|
||||
}}
|
||||
className={`py-1.5 px-2 border border-[#09C04C] ${
|
||||
state === 1 ? "bg-[#09C04C]" : "bg-[#121A15]"
|
||||
} rounded-xl flex items-center gap-1.5 text-base font-medium text-white duration-200`}
|
||||
>
|
||||
<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"
|
||||
className={`${
|
||||
state === 1 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
<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"
|
||||
className={`${
|
||||
state === 1 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
<path
|
||||
d="M15.75 11.25H2.25"
|
||||
stroke="white"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`${
|
||||
state === 1 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
<path
|
||||
d="M15.75 6.75H2.25"
|
||||
stroke="white"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`${
|
||||
state === 1 ? "stroke-white" : "stroke-[#09C04C]"
|
||||
} duration-200`}
|
||||
/>
|
||||
</svg>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
305
src/app/dashboard/chat/2/page.tsx
Normal file
305
src/app/dashboard/chat/2/page.tsx
Normal file
@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function DashboardChat() {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(true);
|
||||
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 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="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
|
||||
<div className="max-w-[660px] p-5 border border-white/10 bg-white/10 rounded-lg">
|
||||
<div
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.5 22H14.5M15 15.3264C17.3649 14.2029 19 11.7924 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.7924 6.63505 14.2029 9 15.3264V16C9 16.9319 9 17.3978 9.15224 17.7654C9.35523 18.2554 9.74458 18.6448 10.2346 18.8478C10.6022 19 11.0681 19 12 19C12.9319 19 13.3978 19 13.7654 18.8478C14.2554 18.6448 14.6448 18.2554 14.8478 17.7654C15 17.3978 15 16.9319 15 16V15.3264Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Title of the Dropdown appears in this section
|
||||
</p>
|
||||
<p className="text-xs text-white/50">
|
||||
Collapse Details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`${!isOpen ? "rotate-[180deg]" : ""} flex`}
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="6"
|
||||
viewBox="0 0 12 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.5 5.25L6 0.75L10.5 5.25"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<p className="mt-4 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
|
||||
platea molestie taciti amet class at dictum est. Conubia
|
||||
pharetra maecenas iaculis dui litora convallis et nostra
|
||||
leo. Pellentesque justo sapien amet rhoncus aliquet
|
||||
torquent. Netus lobortis justo eleifend auctor nunc. Vel
|
||||
ex montes commodo, sodales ex iaculis? Dictum habitant
|
||||
duis nam; ridiculus gravida eleifend montes dignissim nam.{" "}
|
||||
<br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae
|
||||
pulvinar suscipit aliquet? Senectus semper feugiat
|
||||
lobortis morbi vitae tempor. Faucibus nibh posuere blandit
|
||||
himenaeos curabitur. Mauris tortor lorem id magnis tellus
|
||||
senectus laoreet. Magnis elit hendrerit litora in faucibus
|
||||
pharetra. Justo dui ultricies commodo tempus, mauris
|
||||
eleifend nascetur. <br />
|
||||
<br />
|
||||
Ligula tempus purus nec congue, tellus hendrerit litora.
|
||||
Nostra morbi natoque massa metus; bibendum tempus
|
||||
malesuada. Fames donec ultricies metus; condimentum
|
||||
feugiat tristique elementum. Nullam maecenas primis
|
||||
bibendum eleifend hac viverra libero. Proin velit montes
|
||||
netus lacus ante ornare porttitor justo. Quam lorem
|
||||
volutpat accumsan, tristique proin at parturient.
|
||||
Condimentum eu risus tincidunt pulvinar consequat natoque.
|
||||
Vulputate sagittis quis ad tempor lobortis ultrices dolor
|
||||
gravida? Tincidunt tempor rhoncus massa fermentum faucibus
|
||||
fermentum nullam pretium. Diam habitant ex maximus odio
|
||||
praesent semper ipsum ex.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 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
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] 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 top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.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>
|
||||
);
|
||||
}
|
||||
352
src/app/dashboard/chat/3/page.tsx
Normal file
352
src/app/dashboard/chat/3/page.tsx
Normal file
@ -0,0 +1,352 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function DashboardChat() {
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 h-[calc(100svh-20px)] pt-10 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="hide-scrollbar flex-1 w-full max-w-[780px] pb-10 space-y-12 overflow-y-auto">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="p-5 border border-white/10 bg-white/10 rounded-lg grid grid-cols-[180px_auto] gap-6">
|
||||
<div>
|
||||
<div className="mb-7 flex items-center gap-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M21 21.5L15.0001 15.5M17 10.5C17 14.366 13.866 17.5 10 17.5C6.13401 17.5 3 14.366 3 10.5C3 6.63401 6.13401 3.5 10 3.5C13.866 3.5 17 6.63401 17 10.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">DeepSearch</p>
|
||||
<p className="text-xs text-white/75">
|
||||
21s * 24 sources
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[35px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Researching</p>
|
||||
<p className="text-xs text-white/75">topic name here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-7 flex items-center gap-2">
|
||||
<span className="absolute top-9 left-[9px] w-px h-[28px] bg-[#D9D9D9]"></span>
|
||||
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#D9D9D9" />
|
||||
<path
|
||||
d="M13 7.6875L8.1875 12.5L6 10.3125"
|
||||
stroke="black"
|
||||
strokeWidth="0.875"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">
|
||||
Exploring research
|
||||
</p>
|
||||
<p className="text-xs text-white/75">papers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="10" cy="10" r="10" fill="#09C04C" />
|
||||
<path
|
||||
d="M13 8.3125L8.1875 13.125L6 10.9375"
|
||||
stroke="#010101"
|
||||
strokeWidth="0.875"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-white">Complete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="pl-6 border-l border-white/10 text-white">
|
||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Eros
|
||||
platea molestie taciti amet class at dictum est. Conubia
|
||||
pharetra maecenas iaculis dui litora convallis et nostra
|
||||
leo. Pellentesque justo sapien amet rhoncus aliquet
|
||||
torquent. Netus lobortis justo eleifend auctor nunc. Vel ex
|
||||
montes commodo, sodales ex iaculis? Dictum habitant duis
|
||||
nam; ridiculus gravida eleifend montes dignissim nam. <br />
|
||||
<br />
|
||||
Nam fermentum id sociosqu curae lacinia felis. Nisl ac
|
||||
cursus inceptos suscipit eros. Accumsan class vitae pulvinar
|
||||
suscipit aliquet? Senectus semper feugiat lobortis morbi
|
||||
vitae tempor. Faucibus nibh posuere blandit himenaeos
|
||||
curabitur. Mauris tortor lorem id magnis tellus senectus
|
||||
laoreet. Magnis elit hendrerit litora in faucibus pharetra.
|
||||
Justo dui ultricies commodo tempus, mauris eleifend
|
||||
nascetur. <br />
|
||||
<br />
|
||||
Diam habitant ex maximus odio praesent semper ipsum ex.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="py-1 pl-1.5 pr-3 border border-white/10 bg-white/10 rounded-full flex items-center gap-2">
|
||||
<svg
|
||||
width="78"
|
||||
height="18"
|
||||
viewBox="0 0 78 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="9" cy="9" r="9" fill="#E57777" />
|
||||
<circle cx="21" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="33" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="45" cy="9" r="9" fill="#09C04C" />
|
||||
<circle cx="57" cy="9" r="9" fill="#D1CA0D" />
|
||||
<circle cx="69" cy="9" r="9" fill="#E57777" />
|
||||
</svg>
|
||||
|
||||
<p className="font-medium text-white">24 web pages</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 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
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] 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 top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.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>
|
||||
);
|
||||
}
|
||||
215
src/app/dashboard/chat/page.tsx
Normal file
215
src/app/dashboard/chat/page.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import avatarImg1 from "@/assets/images/avatars/1.svg";
|
||||
import Types from "../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
|
||||
export default function DashboardChat() {
|
||||
return (
|
||||
<div className="p-2.5 h-[100svh]">
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="flex-1 pt-10 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-12">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="text-lg font-medium text-center text-white"
|
||||
>
|
||||
Title of the Chat comes in this section
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="ml-auto max-w-[500px] p-3 border border-white/10 bg-white/10 rounded-lg text-white"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="flex items-start gap-5"
|
||||
>
|
||||
<Image src={avatarImg1} alt="" className="w-[40px]" />
|
||||
|
||||
<div>
|
||||
<p className="max-w-[660px] text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
||||
irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<div className="mt-3 flex gap-3">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_46_276)">
|
||||
<path
|
||||
d="M3.75 11.25C3.05109 11.25 2.70164 11.25 2.42597 11.1359C2.05844 10.9836 1.76642 10.6915 1.61418 10.324C1.5 10.0483 1.5 9.69893 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31902C1.8073 2.03677 2.03677 1.8073 2.31902 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69893 1.5 10.0483 1.5 10.324 1.61418C10.6915 1.76642 10.9836 2.05844 11.1359 2.42597C11.25 2.70164 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3602 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3602 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88985 16.3365 7.569C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3602 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88985 6.75 7.569 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.569C6.75 7.88985 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3602 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.569 16.3365C7.88985 16.5 8.30992 16.5 9.15 16.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_46_276">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.41002 14.8256C8.20933 15.6239 10.3525 15.5805 12.1877 14.5209C15.2368 12.7605 16.2815 8.86164 14.5211 5.8125L14.3336 5.48773M3.47894 12.1876C1.71853 9.13847 2.76324 5.23958 5.81235 3.47917C7.64758 2.4196 9.79071 2.37625 11.59 3.17452M1.87012 12.2503L3.91915 12.7994L4.46819 10.7503M13.532 7.24936L14.0811 5.20033L16.1301 5.74936"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.25 16.5V8.25M1.5 9.75V15C1.5 15.8284 2.17157 16.5 3 16.5H13.0697C14.1803 16.5 15.1246 15.6898 15.2935 14.5921L16.1012 9.34215C16.3109 7.97917 15.2564 6.75 13.8774 6.75H11.25C10.8358 6.75 10.5 6.41421 10.5 6V3.34938C10.5 2.32799 9.672 1.5 8.65065 1.5C8.40697 1.5 8.18625 1.64348 8.08733 1.86609L5.44795 7.80458C5.32758 8.07548 5.05899 8.25 4.7626 8.25H3C2.17157 8.25 1.5 8.92155 1.5 9.75Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7498 1.5V9.75M16.4998 7.35V3.9C16.4998 3.05992 16.4998 2.63988 16.3363 2.31902C16.1925 2.03677 15.9631 1.8073 15.6808 1.66349C15.3599 1.5 14.9399 1.5 14.0998 1.5H6.0883C4.99219 1.5 4.44414 1.5 4.00148 1.70057C3.61134 1.87736 3.27977 2.16181 3.04572 2.52054C2.78017 2.92754 2.69684 3.46923 2.53017 4.55259L2.13786 7.10259C1.91803 8.53148 1.80811 9.24593 2.02015 9.80183C2.20625 10.2898 2.55628 10.6978 3.01024 10.9559C3.52744 11.25 4.2503 11.25 5.696 11.25H6.29979C6.71984 11.25 6.92985 11.25 7.09029 11.3318C7.23141 11.4037 7.34615 11.5183 7.41805 11.6595C7.49983 11.8199 7.49983 12.0299 7.49983 12.45V14.6507C7.49983 15.672 8.32776 16.5 9.34918 16.5C9.59278 16.5 9.81358 16.3565 9.91251 16.1339L12.4331 10.4627C12.5477 10.2047 12.605 10.0757 12.6956 9.98115C12.7757 9.89752 12.8741 9.83363 12.983 9.7944C13.1062 9.75 13.2474 9.75 13.5296 9.75H14.0998C14.9399 9.75 15.3599 9.75 15.6808 9.5865C15.9631 9.44272 16.1925 9.21322 16.3363 8.931C16.4998 8.61015 16.4998 8.19008 16.4998 7.35Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 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
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex">
|
||||
<textarea
|
||||
placeholder="Ask me anything..."
|
||||
className="w-full h-[66px] 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 top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<path
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.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>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
"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";
|
||||
import Types from "../Types";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
interface IItem {
|
||||
icon: JSX.Element;
|
||||
@ -303,177 +303,11 @@ export default function DashboardHome() {
|
||||
|
||||
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>
|
||||
<main className="h-full flex">
|
||||
<Sidebar />
|
||||
|
||||
<div
|
||||
className="pt-[200px] pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
className="flex-1 pt-[200px] pb-5 bg-[#121A15] rounded-xl flex flex-col justify-between items-center"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg.png")`,
|
||||
backgroundSize: "cover",
|
||||
@ -482,18 +316,44 @@ export default function DashboardHome() {
|
||||
>
|
||||
<div className="w-full max-w-[780px] space-y-7">
|
||||
<div>
|
||||
<p className="font-mono text-sm font-medium text-[#09C04C]">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="font-mono text-sm font-medium text-[#09C04C]"
|
||||
>
|
||||
COLLANO v1.0
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h1 className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white">
|
||||
<motion.h1
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white"
|
||||
>
|
||||
Welcome John 👋
|
||||
</h1>
|
||||
</motion.h1>
|
||||
|
||||
<p className="mb-5 text-white/75">We’re glad to see you today</p>
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mb-5 text-white/75"
|
||||
>
|
||||
We’re glad to see you today
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="p-1 border border-white/10 bg-[#121A15] rounded-2xl grid grid-cols-8">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="p-1 border border-white/10 bg-[#121A15] rounded-2xl grid grid-cols-8"
|
||||
>
|
||||
{items.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
@ -506,12 +366,20 @@ export default function DashboardHome() {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.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">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 1 }}
|
||||
className="w-full max-w-[780px] space-y-2"
|
||||
>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<Types />
|
||||
|
||||
<button className="py-1.5 px-2 border border-white/10 bg-[#121A15] rounded-xl flex items-center gap-1.5 text-base font-medium text-white">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
@ -520,128 +388,37 @@ export default function DashboardHome() {
|
||||
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"
|
||||
d="M9 10.125V5.625M6.75 7.875H11.25M5.25 13.5V15.2516C5.25 15.6513 5.25 15.8511 5.33192 15.9537C5.40317 16.043 5.5112 16.0949 5.6254 16.0948C5.75672 16.0946 5.91275 15.9698 6.22482 15.7201L8.0139 14.2888C8.37937 13.9965 8.56215 13.8503 8.76562 13.7464C8.94615 13.6541 9.1383 13.5867 9.3369 13.546C9.56077 13.5 9.79477 13.5 10.2628 13.5H12.15C13.4102 13.5 14.0401 13.5 14.5215 13.2548C14.9449 13.0391 15.2891 12.6949 15.5048 12.2715C15.75 11.7901 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.2891 3.05516 14.9449 2.71095 14.5215 2.49524C14.0401 2.25 13.4102 2.25 12.15 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V10.5C2.25 11.1975 2.25 11.5462 2.32667 11.8324C2.53472 12.6088 3.1412 13.2153 3.91765 13.4234C4.20378 13.5 4.55252 13.5 5.25 13.5Z"
|
||||
stroke="white"
|
||||
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
|
||||
New Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="relative flex">
|
||||
<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"
|
||||
className="w-full h-[66px] 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>
|
||||
|
||||
<div className="absolute top-1/2 right-0 -translate-y-1/2 w-fit px-5 flex justify-end">
|
||||
<button className="flex">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="32" height="32" rx="16" fill="#09C04C" />
|
||||
<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"
|
||||
d="M16 24V8M16 8L10 14M16 8L22 14"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
@ -649,7 +426,7 @@ export default function DashboardHome() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -658,30 +435,30 @@ export default function DashboardHome() {
|
||||
!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"
|
||||
<div className="relative w-full max-w-[420px] p-5 border border-white/10 bg-white/10 rounded-2xl">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsWalletPopupActive(false);
|
||||
}}
|
||||
className="absolute top-4 right-4 flex"
|
||||
>
|
||||
<path
|
||||
d="M18 6L6 18M6 6L18 18"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
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>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
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 Delegate() {
|
||||
return (
|
||||
@ -9,7 +10,12 @@ export default function Delegate() {
|
||||
<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>
|
||||
<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} />
|
||||
|
||||
@ -17,37 +23,80 @@ export default function Delegate() {
|
||||
Beta
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<p className="font-mono text-sm font-medium uppercase text-[#09C04C]">
|
||||
<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
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h1 className="mt-1.5 mb-2.5 font-serif text-5xl font-bold text-white">
|
||||
<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
|
||||
</h1>
|
||||
</motion.h1>
|
||||
|
||||
<p className="text-white/75">
|
||||
<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.
|
||||
</p>
|
||||
</motion.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
|
||||
<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={"/legal/tos"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Terms
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="text-white/75">
|
||||
Privacy Policy
|
||||
<Link
|
||||
href={"/legal/privacy-policy"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Privacy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href={"/"} className="flex">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Docs
|
||||
</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="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -58,11 +107,12 @@ export default function Delegate() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="flex">
|
||||
<Link href={"/"} className="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -73,10 +123,11 @@ export default function Delegate() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
@ -98,15 +149,33 @@ export default function Delegate() {
|
||||
>
|
||||
<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]">
|
||||
<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]"
|
||||
>
|
||||
Delegate
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<h3 className="mt-1.5 mb-6 font-serif text-2xl font-bold text-white">
|
||||
<motion.h3
|
||||
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-3xl font-bold text-white"
|
||||
>
|
||||
Delegate your wallet
|
||||
</h3>
|
||||
</motion.h3>
|
||||
|
||||
<div className="mb-5 w-full p-3 border border-white/25 bg-white/10 rounded-lg flex items-center gap-3">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
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"
|
||||
@ -143,40 +212,53 @@ export default function Delegate() {
|
||||
<p className="font-medium text-white">
|
||||
0x625EF1A576fAF469A0685871FAB46B9bE158ed49
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<p className="mb-5 text-white/75">
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mb-5 text-white/75"
|
||||
>
|
||||
After delegating your wallet, you would be able to access
|
||||
Collano Labs AI, BNB CoPilot Program
|
||||
</p>
|
||||
</motion.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"
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,10 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-bg {
|
||||
border: 1px solid #09c04c;
|
||||
background: rgba(9, 192, 76, 0.15);
|
||||
@ -25,3 +29,9 @@ html {
|
||||
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:hover {
|
||||
border-color: #09c04c;
|
||||
background: rgba(9, 192, 76, 0.15);
|
||||
box-shadow: 0px 0px 20px 5px rgba(9, 192, 76, 0.25) inset;
|
||||
}
|
||||
|
||||
@ -6,6 +6,8 @@ import {
|
||||
Plus_Jakarta_Sans,
|
||||
} from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ScrollProgress } from "@/components/magicui/scroll-progress";
|
||||
import { Spotlight } from "@/components/ui/spotlight-new";
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans",
|
||||
@ -49,9 +51,12 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${dmSans.variable} ${geist.className} ${geist.variable} ${geistMono.variable} ${plusJakartaSans.variable} antialiased min-h-[100svh] bg-[#063A19]`}
|
||||
className={`${dmSans.variable} ${geist.className} ${geist.variable} ${geistMono.variable} ${plusJakartaSans.variable} antialiased min-h-[100svh] bg-[#063A19] overflow-x-hidden`}
|
||||
>
|
||||
{children}
|
||||
<div className="relative z-10">{children}</div>
|
||||
|
||||
<ScrollProgress />
|
||||
<Spotlight />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
98
src/app/legal/privacy-policy/HeroSection.tsx
Normal file
98
src/app/legal/privacy-policy/HeroSection.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="pt-[125px]">
|
||||
<div className="mx-auto container max-w-[1110px] pt-24 px-8">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.h1
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-4 font-serif text-5xl font-bold text-center text-white"
|
||||
>
|
||||
Privacy Policy
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mb-12 text-lg text-center text-white/75"
|
||||
>
|
||||
Last Updated : Feb 20, 2025
|
||||
</motion.p>
|
||||
|
||||
<div className="space-y-7">
|
||||
<h2 className="font-serif text-2xl font-semibold text-white">
|
||||
Main Heading H1
|
||||
</h2>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
Welcome to Website Name! <br />
|
||||
<br />
|
||||
These terms and conditions outline the rules and regulations for
|
||||
the use of Company Name's Website, located
|
||||
at Website.com. <br />
|
||||
By accessing this website we assume you accept these terms and
|
||||
conditions. Do not continue to use Website Name if you
|
||||
do not agree to take all of the terms and conditions stated on
|
||||
this page. <br />
|
||||
<br />
|
||||
The following terminology applies to these Terms and Conditions,
|
||||
Privacy Statement and Disclaimer Notice and all Agreements:
|
||||
“Client”, “You” and “Your” refers to you, the person log on this
|
||||
website and compliant to the Company's terms and conditions.
|
||||
“The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our
|
||||
Company. “Party”, “Parties”, or “Us”, refers to both the Client
|
||||
and ourselves. All terms refer to the offer, acceptance and
|
||||
consideration of payment necessary to undertake the process of our
|
||||
assistance to the Client in the most appropriate manner for the
|
||||
express purpose of meeting the Client's needs in respect of
|
||||
provision of the Company's stated services, in accordance
|
||||
with and subject to, prevailing law of Netherlands. Any use of the
|
||||
above terminology or other words in the singular, plural,
|
||||
capitalization and/or he/she or they, are taken as interchangeable
|
||||
and therefore as referring to same.
|
||||
</p>
|
||||
<span className="w-full h-px bg-[#E5E7EB]/15 block"></span>
|
||||
<h3 className="font-serif text-xl font-semibold text-white">
|
||||
Secondary heading H2
|
||||
</h3>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
We employ the use of cookies. By accessing Website Name, you
|
||||
agreed to use cookies in agreement with the Company
|
||||
Name's Privacy Policy.
|
||||
</p>
|
||||
<span className="w-full h-px bg-[#E5E7EB]/15 block"></span>
|
||||
<h4 className="font-serif text-lg font-semibold text-white">
|
||||
Secondary heading H2
|
||||
</h4>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
Unless otherwise stated, Company Name and/or its
|
||||
licensors own the intellectual property rights for all material
|
||||
on Website Name. All intellectual property rights are
|
||||
reserved. You may access this from Website Name for your
|
||||
own personal use subjected to restrictions set in these terms and
|
||||
conditions. <br />
|
||||
<br />
|
||||
Pointers appear like such : <br />• Nam fermentum integer potenti
|
||||
malesuada porta vulputate pharetra. <br />• Parturient tellus
|
||||
justo ut aenean dapibus viverra sollicitudin. <br />• Maecenas
|
||||
placerat habitant dolor accumsan neque curae libero. <br />•
|
||||
Adipiscing tempus elementum adipiscing arcu enim. <br />• Magna
|
||||
ornare eros ultricies, viverra sagittis class? <br />• Cras mollis
|
||||
est aliquam ridiculus aenean aliquam ipsum. <br />• Volutpat
|
||||
scelerisque curabitur; ligula netus posuere facilisis. <br />•
|
||||
Elit tempus habitasse consequat viverra; urna congue quisque.{" "}
|
||||
<br />• Vehicula pellentesque eleifend auctor vitae gravida mattis
|
||||
tellus?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
22
src/app/legal/privacy-policy/page.tsx
Normal file
22
src/app/legal/privacy-policy/page.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import HeroSection from "./HeroSection";
|
||||
|
||||
export default function PrivacyPolicy() {
|
||||
return (
|
||||
<main
|
||||
className="min-h-[100svh]"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg-2.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "top",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
|
||||
<HeroSection />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
98
src/app/legal/tos/HeroSection.tsx
Normal file
98
src/app/legal/tos/HeroSection.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="pt-[125px]">
|
||||
<div className="mx-auto container max-w-[1110px] pt-24 px-8">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.h1
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-4 font-serif text-5xl font-bold text-center text-white"
|
||||
>
|
||||
Terms of Service
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mb-12 text-lg text-center text-white/75"
|
||||
>
|
||||
Last Updated : Feb 20, 2025
|
||||
</motion.p>
|
||||
|
||||
<div className="space-y-7">
|
||||
<h2 className="font-serif text-2xl font-semibold text-white">
|
||||
Main Heading H1
|
||||
</h2>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
Welcome to Website Name! <br />
|
||||
<br />
|
||||
These terms and conditions outline the rules and regulations for
|
||||
the use of Company Name's Website, located
|
||||
at Website.com. <br />
|
||||
By accessing this website we assume you accept these terms and
|
||||
conditions. Do not continue to use Website Name if you
|
||||
do not agree to take all of the terms and conditions stated on
|
||||
this page. <br />
|
||||
<br />
|
||||
The following terminology applies to these Terms and Conditions,
|
||||
Privacy Statement and Disclaimer Notice and all Agreements:
|
||||
“Client”, “You” and “Your” refers to you, the person log on this
|
||||
website and compliant to the Company's terms and conditions.
|
||||
“The Company”, “Ourselves”, “We”, “Our” and “Us”, refers to our
|
||||
Company. “Party”, “Parties”, or “Us”, refers to both the Client
|
||||
and ourselves. All terms refer to the offer, acceptance and
|
||||
consideration of payment necessary to undertake the process of our
|
||||
assistance to the Client in the most appropriate manner for the
|
||||
express purpose of meeting the Client's needs in respect of
|
||||
provision of the Company's stated services, in accordance
|
||||
with and subject to, prevailing law of Netherlands. Any use of the
|
||||
above terminology or other words in the singular, plural,
|
||||
capitalization and/or he/she or they, are taken as interchangeable
|
||||
and therefore as referring to same.
|
||||
</p>
|
||||
<span className="w-full h-px bg-[#E5E7EB]/15 block"></span>
|
||||
<h3 className="font-serif text-xl font-semibold text-white">
|
||||
Secondary heading H2
|
||||
</h3>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
We employ the use of cookies. By accessing Website Name, you
|
||||
agreed to use cookies in agreement with the Company
|
||||
Name's Privacy Policy.
|
||||
</p>
|
||||
<span className="w-full h-px bg-[#E5E7EB]/15 block"></span>
|
||||
<h4 className="font-serif text-lg font-semibold text-white">
|
||||
Secondary heading H2
|
||||
</h4>
|
||||
<p className="text-sm md:text-base leading-[28px] text-white/75">
|
||||
Unless otherwise stated, Company Name and/or its
|
||||
licensors own the intellectual property rights for all material
|
||||
on Website Name. All intellectual property rights are
|
||||
reserved. You may access this from Website Name for your
|
||||
own personal use subjected to restrictions set in these terms and
|
||||
conditions. <br />
|
||||
<br />
|
||||
Pointers appear like such : <br />• Nam fermentum integer potenti
|
||||
malesuada porta vulputate pharetra. <br />• Parturient tellus
|
||||
justo ut aenean dapibus viverra sollicitudin. <br />• Maecenas
|
||||
placerat habitant dolor accumsan neque curae libero. <br />•
|
||||
Adipiscing tempus elementum adipiscing arcu enim. <br />• Magna
|
||||
ornare eros ultricies, viverra sagittis class? <br />• Cras mollis
|
||||
est aliquam ridiculus aenean aliquam ipsum. <br />• Volutpat
|
||||
scelerisque curabitur; ligula netus posuere facilisis. <br />•
|
||||
Elit tempus habitasse consequat viverra; urna congue quisque.{" "}
|
||||
<br />• Vehicula pellentesque eleifend auctor vitae gravida mattis
|
||||
tellus?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
22
src/app/legal/tos/page.tsx
Normal file
22
src/app/legal/tos/page.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import HeroSection from "./HeroSection";
|
||||
|
||||
export default function TOS() {
|
||||
return (
|
||||
<main
|
||||
className="min-h-[100svh]"
|
||||
style={{
|
||||
backgroundImage: `url("/images/body-bg-2.png")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "top",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
|
||||
<HeroSection />
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -67,12 +67,25 @@ export default function Login() {
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="flex gap-5"
|
||||
>
|
||||
<Link href={"/"} className="text-white/75">
|
||||
Terms of Service
|
||||
<Link
|
||||
href={"/legal/tos"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Terms
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="text-white/75">
|
||||
Privacy Policy
|
||||
<Link
|
||||
href={"/legal/privacy-policy"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Privacy
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Docs
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@ -83,7 +96,7 @@ export default function Login() {
|
||||
transition={{ duration: 0.25, delay: 0.5 }}
|
||||
className="flex items-center gap-4"
|
||||
>
|
||||
<Link href={"/"} className="flex">
|
||||
<Link href={"/"} className="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -94,11 +107,12 @@ export default function Login() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="flex">
|
||||
<Link href={"/"} className="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -109,6 +123,7 @@ export default function Login() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
@ -162,11 +177,17 @@ export default function Login() {
|
||||
className="mb-5 text-white/75"
|
||||
>
|
||||
By proceeding you agree to our{" "}
|
||||
<Link href={"/"} className="text-[#09C04C]/75 hover:underline">
|
||||
<Link
|
||||
href={"/legal/tos"}
|
||||
className="text-[#09C04C]/75 hover:underline"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link href={"/"} className="text-[#09C04C]/75 hover:underline">
|
||||
<Link
|
||||
href={"/legal/privacy-policy"}
|
||||
className="text-[#09C04C]/75 hover:underline"
|
||||
>
|
||||
Privacy Policy.
|
||||
</Link>
|
||||
</motion.p>
|
||||
|
||||
15
src/assets/images/avatars/1.svg
Normal file
15
src/assets/images/avatars/1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 433 KiB |
BIN
src/assets/images/brand/footer-logo copy.png
Normal file
BIN
src/assets/images/brand/footer-logo copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/brand/icon.png
Normal file
BIN
src/assets/images/brand/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/images/brand/logo.png
Normal file
BIN
src/assets/images/brand/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/mobile.png
Normal file
BIN
src/assets/images/mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 469 KiB After Width: | Height: | Size: 292 KiB |
@ -1,18 +1,24 @@
|
||||
import Image from "next/image";
|
||||
import logoImg from "@/assets/images/brand/footer-logo.png";
|
||||
"use client";
|
||||
import { motion } from "motion/react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="pt-28">
|
||||
<motion.footer
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="pt-28 pb-6"
|
||||
>
|
||||
<div className="mx-auto container max-w-[1110px] px-8">
|
||||
<div className="relative mt-8 mb-12 flex justify-between items-center">
|
||||
<div className="relative mt-8 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">
|
||||
<Link href={"/"} className="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -23,11 +29,12 @@ export default function Footer() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="flex">
|
||||
<Link href={"/"} className="group flex">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
@ -38,26 +45,31 @@ export default function Footer() {
|
||||
<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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5">
|
||||
<Link href={"/"} className="text-white/75">
|
||||
<Link
|
||||
href={"/legal/tos"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
|
||||
<span className="w-[4px] h-[4px] bg-[#d9d9d9]/75 rounded-full"></span>
|
||||
|
||||
<Link href={"/"} className="text-white/75">
|
||||
<Link
|
||||
href={"/legal/privacy-policy"}
|
||||
className="text-white/75 hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Image src={logoImg} alt="" className="w-full opacity-25" />
|
||||
</div>
|
||||
</footer>
|
||||
</motion.footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
"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 Navbar() {
|
||||
return (
|
||||
<nav className="fixed z-[1000] top-10 left-0 w-full">
|
||||
<motion.nav
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25 }}
|
||||
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">
|
||||
@ -13,28 +21,49 @@ export default function Navbar() {
|
||||
|
||||
<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">
|
||||
<Link
|
||||
href={"#features"}
|
||||
className="text-base text-white hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Features
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link href={"#roadmap"} className="text-base text-white">
|
||||
<Link
|
||||
href={"#roadmap"}
|
||||
className="text-base text-white hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Roadmap
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link href={"#tokenomics"} className="text-base text-white">
|
||||
<Link
|
||||
href={"#tokenomics"}
|
||||
className="text-base text-white hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Tokenomics
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link href={"#faqs"} className="text-base text-white">
|
||||
<Link
|
||||
href={"#faqs"}
|
||||
className="text-base text-white hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
FAQs
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link
|
||||
href={"#docs"}
|
||||
className="text-base text-white hover:text-[#d1ca0d] duration-200"
|
||||
>
|
||||
Docs
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link
|
||||
@ -45,6 +74,6 @@ export default function Navbar() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</motion.nav>
|
||||
);
|
||||
}
|
||||
|
||||
456
src/components/Sidebar.tsx
Normal file
456
src/components/Sidebar.tsx
Normal file
@ -0,0 +1,456 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import logoImg from "@/assets/images/brand/logo.png";
|
||||
import iconImg from "@/assets/images/brand/icon.png";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
export default function Sidebar() {
|
||||
const [isActive, setIsActive] = useState<boolean>(true);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
isActive ? "w-[340px]" : "w-[110px]"
|
||||
} flex flex-col justify-between overflow-hidden duration-300`}
|
||||
>
|
||||
{isActive ? (
|
||||
<>
|
||||
<div className="min-w-[340px] p-7">
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="w-full flex justify-between items-center"
|
||||
>
|
||||
<Link href={"/"} className="flex items-center gap-2.5">
|
||||
<Image src={logoImg} alt="" width={160} />
|
||||
|
||||
<p className="px-1.5 bg-[#D1CA0D] rounded-lg font-mono font-medium uppercase text-[#193818]">
|
||||
Beta
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsActive(false);
|
||||
}}
|
||||
className="flex"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 30 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[28px] h-[28px]"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip1382_20239">
|
||||
<rect
|
||||
id="折叠边栏0730"
|
||||
width="30.000000"
|
||||
height="30.000000"
|
||||
fill="white"
|
||||
fillOpacity="0"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect
|
||||
id="折叠边栏0730"
|
||||
width="30.000000"
|
||||
height="30.000000"
|
||||
fill="#FFFFFF"
|
||||
fillOpacity="0"
|
||||
></rect>
|
||||
<g clipPath="url(#clip1382_20239)">
|
||||
<rect
|
||||
id="rect"
|
||||
x="17.420410"
|
||||
y="12.316406"
|
||||
rx="1.000947"
|
||||
width="5.995172"
|
||||
height="2.001895"
|
||||
transform="rotate(137.159 17.420410 12.316406)"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
></rect>
|
||||
<rect
|
||||
id="rect"
|
||||
x="12.959473"
|
||||
y="13.728516"
|
||||
rx="0.995190"
|
||||
width="6.002943"
|
||||
height="1.990380"
|
||||
transform="rotate(40.853 12.959473 13.728516)"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
></rect>
|
||||
<path
|
||||
id="path"
|
||||
d="M20.1 25.5L9.9 25.51C9.48 25.51 9.06 25.47 8.65 25.39C8.24 25.3 7.84 25.18 7.45 25.02C7.06 24.86 6.69 24.66 6.34 24.43C5.99 24.19 5.67 23.92 5.37 23.63C5.07 23.33 4.81 23 4.58 22.65C4.34 22.3 4.15 21.93 3.98 21.54C3.82 21.15 3.7 20.75 3.62 20.34C3.54 19.93 3.5 19.51 3.5 19.09L3.5 10.93C3.5 10.51 3.54 10.1 3.62 9.68C3.7 9.27 3.82 8.87 3.98 8.48C4.15 8.09 4.34 7.72 4.58 7.37C4.81 7.02 5.07 6.69 5.37 6.39C5.67 6.1 5.99 5.83 6.34 5.6C6.69 5.36 7.06 5.16 7.45 5C7.84 4.84 8.24 4.72 8.65 4.64C9.06 4.55 9.48 4.51 9.9 4.51L20.1 4.5C20.52 4.5 20.94 4.54 21.35 4.62C21.76 4.7 22.16 4.83 22.55 4.99C22.94 5.15 23.31 5.35 23.66 5.58C24 5.82 24.33 6.08 24.62 6.38C24.92 6.68 25.19 7 25.42 7.35C25.65 7.7 25.85 8.07 26.01 8.46C26.17 8.85 26.3 9.25 26.38 9.67C26.46 10.08 26.5 10.5 26.5 10.92L26.5 19.07C26.5 19.5 26.46 19.91 26.38 20.32C26.3 20.74 26.17 21.14 26.01 21.53C25.85 21.92 25.65 22.29 25.42 22.64C25.19 22.99 24.92 23.31 24.62 23.61C24.33 23.91 24 24.17 23.66 24.41C23.31 24.64 22.94 24.84 22.55 25C22.16 25.16 21.76 25.29 21.35 25.37C20.94 25.45 20.52 25.5 20.1 25.5ZM9.9 6.6C9.61 6.6 9.33 6.63 9.05 6.69C8.78 6.74 8.51 6.82 8.24 6.93C7.98 7.04 7.73 7.18 7.5 7.33C7.26 7.49 7.04 7.67 6.84 7.87C6.64 8.07 6.46 8.29 6.31 8.53C6.15 8.77 6.02 9.01 5.91 9.28C5.8 9.54 5.72 9.81 5.66 10.09C5.61 10.37 5.58 10.65 5.58 10.93L5.58 19.09C5.58 19.37 5.61 19.65 5.66 19.93C5.72 20.21 5.8 20.48 5.91 20.74C6.02 21.01 6.15 21.26 6.31 21.49C6.46 21.73 6.64 21.95 6.84 22.15C7.04 22.35 7.26 22.53 7.5 22.69C7.73 22.85 7.98 22.98 8.24 23.09C8.51 23.2 8.78 23.28 9.05 23.33C9.33 23.39 9.61 23.42 9.9 23.42L20.1 23.41C20.38 23.41 20.67 23.37 20.94 23.32C21.22 23.26 21.49 23.18 21.75 23.07C22.01 22.96 22.26 22.83 22.5 22.67C22.73 22.51 22.95 22.33 23.15 22.13C23.35 21.93 23.53 21.71 23.69 21.48C23.85 21.24 23.98 20.99 24.09 20.73C24.2 20.47 24.28 20.2 24.33 19.92C24.39 19.64 24.42 19.36 24.42 19.07L24.42 10.92C24.42 10.64 24.39 10.35 24.33 10.07C24.28 9.79 24.2 9.52 24.09 9.26C23.98 9 23.85 8.75 23.69 8.51C23.53 8.28 23.35 8.06 23.15 7.86C22.95 7.66 22.73 7.48 22.5 7.32C22.26 7.16 22.01 7.03 21.75 6.92C21.49 6.81 21.22 6.73 20.94 6.67C20.67 6.62 20.38 6.59 20.1 6.59L9.9 6.6Z"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
fillRule="nonzero"
|
||||
></path>
|
||||
<path
|
||||
id="rect"
|
||||
d="M8.5 5.51L10.54 5.51L10.6 24.43L8.55 24.43L8.5 5.51Z"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
fillRule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
<div className="my-5 w-full h-px bg-[#6B6700]"></div>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.2 }}
|
||||
className="mb-2 font-mono text-sm font-medium uppercase text-[#D1CA0D]"
|
||||
>
|
||||
Your Conversations
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.4 }}
|
||||
className="w-full space-y-1.5"
|
||||
>
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 bg-white/5 rounded-lg flex text-sm 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-sm text-white/75 duration-200"
|
||||
>
|
||||
Lorem Ipsum..
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-sm text-white/75 duration-200"
|
||||
>
|
||||
Duis aute irure...
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-sm text-white/75 duration-200"
|
||||
>
|
||||
Dolor in reprehenderit...
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-sm text-white/75 duration-200"
|
||||
>
|
||||
Excepteur sint...
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-sm text-white/75 duration-200"
|
||||
>
|
||||
Ut enim ad minim...
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={"/"}
|
||||
className="w-full py-2 px-4 hover:bg-white/5 rounded-lg flex text-sm text-white/75 duration-200"
|
||||
>
|
||||
Lorem ipsum dolor...
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.6 }}
|
||||
className="mt-5 font-mono text-sm font-medium uppercase text-[#D1CA0D]"
|
||||
>
|
||||
Subscriptions{" "}
|
||||
<span className="py-1 px-2 border border-white/25 bg-white/10 rounded-md text-white">
|
||||
Coming Soon
|
||||
</span>
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: -25, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.25, delay: 0.8 }}
|
||||
className="min-w-[340px] p-7"
|
||||
>
|
||||
<div className="mb-2 py-2.5 px-4 border border-transparent hover:border-[#D1CA0D] bg-white/10 hover:shadow-[0px_0px_5px_4px_rgba(209,202,13,0.25),0px_0px_20px_5px_rgba(209,202,13,0.25)_inset] rounded-lg flex justify-between items-center duration-200">
|
||||
<p className="text-sm font-medium text-white">Mobile Version</p>
|
||||
|
||||
<span className="py-1 px-2 border border-white/25 bg-white/10 rounded-md text-xs font-medium uppercase text-white">
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border border-transparent hover:border-[#D1CA0D] bg-white/10 hover:shadow-[0px_0px_5px_4px_rgba(209,202,13,0.25),0px_0px_20px_5px_rgba(209,202,13,0.25)_inset] rounded-lg flex justify-between items-center duration-200">
|
||||
<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>
|
||||
|
||||
<div className="group relative">
|
||||
<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 className="absolute bottom-full right-0 pb-2 opacity-0 group-focus-within:opacity-100 pointer-events-none group-focus-within:pointer-events-auto duration-200">
|
||||
<Link
|
||||
href={"/"}
|
||||
className="py-1.5 px-2 border border-white/10 bg-white/10 backdrop-blur-3xl rounded-md flex items-center gap-2 text-sm whitespace-nowrap text-white"
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[16px] min-w-[16px]"
|
||||
>
|
||||
<path
|
||||
d="M9.33333 2.06335C9.02867 2.02161 8.717 2 8.4 2C4.86538 2 2 4.68629 2 8C2 11.3137 4.86538 14 8.4 14C8.717 14 9.02867 13.9784 9.33333 13.9367"
|
||||
stroke="#E7400C"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.0002 8.00004H7.3335M14.0002 8.00004C14.0002 7.53324 12.6706 6.66106 12.3335 6.33337M14.0002 8.00004C14.0002 8.46684 12.6706 9.33904 12.3335 9.66671"
|
||||
stroke="#E7400C"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Log out
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</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="group 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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<Link href={"/"} className="group 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"
|
||||
className="group-hover:fill-[#d1ca0d] duration-200"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="min-w-[110px] p-10 pt-7 pl-7 flex flex-col items-center">
|
||||
<Link href={"/"} className="flex items-center gap-2.5">
|
||||
<Image src={iconImg} alt="" height={35} />
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsActive(true);
|
||||
}}
|
||||
className="rotate-[180deg] mt-5 flex"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 30 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-[28px] h-[28px]"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip1382_20239">
|
||||
<rect
|
||||
id="折叠边栏0730"
|
||||
width="30.000000"
|
||||
height="30.000000"
|
||||
fill="white"
|
||||
fillOpacity="0"
|
||||
></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect
|
||||
id="折叠边栏0730"
|
||||
width="30.000000"
|
||||
height="30.000000"
|
||||
fill="#FFFFFF"
|
||||
fillOpacity="0"
|
||||
></rect>
|
||||
<g clipPath="url(#clip1382_20239)">
|
||||
<rect
|
||||
id="rect"
|
||||
x="17.420410"
|
||||
y="12.316406"
|
||||
rx="1.000947"
|
||||
width="5.995172"
|
||||
height="2.001895"
|
||||
transform="rotate(137.159 17.420410 12.316406)"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
></rect>
|
||||
<rect
|
||||
id="rect"
|
||||
x="12.959473"
|
||||
y="13.728516"
|
||||
rx="0.995190"
|
||||
width="6.002943"
|
||||
height="1.990380"
|
||||
transform="rotate(40.853 12.959473 13.728516)"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
></rect>
|
||||
<path
|
||||
id="path"
|
||||
d="M20.1 25.5L9.9 25.51C9.48 25.51 9.06 25.47 8.65 25.39C8.24 25.3 7.84 25.18 7.45 25.02C7.06 24.86 6.69 24.66 6.34 24.43C5.99 24.19 5.67 23.92 5.37 23.63C5.07 23.33 4.81 23 4.58 22.65C4.34 22.3 4.15 21.93 3.98 21.54C3.82 21.15 3.7 20.75 3.62 20.34C3.54 19.93 3.5 19.51 3.5 19.09L3.5 10.93C3.5 10.51 3.54 10.1 3.62 9.68C3.7 9.27 3.82 8.87 3.98 8.48C4.15 8.09 4.34 7.72 4.58 7.37C4.81 7.02 5.07 6.69 5.37 6.39C5.67 6.1 5.99 5.83 6.34 5.6C6.69 5.36 7.06 5.16 7.45 5C7.84 4.84 8.24 4.72 8.65 4.64C9.06 4.55 9.48 4.51 9.9 4.51L20.1 4.5C20.52 4.5 20.94 4.54 21.35 4.62C21.76 4.7 22.16 4.83 22.55 4.99C22.94 5.15 23.31 5.35 23.66 5.58C24 5.82 24.33 6.08 24.62 6.38C24.92 6.68 25.19 7 25.42 7.35C25.65 7.7 25.85 8.07 26.01 8.46C26.17 8.85 26.3 9.25 26.38 9.67C26.46 10.08 26.5 10.5 26.5 10.92L26.5 19.07C26.5 19.5 26.46 19.91 26.38 20.32C26.3 20.74 26.17 21.14 26.01 21.53C25.85 21.92 25.65 22.29 25.42 22.64C25.19 22.99 24.92 23.31 24.62 23.61C24.33 23.91 24 24.17 23.66 24.41C23.31 24.64 22.94 24.84 22.55 25C22.16 25.16 21.76 25.29 21.35 25.37C20.94 25.45 20.52 25.5 20.1 25.5ZM9.9 6.6C9.61 6.6 9.33 6.63 9.05 6.69C8.78 6.74 8.51 6.82 8.24 6.93C7.98 7.04 7.73 7.18 7.5 7.33C7.26 7.49 7.04 7.67 6.84 7.87C6.64 8.07 6.46 8.29 6.31 8.53C6.15 8.77 6.02 9.01 5.91 9.28C5.8 9.54 5.72 9.81 5.66 10.09C5.61 10.37 5.58 10.65 5.58 10.93L5.58 19.09C5.58 19.37 5.61 19.65 5.66 19.93C5.72 20.21 5.8 20.48 5.91 20.74C6.02 21.01 6.15 21.26 6.31 21.49C6.46 21.73 6.64 21.95 6.84 22.15C7.04 22.35 7.26 22.53 7.5 22.69C7.73 22.85 7.98 22.98 8.24 23.09C8.51 23.2 8.78 23.28 9.05 23.33C9.33 23.39 9.61 23.42 9.9 23.42L20.1 23.41C20.38 23.41 20.67 23.37 20.94 23.32C21.22 23.26 21.49 23.18 21.75 23.07C22.01 22.96 22.26 22.83 22.5 22.67C22.73 22.51 22.95 22.33 23.15 22.13C23.35 21.93 23.53 21.71 23.69 21.48C23.85 21.24 23.98 20.99 24.09 20.73C24.2 20.47 24.28 20.2 24.33 19.92C24.39 19.64 24.42 19.36 24.42 19.07L24.42 10.92C24.42 10.64 24.39 10.35 24.33 10.07C24.28 9.79 24.2 9.52 24.09 9.26C23.98 9 23.85 8.75 23.69 8.51C23.53 8.28 23.35 8.06 23.15 7.86C22.95 7.66 22.73 7.48 22.5 7.32C22.26 7.16 22.01 7.03 21.75 6.92C21.49 6.81 21.22 6.73 20.94 6.67C20.67 6.62 20.38 6.59 20.1 6.59L9.9 6.6Z"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
fillRule="nonzero"
|
||||
></path>
|
||||
<path
|
||||
id="rect"
|
||||
d="M8.5 5.51L10.54 5.51L10.6 24.43L8.55 24.43L8.5 5.51Z"
|
||||
fill="#fff"
|
||||
fillOpacity="1.000000"
|
||||
fillRule="evenodd"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="min-w-[110px] p-10 pb-7 pl-7">
|
||||
<div className="p-2 border border-transparent hover:border-[#D1CA0D] bg-white/10 hover:shadow-[0px_0px_5px_4px_rgba(209,202,13,0.25),0px_0px_20px_5px_rgba(209,202,13,0.25)_inset] rounded-lg flex justify-center items-center duration-200">
|
||||
<svg
|
||||
width="24"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
src/components/magicui/scroll-progress.tsx
Normal file
43
src/components/magicui/scroll-progress.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion, MotionProps, useScroll, useSpring } from "motion/react";
|
||||
import React from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export const ScrollProgress = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const pathname = usePathname();
|
||||
|
||||
const { scrollYProgress } = useScroll();
|
||||
|
||||
const scaleX = useSpring(scrollYProgress, {
|
||||
stiffness: 200,
|
||||
damping: 50,
|
||||
restDelta: 0.001,
|
||||
});
|
||||
|
||||
if (
|
||||
pathname !== "/" &&
|
||||
pathname !== "/legal/tos" &&
|
||||
pathname !== "/legal/privacy-policy"
|
||||
)
|
||||
return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-x-0 top-0 z-[1000] h-1 origin-left bg-[#09c04c]",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
scaleX,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
ScrollProgress.displayName = "ScrollProgress";
|
||||
@ -3,18 +3,7 @@ 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 colors = ["#F2E90C"];
|
||||
|
||||
const [currentColors, setCurrentColors] = React.useState(colors);
|
||||
const [count, setCount] = React.useState(0);
|
||||
@ -46,7 +35,7 @@ export function ColourfulText({ text }: { text: string }) {
|
||||
duration: 0.5,
|
||||
delay: index * 0.05,
|
||||
}}
|
||||
className="inline-block whitespace-pre font-sans tracking-tight"
|
||||
className="inline-block whitespace-pre font-sans underline tracking-tight"
|
||||
>
|
||||
{char}
|
||||
</motion.span>
|
||||
|
||||
144
src/components/ui/glare-card.tsx
Normal file
144
src/components/ui/glare-card.tsx
Normal file
@ -0,0 +1,144 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useRef } from "react";
|
||||
|
||||
export const GlareCard = ({
|
||||
index,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
index: number;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
const isPointerInside = useRef(false);
|
||||
const refElement = useRef<HTMLDivElement>(null);
|
||||
const state = useRef({
|
||||
glare: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
background: {
|
||||
x: 50,
|
||||
y: 50,
|
||||
},
|
||||
rotate: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
});
|
||||
const containerStyle = {
|
||||
"--m-x": "50%",
|
||||
"--m-y": "50%",
|
||||
"--r-x": "0deg",
|
||||
"--r-y": "0deg",
|
||||
"--bg-x": "50%",
|
||||
"--bg-y": "50%",
|
||||
"--duration": "300ms",
|
||||
"--foil-size": "100%",
|
||||
"--opacity": "0",
|
||||
"--radius": "12px",
|
||||
"--easing": "ease",
|
||||
"--transition": "var(--duration) var(--easing)",
|
||||
} as React.CSSProperties;
|
||||
|
||||
// const backgroundStyle = {
|
||||
// "--step": "5%",
|
||||
// "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' strokeWidth='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E")`,
|
||||
// "--pattern": "var(--foil-svg) center/100% no-repeat",
|
||||
// "--rainbow":
|
||||
// "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
|
||||
// "--diagonal":
|
||||
// "repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
|
||||
// "--shade":
|
||||
// "radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
|
||||
// backgroundBlendMode: "hue, hue, hue, overlay",
|
||||
// };
|
||||
|
||||
const updateStyles = () => {
|
||||
if (refElement.current) {
|
||||
console.log(state.current);
|
||||
const { background, rotate, glare } = state.current;
|
||||
refElement.current?.style.setProperty("--m-x", `${glare.x}%`);
|
||||
refElement.current?.style.setProperty("--m-y", `${glare.y}%`);
|
||||
refElement.current?.style.setProperty("--r-x", `${rotate.x}deg`);
|
||||
refElement.current?.style.setProperty("--r-y", `${rotate.y}deg`);
|
||||
refElement.current?.style.setProperty("--bg-x", `${background.x}%`);
|
||||
refElement.current?.style.setProperty("--bg-y", `${background.y}%`);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={containerStyle}
|
||||
className="relative isolate [contain:layout_style] [perspective:600px] transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-transform"
|
||||
ref={refElement}
|
||||
onPointerMove={(event) => {
|
||||
const rotateFactor = 0.4;
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const position = {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top,
|
||||
};
|
||||
const percentage = {
|
||||
x: (100 / rect.width) * position.x,
|
||||
y: (100 / rect.height) * position.y,
|
||||
};
|
||||
const delta = {
|
||||
x: percentage.x - 50,
|
||||
y: percentage.y - 50,
|
||||
};
|
||||
|
||||
const { background, rotate, glare } = state.current;
|
||||
background.x = 50 + percentage.x / 4 - 12.5;
|
||||
background.y = 50 + percentage.y / 3 - 16.67;
|
||||
rotate.x = -(delta.x / 3.5);
|
||||
rotate.y = delta.y / 2;
|
||||
rotate.x *= rotateFactor;
|
||||
rotate.y *= rotateFactor;
|
||||
glare.x = percentage.x;
|
||||
glare.y = percentage.y;
|
||||
|
||||
updateStyles();
|
||||
}}
|
||||
onPointerEnter={() => {
|
||||
isPointerInside.current = true;
|
||||
if (refElement.current) {
|
||||
setTimeout(() => {
|
||||
if (isPointerInside.current) {
|
||||
refElement.current?.style.setProperty("--duration", "0s");
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
isPointerInside.current = false;
|
||||
if (refElement.current) {
|
||||
refElement.current.style.removeProperty("--duration");
|
||||
refElement.current?.style.setProperty("--r-x", `0deg`);
|
||||
refElement.current?.style.setProperty("--r-y", `0deg`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="h-full grid will-change-transform origin-center transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] rounded-[var(--radius)] hover:[--opacity:0.6] hover:[--duration:200ms] hover:[--easing:linear] hover:filter-none overflow-hidden">
|
||||
<div className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))]">
|
||||
<div
|
||||
className={cn(
|
||||
`h-full w-full px-5 py-8 bg-white/10 flex ${
|
||||
index !== 4 ? "flex-col" : "px-12 gap-5"
|
||||
} items-center`,
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_1px_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity transition-background duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-background [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(209,202,13,0.8)_10%,_rgba(209,202,13,0.65)_20%,_rgba(255,255,255,0)_90%)]" />
|
||||
|
||||
<div
|
||||
className="w-full h-full grid [grid-area:1/1] mix-blend-color-dodge opacity-[var(--opacity)] will-change-background transition-opacity [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:_var(--rainbow),_var(--diagonal),_var(--shade)] relative after:content-[''] after:grid-area-[inherit] after:bg-repeat-[inherit] after:bg-attachment-[inherit] after:bg-origin-[inherit] after:bg-clip-[inherit] after:bg-[inherit] after:mix-blend-exclusion after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light]"
|
||||
// style={{ ...backgroundStyle }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
128
src/components/ui/spotlight-new.tsx
Normal file
128
src/components/ui/spotlight-new.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
|
||||
type SpotlightProps = {
|
||||
gradientFirst?: string;
|
||||
gradientSecond?: string;
|
||||
gradientThird?: string;
|
||||
translateY?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
smallWidth?: number;
|
||||
duration?: number;
|
||||
xOffset?: number;
|
||||
};
|
||||
|
||||
export const Spotlight = ({
|
||||
gradientFirst = "radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .05) 50%, hsla(210, 100%, 45%, 0) 80%)",
|
||||
gradientSecond = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)",
|
||||
gradientThird = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)",
|
||||
translateY = -350,
|
||||
width = 560,
|
||||
height = 1380,
|
||||
smallWidth = 240,
|
||||
duration = 7,
|
||||
xOffset = 100,
|
||||
}: SpotlightProps = {}) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
}}
|
||||
className="pointer-events-none absolute inset-0 h-full w-full overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, xOffset, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="absolute top-0 left-0 w-screen h-screen z-40 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
transform: `translateY(${translateY}px) rotate(-45deg)`,
|
||||
background: gradientFirst,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 left-0`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
transform: "rotate(-45deg) translate(5%, -50%)",
|
||||
background: gradientSecond,
|
||||
width: `${smallWidth}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 left-0 origin-top-left`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
transform: "rotate(-45deg) translate(-180%, -70%)",
|
||||
background: gradientThird,
|
||||
width: `${smallWidth}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 left-0 origin-top-left`}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, -xOffset, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="absolute top-0 right-0 w-screen h-screen z-40 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
transform: `translateY(${translateY}px) rotate(45deg)`,
|
||||
background: gradientFirst,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 right-0`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
transform: "rotate(45deg) translate(-5%, -50%)",
|
||||
background: gradientSecond,
|
||||
width: `${smallWidth}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 right-0 origin-top-right`}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
transform: "rotate(45deg) translate(180%, -70%)",
|
||||
background: gradientThird,
|
||||
width: `${smallWidth}px`,
|
||||
height: `${height}px`,
|
||||
}}
|
||||
className={`absolute top-0 right-0 origin-top-right`}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user