diff --git a/src/app/(home)/FAQsSection.tsx b/src/app/(home)/FAQsSection.tsx index b545099..b0faa3a 100644 --- a/src/app/(home)/FAQsSection.tsx +++ b/src/app/(home)/FAQsSection.tsx @@ -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" >
-

{question} -

+
-

+ >
); @@ -100,17 +109,35 @@ export default function FAQsSection() { return (
-

+ FAQs -

+ -

+ Frequently Asked Question -

+ -

+ Answers to all your most asked questions -

+
{faqs.map((faq, index) => ( @@ -118,12 +145,18 @@ export default function FAQsSection() { ))}
-

+ Still have questions?
Reach out to{" "} support@collano.ai -

+
); diff --git a/src/app/(home)/FeaturesSection.tsx b/src/app/(home)/FeaturesSection.tsx index 2ba5f6b..7e94d44 100644 --- a/src/app/(home)/FeaturesSection.tsx +++ b/src/app/(home)/FeaturesSection.tsx @@ -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 (
-

+ Key Features -

+ -

+ The Intelligence Layer for BNB Smart Chain -

+ -

+ Collano is an advanced, open-source platform that seamlessly integrates state-of-the-art language
models with BNB Smart Chain technology. We've created an intelligent interface that understands your
needs and executes complex blockchain operations with unprecedented ease. -

+ -
+ {features.map((feature, index) => { return ( -
- {feature.img} +
+ + {feature.img} -
-

- {feature.title} -

+

+ {feature.title} +

-

- {feature.description} -

-
+

+ {feature.description} +

+
+
); })} -
+
); diff --git a/src/app/(home)/HeroSection.tsx b/src/app/(home)/HeroSection.tsx index c1ca1c5..90bc26c 100644 --- a/src/app/(home)/HeroSection.tsx +++ b/src/app/(home)/HeroSection.tsx @@ -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(false); + + useEffect(() => { + if (isCopied) { + setTimeout(() => { + setIsCopied(false); + }, 3000); + } + }); + return (
-
- CA : 0xdadkaddasdhkjzhkjhdkh2k3hksjhadkjhk23jhajd -
+ { + 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"}{" "} + -

+ Your Intelligent Copilot
for{" "} -

+ -

+ 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. -

+ - - Get Started - + + Get Started + +
- + + + - + + + - + + + - + + +
); diff --git a/src/app/(home)/MobileSection.tsx b/src/app/(home)/MobileSection.tsx new file mode 100644 index 0000000..87ae3c2 --- /dev/null +++ b/src/app/(home)/MobileSection.tsx @@ -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 ( +
+
+
+
+ + + + + + + Mobile Version{" "} + + COMING SOON + + + + + Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + +
+ +
+ +
+
+
+
+ ); +} diff --git a/src/app/(home)/RoadmapSection.tsx b/src/app/(home)/RoadmapSection.tsx index cf35794..720af5e 100644 --- a/src/app/(home)/RoadmapSection.tsx +++ b/src/app/(home)/RoadmapSection.tsx @@ -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 (
-

+ Roadmap -

+ -

+ From Hero to SuperHero, we keep building -

+ -

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident. -

+
{phases.map((phase, index) => { return ( -
{ 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}
-
+ ); })}
-
-

- {phases[activePhase].bigTitle} -

+ {activePhase === 0 && ( + +

+ {phases[activePhase].bigTitle} +

-

- {phases[activePhase].description} -

-
+

+ {phases[activePhase].description} +

+ + )} + + {activePhase === 1 && ( + +

+ {phases[activePhase].bigTitle} +

+ +

+ {phases[activePhase].description} +

+ + )} + + {activePhase === 2 && ( + +

+ {phases[activePhase].bigTitle} +

+ +

+ {phases[activePhase].description} +

+ + )} + + {activePhase === 3 && ( + +

+ {phases[activePhase].bigTitle} +

+ +

+ {phases[activePhase].description} +

+ + )}
); diff --git a/src/app/(home)/TokenomicsSection.tsx b/src/app/(home)/TokenomicsSection.tsx index 651356f..2c88440 100644 --- a/src/app/(home)/TokenomicsSection.tsx +++ b/src/app/(home)/TokenomicsSection.tsx @@ -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 (
-

+ Tokenomics -

+ -

+ Tokenomics clear as transparent glass -

+ -

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident. -

+
-
+

Supply

@@ -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.

-
+ -
-

- Allocations -

+
+ +

+ Allocations +

-

- 10% Dev Allocations -

+

+ 5% Team Allocations +

-

- Team Allocations : 5% (Vested with a linear cliff)
{" "} - Strategic Partnerships and Marketing : 5% -

+

Vested with a linear cliff

+ + + +

+ PARTNERSHIPS +

+ +

+ 5% For Strategic Partnerships and Marketing +

+
-
+ -
+
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 1d1b7c6..7a0bea3 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -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() { + diff --git a/src/app/dashboard/Types.tsx b/src/app/dashboard/Types.tsx new file mode 100644 index 0000000..f68d5cc --- /dev/null +++ b/src/app/dashboard/Types.tsx @@ -0,0 +1,119 @@ +"use client"; +import { useState } from "react"; + +export default function Types() { + const [state, setState] = useState(0); + + return ( +
+ + + +
+ ); +} diff --git a/src/app/dashboard/chat/2/page.tsx b/src/app/dashboard/chat/2/page.tsx new file mode 100644 index 0000000..e55330b --- /dev/null +++ b/src/app/dashboard/chat/2/page.tsx @@ -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(true); + + return ( +
+
+ + +
+
+ + Title of the Chat comes in this section + + + + 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. + + + + + +
+

+ 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. +

+ +
+
{ + setIsOpen(!isOpen); + }} + className="flex justify-between items-center cursor-pointer" + > +
+ + + + +
+

+ Title of the Dropdown appears in this section +

+

+ Collapse Details +

+
+
+ + +
+ + {isOpen && ( +

+ 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.{" "} +
+
+ 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.
+
+ 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. +

+ )} +
+ +
+ + + + + + + +
+
+ +
+ + +
+ + + +
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/app/dashboard/chat/3/page.tsx b/src/app/dashboard/chat/3/page.tsx new file mode 100644 index 0000000..a0ddf79 --- /dev/null +++ b/src/app/dashboard/chat/3/page.tsx @@ -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 ( +
+
+ + +
+
+ + Title of the Chat comes in this section + + + + 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. + + + + + +
+
+
+
+ + + + +
+

DeepSearch

+

+ 21s * 24 sources +

+
+
+ +
+ + + + + + + +
+

Researching

+

topic name here

+
+
+ +
+ + + + + + + +
+

+ Exploring research +

+

papers

+
+
+ +
+ + + + + +
+

Complete

+
+
+
+ +

+ 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.
+
+ 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.
+
+ Diam habitant ex maximus odio praesent semper ipsum ex. +

+
+ +
+
+ + + + + + + + + +

24 web pages

+
+ +
+ + + + + + + +
+
+
+ +
+ + +
+ + + +
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/app/dashboard/chat/page.tsx b/src/app/dashboard/chat/page.tsx new file mode 100644 index 0000000..26951fd --- /dev/null +++ b/src/app/dashboard/chat/page.tsx @@ -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 ( +
+
+ + +
+
+ + Title of the Chat comes in this section + + + + 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. + + + + + +
+

+ 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. +

+ +
+ + + + + + + +
+
+ +
+ + +
+ + + +
+ +
+ + +
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/app/dashboard/home/page.tsx b/src/app/dashboard/home/page.tsx index 48ff93c..c30c414 100644 --- a/src/app/dashboard/home/page.tsx +++ b/src/app/dashboard/home/page.tsx @@ -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 (
-
-
-
- - - -

- Beta -

- - -
- -

- Your Conversations -

- -
- - Getting Started with... - - - - Lorem Ipsum.. - - - - Duis aute irure... - - - - Dolor in reprehenderit... - - - - Excepteur sint... - - - - Ut enim ad minim... - - - - Lorem ipsum dolor... - -
-
- -
-
-

- - - - - - {" "} - 0x..........abcd -

- - -
- -
- -
-

© 2025 Collano Labs

- -
- - - - - - - - - - - -
-
-
-
+
+
-

+ COLLANO v1.0 -

+ -

+ Welcome John 👋 -

+ -

We’re glad to see you today

+ + We’re glad to see you today +
-
+ {items.map((item, index) => { return (
); })} -
+
-
-
- - -
-
+
-
-

- Press{" "} - - - - {" "} - to send -

- +
-
+
@@ -658,30 +435,30 @@ export default function DashboardHome() { !isWalletPopupActive ? "opacity-0 pointer-events-none" : "" } duration-200`} > - + + + + -

My Wallet

diff --git a/src/app/delegate/page.tsx b/src/app/delegate/page.tsx index a685cba..a711a41 100644 --- a/src/app/delegate/page.tsx +++ b/src/app/delegate/page.tsx @@ -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() {
-
+ @@ -17,37 +23,80 @@ export default function Delegate() { Beta

-
+ -

+ Get Started -

+ -

+ Welcome -

+ -

+ 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. -

+
-
- - Terms of Service + + + Terms - - Privacy Policy + + Privacy -
-
- + + Docs + + + + + - + -
+
-

+ Delegate -

+ -

+ Delegate your wallet -

+ -
+ 0x625EF1A576fAF469A0685871FAB46B9bE158ed49

-
+ -

+ After delegating your wallet, you would be able to access Collano Labs AI, BNB CoPilot Program -

+ - - - - - - - Delegate - + + + + + + Delegate + +
diff --git a/src/app/globals.css b/src/app/globals.css index e47b1fb..fdb1996 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1ffca54..7a59f83 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - {children} +
{children}
+ + + ); diff --git a/src/app/legal/privacy-policy/HeroSection.tsx b/src/app/legal/privacy-policy/HeroSection.tsx new file mode 100644 index 0000000..b3cc2b0 --- /dev/null +++ b/src/app/legal/privacy-policy/HeroSection.tsx @@ -0,0 +1,98 @@ +"use client"; +import { motion } from "motion/react"; + +export default function HeroSection() { + return ( +
+
+
+ + Privacy Policy + + + + Last Updated : Feb 20, 2025 + + +
+

+ Main Heading H1 +

+

+ Welcome to Website Name!
+
+ These terms and conditions outline the rules and regulations for + the use of Company Name's Website, located + at Website.com.
+ 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.
+
+ 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. +

+ +

+ Secondary heading H2 +

+

+ We employ the use of cookies. By accessing Website Name, you + agreed to use cookies in agreement with the Company + Name's Privacy Policy. +

+ +

+ Secondary heading H2 +

+

+ 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.
+
+ Pointers appear like such :
• Nam fermentum integer potenti + malesuada porta vulputate pharetra.
• Parturient tellus + justo ut aenean dapibus viverra sollicitudin.
• Maecenas + placerat habitant dolor accumsan neque curae libero.
• + Adipiscing tempus elementum adipiscing arcu enim.
• Magna + ornare eros ultricies, viverra sagittis class?
• Cras mollis + est aliquam ridiculus aenean aliquam ipsum.
• Volutpat + scelerisque curabitur; ligula netus posuere facilisis.
• + Elit tempus habitasse consequat viverra; urna congue quisque.{" "} +
• Vehicula pellentesque eleifend auctor vitae gravida mattis + tellus? +

+
+
+
+
+ ); +} diff --git a/src/app/legal/privacy-policy/page.tsx b/src/app/legal/privacy-policy/page.tsx new file mode 100644 index 0000000..ff74db4 --- /dev/null +++ b/src/app/legal/privacy-policy/page.tsx @@ -0,0 +1,22 @@ +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; +import HeroSection from "./HeroSection"; + +export default function PrivacyPolicy() { + return ( +
+ + + + +
+
+ ); +} diff --git a/src/app/legal/tos/HeroSection.tsx b/src/app/legal/tos/HeroSection.tsx new file mode 100644 index 0000000..d8331e1 --- /dev/null +++ b/src/app/legal/tos/HeroSection.tsx @@ -0,0 +1,98 @@ +"use client"; +import { motion } from "motion/react"; + +export default function HeroSection() { + return ( +
+
+
+ + Terms of Service + + + + Last Updated : Feb 20, 2025 + + +
+

+ Main Heading H1 +

+

+ Welcome to Website Name!
+
+ These terms and conditions outline the rules and regulations for + the use of Company Name's Website, located + at Website.com.
+ 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.
+
+ 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. +

+ +

+ Secondary heading H2 +

+

+ We employ the use of cookies. By accessing Website Name, you + agreed to use cookies in agreement with the Company + Name's Privacy Policy. +

+ +

+ Secondary heading H2 +

+

+ 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.
+
+ Pointers appear like such :
• Nam fermentum integer potenti + malesuada porta vulputate pharetra.
• Parturient tellus + justo ut aenean dapibus viverra sollicitudin.
• Maecenas + placerat habitant dolor accumsan neque curae libero.
• + Adipiscing tempus elementum adipiscing arcu enim.
• Magna + ornare eros ultricies, viverra sagittis class?
• Cras mollis + est aliquam ridiculus aenean aliquam ipsum.
• Volutpat + scelerisque curabitur; ligula netus posuere facilisis.
• + Elit tempus habitasse consequat viverra; urna congue quisque.{" "} +
• Vehicula pellentesque eleifend auctor vitae gravida mattis + tellus? +

+
+
+
+
+ ); +} diff --git a/src/app/legal/tos/page.tsx b/src/app/legal/tos/page.tsx new file mode 100644 index 0000000..d22cee0 --- /dev/null +++ b/src/app/legal/tos/page.tsx @@ -0,0 +1,22 @@ +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; +import HeroSection from "./HeroSection"; + +export default function TOS() { + return ( +
+ + + + +
+
+ ); +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 312399a..2f7ba8a 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -67,12 +67,25 @@ export default function Login() { transition={{ duration: 0.25, delay: 0.4 }} className="flex gap-5" > - - Terms of Service + + Terms - - Privacy Policy + + Privacy + + + + Docs @@ -83,7 +96,7 @@ export default function Login() { transition={{ duration: 0.25, delay: 0.5 }} className="flex items-center gap-4" > - + - + @@ -162,11 +177,17 @@ export default function Login() { className="mb-5 text-white/75" > By proceeding you agree to our{" "} - + Terms of Service {" "} and{" "} - + Privacy Policy. diff --git a/src/assets/images/avatars/1.svg b/src/assets/images/avatars/1.svg new file mode 100644 index 0000000..9934ae9 --- /dev/null +++ b/src/assets/images/avatars/1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/images/brand/footer-logo copy.png b/src/assets/images/brand/footer-logo copy.png new file mode 100644 index 0000000..12d3061 Binary files /dev/null and b/src/assets/images/brand/footer-logo copy.png differ diff --git a/src/assets/images/brand/icon.png b/src/assets/images/brand/icon.png new file mode 100644 index 0000000..523cfe3 Binary files /dev/null and b/src/assets/images/brand/icon.png differ diff --git a/src/assets/images/brand/logo.png b/src/assets/images/brand/logo.png new file mode 100644 index 0000000..12d3061 Binary files /dev/null and b/src/assets/images/brand/logo.png differ diff --git a/src/assets/images/mobile.png b/src/assets/images/mobile.png new file mode 100644 index 0000000..b205bb9 Binary files /dev/null and b/src/assets/images/mobile.png differ diff --git a/src/assets/images/tokenomics.png b/src/assets/images/tokenomics.png index 6e05bd1..561cbb1 100644 Binary files a/src/assets/images/tokenomics.png and b/src/assets/images/tokenomics.png differ diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 1476931..47a8e5a 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -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 ( -
+
-
+

© 2025 Collano Labs

- + - +
- + Terms of Service - + Privacy Policy
- -
-
+ ); } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7d2b574..ea5648b 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -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 ( - + ); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..1fb663a --- /dev/null +++ b/src/components/Sidebar.tsx @@ -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(true); + + return ( +
+ {isActive ? ( + <> +
+ + + + +

+ Beta +

+ + + + + +
+ + + Your Conversations + + + + + Getting Started with... + + + + Lorem Ipsum.. + + + + Duis aute irure... + + + + Dolor in reprehenderit... + + + + Excepteur sint... + + + + Ut enim ad minim... + + + + Lorem ipsum dolor... + + + + + Subscriptions{" "} + + Coming Soon + + +
+ + +
+

Mobile Version

+ + + Coming Soon + +
+ +
+

+ + + + + + {" "} + 0x..........abcd +

+ +
+ + +
+ + + + + + Log out + +
+
+
+ +
+ +
+

© 2025 Collano Labs

+ +
+ + + + + + + + + + + +
+
+ + + ) : ( + <> +
+ + + + + +
+ +
+
+ + + + + + +
+
+ + )} +
+ ); +} diff --git a/src/components/magicui/scroll-progress.tsx b/src/components/magicui/scroll-progress.tsx new file mode 100644 index 0000000..9f148fa --- /dev/null +++ b/src/components/magicui/scroll-progress.tsx @@ -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, 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 ( + + ); +}); + +ScrollProgress.displayName = "ScrollProgress"; diff --git a/src/components/ui/colourful-text.tsx b/src/components/ui/colourful-text.tsx index dde9e3a..05bb345 100644 --- a/src/components/ui/colourful-text.tsx +++ b/src/components/ui/colourful-text.tsx @@ -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} diff --git a/src/components/ui/glare-card.tsx b/src/components/ui/glare-card.tsx new file mode 100644 index 0000000..b309123 --- /dev/null +++ b/src/components/ui/glare-card.tsx @@ -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(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 ( +
{ + 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`); + } + }} + > +
+
+
+ {children} +
+
+ +
+ +
+
+
+ ); +}; diff --git a/src/components/ui/spotlight-new.tsx b/src/components/ui/spotlight-new.tsx new file mode 100644 index 0000000..763d4a4 --- /dev/null +++ b/src/components/ui/spotlight-new.tsx @@ -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 ( + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + ); +};