+
- Vite + React
-
-
-
+ {/* 
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
new file mode 100644
index 0000000..9f8f3bb
--- /dev/null
+++ b/src/components/Hero.jsx
@@ -0,0 +1,30 @@
+const Hero = () => {
+ return (
+
+ {animation.text &&
+ );
+ } else if (animation.type === "img") {
+ return (
+
- Edit src/App.jsx and save to test HMR
-
+
-
+
+ - Click on the Vite and React logos to learn more -
- ) + ); } -export default App +export default App; diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Beyond.jsx b/src/components/Beyond.jsx new file mode 100644 index 0000000..d76cc7e --- /dev/null +++ b/src/components/Beyond.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +const Beyond = () => { + return ( +
+
+ );
+};
+
+export default Beyond;
diff --git a/src/components/BigText.jsx b/src/components/BigText.jsx
new file mode 100644
index 0000000..6287e7d
--- /dev/null
+++ b/src/components/BigText.jsx
@@ -0,0 +1,12 @@
+const BigText = () => {
+ return (
+ + Your brand isn’t an aesthetic. It’s a living organism. We help it thrive + by bringing a dynamic perspective and collaborative expertise to + everything we build. +
+
+
+ Beyond
+Design
+
+
+
+ );
+};
+
+export default BigText;
diff --git a/src/components/CollectiveBunch.jsx b/src/components/CollectiveBunch.jsx
new file mode 100644
index 0000000..312934e
--- /dev/null
+++ b/src/components/CollectiveBunch.jsx
@@ -0,0 +1,36 @@
+const CollectiveBunch = () => {
+ return (
+
+
+
+ );
+};
+
+export default CollectiveBunch;
diff --git a/src/components/CompanySection.jsx b/src/components/CompanySection.jsx
new file mode 100644
index 0000000..6a8b156
--- /dev/null
+++ b/src/components/CompanySection.jsx
@@ -0,0 +1,47 @@
+const CompanySection = () => {
+ // const [rotation, setRotation] = useState(0);
+ // useEffect(() => {
+ // let lastScrollTop = 0;
+
+ // const handleScroll = () => {
+ // const st = window.pageYOffset || document.documentElement.scrollTop;
+ // if (st > lastScrollTop) {
+ // // Downscroll
+ // setRotation((prevRotation) => prevRotation + 10);
+ // } else {
+ // // Upscroll
+ // setRotation((prevRotation) => prevRotation - 10);
+ // }
+ // lastScrollTop = st <= 0 ? 0 : st;
+ // };
+
+ // window.addEventListener("scroll", handleScroll);
+
+ // return () => {
+ // window.removeEventListener("scroll", handleScroll);
+ // };
+ // }, []);
+ return (
+
+
+
+ + We’re Darwinia Community DAO. A Crypto based service with brilliant + offers for making the CRYPTO experience fun deliverable. +
++ Join Us and enjoy your Crypto journey +
+
+ 
+ 
+
+
+ );
+};
+
+export default CompanySection;
diff --git a/src/components/CuttingEdge.jsx b/src/components/CuttingEdge.jsx
new file mode 100644
index 0000000..d2cb018
--- /dev/null
+++ b/src/components/CuttingEdge.jsx
@@ -0,0 +1,72 @@
+const CuttingEdge = () => {
+ return (
+
+ Mint, keep, share and transfer your favorite NFTs with our new community
+ {/* 
*/}
+
+ */}
+
+
+
+
+
+
+
+ );
+};
+
+export default CuttingEdge;
diff --git a/src/components/Friends.jsx b/src/components/Friends.jsx
new file mode 100644
index 0000000..8dd791b
--- /dev/null
+++ b/src/components/Friends.jsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react";
+
+const Friends = () => {
+ const [topPosition1, setTopPosition1] = useState(-30);
+ const [topPosition2, setTopPosition2] = useState(-30);
+
+ useEffect(() => {
+ let lastScrollTop = 0;
+
+ const handleScroll = () => {
+ const st = window.pageYOffset || document.documentElement.scrollTop;
+ if (st > lastScrollTop) {
+ // Downscroll
+ setTopPosition1((prevPosition) => prevPosition - 2);
+ setTopPosition2((prevPosition) => prevPosition + 2);
+ } else {
+ // Upscroll
+ setTopPosition1((prevPosition) => prevPosition + 2);
+ setTopPosition2((prevPosition) => prevPosition - 2);
+ }
+ lastScrollTop = st <= 0 ? 0 : st;
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ return (
+
+
+
+
+ + Darwinia Network +
++ You’re the reason we’re here, full stop. We value collaboration + above ego and tackle the extra mile to achieve your vision with a + can-do attitude. +
+ + Visit + +
+
+
+
+
+
+ + MSGPort +
++ Proactive about adopting the latest technologies, we deliver + forward-thinking brand solutions that evolve to serve future + needs. +
+ + Visit + +
+
+
+
+
+
+ + Hide Nothing +
++ You’re the reason we’re here, full stop. We value collaboration + above ego and tackle the extra mile to achieve your vision with + a can-do attitude. +
+ + Visit + +
+
+
+
+ + Fresh Angles +
++ Explore. Adapt. Stay curious. Our team lives by these values, + designing to inspire and create a better, more interesting + world. +
+ + Visit + +
+
+ );
+};
+
+export default Friends;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..72721b9
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,15 @@
+const Header = () => {
+ return (
+
+
+ Friends
+& Partners
+
+
+ -
+ {Array.from({ length: 16 }, (_, i) => (
+
- + Hello World + + ))} +
-
+ {Array.from({ length: 16 }, (_, i) => (
+
- + Hello World + + ))} +
unfold
*/} + +
+
+
+
+ Join
+
+ {/* Overlay */}
+
+
+
+ Darwinia
+
+
+ );
+};
+
+export default Hero;
diff --git a/src/components/InfiniteSlider.jsx b/src/components/InfiniteSlider.jsx
new file mode 100644
index 0000000..2229415
--- /dev/null
+++ b/src/components/InfiniteSlider.jsx
@@ -0,0 +1,50 @@
+const InfiniteSlider = () => {
+ return (
+
+ Darwinia
Community
+
DAO
+
+
+
+
+
+
+
+ {/* */}
+
+
+ );
+};
+
+export default InfiniteSlider;
diff --git a/src/components/InfiniteText.jsx b/src/components/InfiniteText.jsx
new file mode 100644
index 0000000..c4f2743
--- /dev/null
+++ b/src/components/InfiniteText.jsx
@@ -0,0 +1,20 @@
+const InfiniteText = () => {
+ return (
+
+
+
+
+
+ + Safe Wallet +
++ Fun Crypto +
++ Mint NFTs +
++ Darwinia +
++ Wizard +
++ EVM Based +
+
+
+ );
+};
+
+export default InfiniteText;
diff --git a/src/components/LetsChat.jsx b/src/components/LetsChat.jsx
new file mode 100644
index 0000000..f9abdce
--- /dev/null
+++ b/src/components/LetsChat.jsx
@@ -0,0 +1,19 @@
+const LetsChat = () => {
+ return (
+
+
+
+
+
+ + We make things Better +
+
+
+ );
+};
+
+export default LetsChat;
diff --git a/src/components/Online.jsx b/src/components/Online.jsx
new file mode 100644
index 0000000..e77c0e0
--- /dev/null
+++ b/src/components/Online.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const Online = () => {
+ return (
+
+
+
+ + Lets Start Now +
++ Join the community by connecting to your wallet +
+
+
+ );
+};
+
+export default Online;
diff --git a/src/components/OurClients.jsx b/src/components/OurClients.jsx
new file mode 100644
index 0000000..efac192
--- /dev/null
+++ b/src/components/OurClients.jsx
@@ -0,0 +1,165 @@
+import { useRef } from "react";
+import { useIsVisible } from "../hook/useIsVisible";
+import { useSpring, animated } from "react-spring";
+
+const OurClients = () => {
+ const componentRef = useRef();
+ const isVisible = useIsVisible(componentRef);
+
+ const animations = [
+ {
+ type: "div",
+ styles: {
+ top: isVisible ? "-70%" : "50%",
+ left: isVisible ? "5%" : "50%",
+ config: { duration: 700 },
+ },
+ className:
+ "lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center hover:scale-[1.1] duration-300",
+ text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
+ },
+ {
+ type: "img",
+ styles: {
+ top: isVisible ? "-70%" : "50%",
+ left: isVisible ? "40%" : "50%",
+ config: { duration: 700 },
+ },
+ src: "/images/NFT/NFT_5.png",
+ className:
+ "w-[150px] h-[150px] lg:absolute p-[20px] rounded-full lg:-rotate-12 hidden lg:block hover:scale-[1.1] duration-300",
+ },
+ {
+ type: "div",
+ styles: {
+ top: isVisible ? "-70%" : "50%",
+ right: isVisible ? "13%" : "50%",
+ config: { duration: 700 },
+ },
+ className:
+ "lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 flex items-center hover:scale-[1.1] duration-300",
+ text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
+ },
+ {
+ type: "img",
+ styles: {
+ top: isVisible ? "-10%" : "50%",
+ left: isVisible ? "0" : "50%",
+ config: { duration: 700 },
+ },
+ src: "/images/DCDAO.png",
+ alt: "",
+ className:
+ "lg:absolute w-[9.76vw] h-[9.76vw] hidden lg:block lg:-rotate-12 hover:scale-[1.1] duration-300",
+ },
+ {
+ type: "img",
+ styles: {
+ top: isVisible ? "-10%" : "50%",
+ right: isVisible ? "0" : "50%",
+ config: { duration: 700 },
+ },
+ src: "/images/DCDAO.png",
+ alt: "",
+ className:
+ "lg:absolute w-[9.76vw] h-[9.76vw] hidden lg:block lg:rotate-12 hover:scale-[1.1] duration-300",
+ },
+ {
+ type: "div",
+ styles: {
+ bottom: isVisible ? "-60%" : "50%",
+ left: isVisible ? "0" : "50%",
+ config: { duration: 700 },
+ },
+ className:
+ "lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center hover:scale-[1.1] duration-300",
+ text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
+ },
+ {
+ type: "img",
+ styles: {
+ bottom: isVisible ? "-55%" : "50%",
+ left: isVisible ? "35%" : "50%",
+ config: { duration: 700 },
+ },
+ src: "/images/NFT/NFT_4.png",
+ className:
+ "w-[150px] h-[150px] lg:absolute p-[20px] rounded-full lg:-rotate-12 hidden lg:block hover:scale-[1.1] duration-300",
+ },
+ {
+ type: "div",
+ styles: {
+ bottom: isVisible ? "-90%" : "50%",
+ right: isVisible ? "20%" : "50%",
+ config: { duration: 700 },
+ },
+ className:
+ "lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 flex items-center hover:scale-[1.1] duration-300",
+ text: "T“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
+ },
+ {
+ type: "img",
+ styles: {
+ bottom: isVisible ? "-80%" : "50%",
+ right: isVisible ? "0" : "50%",
+ config: { duration: 700 },
+ },
+ src: "/images/NFT/NFT_6.png",
+ className:
+ "w-[150px] h-[150px] lg:absolute p-[20px] rounded-full lg:-rotate-12 hidden lg:block hover:scale-[1.1] duration-300",
+ },
+ {
+ type: "div",
+ styles: {
+ bottom: isVisible ? "0" : "50%",
+ right: isVisible ? "0" : "50%",
+ config: { duration: 700 },
+ },
+ className:
+ "lg:w-[21vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center hover:scale-[1.1] duration-300",
+ text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
+ },
+ ];
+
+ const animatedElements = animations.map((animation, index) => {
+ if (animation.type === "div") {
+ return (
+
+ icon
+ Online
+
+
+ + Your company is ready for big moves and we are here for it. Turn bold + ideas into an impactful brand. +
+{animation.text}
} +
+ {animatedElements}
+
+ );
+};
+
+export default OurClients;
diff --git a/src/components/SafePal.jsx b/src/components/SafePal.jsx
new file mode 100644
index 0000000..007daa2
--- /dev/null
+++ b/src/components/SafePal.jsx
@@ -0,0 +1,67 @@
+import { useState, useRef, useEffect } from "react";
+
+const SafePal = () => {
+ const images = [
+ { src: "/images/NFT/NFT_1.png", alt: "NFT 1" },
+ { src: "/images/NFT/NFT_2.png", alt: "NFT 2" },
+ { src: "/images/NFT/NFT_3.png", alt: "NFT 3" },
+ { src: "/images/NFT/NFT_4.png", alt: "NFT 4" },
+ { src: "/images/NFT/NFT_5.png", alt: "NFT 5" },
+ { src: "/images/NFT/NFT_6.png", alt: "NFT 6" },
+ { src: "/images/NFT/NFT_7.png", alt: "NFT 7" },
+ { src: "/images/NFT/NFT_8.png", alt: "NFT 8" },
+ { src: "/images/NFT/NFT_9.png", alt: "NFT 9" },
+ { src: "/images/NFT/NFT_10.png", alt: "NFT 10" },
+ ];
+
+ const carouselRef = useRef(null);
+
+ // const handleImageClick = (index) => {
+ // setActiveIndex(index);
+ // };
+
+ const handleScroll = () => {
+ const scrollTop = window.scrollY;
+ carouselRef.current.scrollLeft =
+ scrollTop % carouselRef.current.offsetWidth;
+ };
+
+ useEffect(() => {
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
+
+ return (
+ + Our Clients Can’t Say Enough About Us. +
+ + Darwinia Community + +
+
+ );
+};
+
+export default SafePal;
diff --git a/src/components/Subscription.jsx b/src/components/Subscription.jsx
new file mode 100644
index 0000000..ff55055
--- /dev/null
+++ b/src/components/Subscription.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+const Subscription = () => {
+ return (
+ + SafePal +
++ Making your crypto experience safe and fun. +
+
+
+
+ {images.map((image, index) => (
+
+
+ 
+
+ ))}
+
+
+ );
+};
+
+export default Subscription;
diff --git a/src/hook/useIsVisible.js b/src/hook/useIsVisible.js
new file mode 100644
index 0000000..9ba6e94
--- /dev/null
+++ b/src/hook/useIsVisible.js
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useIsVisible(ref) {
+ const [isIntersecting, setIntersecting] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(([entry]) =>
+ setIntersecting(entry.isIntersecting)
+ );
+
+ observer.observe(ref.current);
+ return () => {
+ observer.disconnect();
+ };
+ }, [ref]);
+
+ return isIntersecting;
+}
diff --git a/src/index.css b/src/index.css
index 6119ad9..6f711d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,31 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+html {
+ overflow-x: hidden;
}
-
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+ background: black;
}
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+.custom-scrollbar::-webkit-scrollbar {
+ height: 12px;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: black;
}
-button:hover {
- border-color: #646cff;
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: #fb3b94;
+ border-radius: 6px;
}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: #ff66b2;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+.no-scrollBar::-webkit-scrollbar {
+ appearance: none;
}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..f37302d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ animation: {
+ "loop-scroll": "loop-scroll 15s linear infinite",
+ "loop-shake": "loop-shake 1s linear infinite",
+ },
+ keyframes: {
+ "loop-scroll": {
+ from: { transform: "translateX(0)" },
+ to: { transform: "translateX(-100%)" },
+ },
+ "loop-shake": {
+ "0%": { transform: "scale(1)" },
+ "50%": { transform: "scale(1.1)" },
+ "100%": { transform: "scale(1)" },
+ },
+ },
+ },
+ plugins: [],
+};
+
+
+
+ Lorem ipsum
+dolor sit.
+
+
+ -
+
- hello world +
- hello world +
- hello world +
- hello world +
-
+
- hello world +
- hello world +
- hello world +
- hello world +
-
+
- hello world +
- hello world +
- hello world +
- hello world +