mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 15:55:50 +00:00
Updated links and form
This commit is contained in:
rockyeverlast
@@ -3,8 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="" />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="./src/assets/images/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rubix</title>
|
||||
</head>
|
||||
|
||||
BIN
src/assets/images/contactDiscord.png
Normal file
BIN
src/assets/images/contactDiscord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/favicon.png
Normal file
BIN
src/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -28,10 +28,7 @@ const items = [
|
||||
id: 1,
|
||||
img: image1,
|
||||
title: "DeFi Apps",
|
||||
content: `Use Rubix to develop DeFi apps with improved payment processing,
|
||||
money transfers, record keeping, and compliance reporting.</br>
|
||||
</br>
|
||||
Use Rubix to develop a variety of DeFi apps.
|
||||
content: `Use Rubix to develop a variety of DeFi apps.
|
||||
Rubix can also help you with improving payment processing,
|
||||
money transfers, record keeping, and compliance reporting.`,
|
||||
},
|
||||
@@ -40,9 +37,6 @@ const items = [
|
||||
img: token,
|
||||
title: "Tokenization",
|
||||
content: `Rubix allows you to build ultra-scalable, interoperable,
|
||||
and permissioned networks across industries at low or no cost, without any intermediaries.</br>
|
||||
</br>
|
||||
Rubix allows you to build ultra-scalable, interoperable,
|
||||
and permissioned networks to build asset tokenization use cases across industries at low or no cost,
|
||||
without any intermediaries.
|
||||
`,
|
||||
@@ -51,11 +45,7 @@ const items = [
|
||||
id: 3,
|
||||
img: collab,
|
||||
title: "Data Collaboration",
|
||||
content: `Rubix in tandem with the right privacy-enhancing tools,
|
||||
can help organisations build trustless and permissionless data collaboration use cases.</br>
|
||||
</br>
|
||||
|
||||
Rubix in tandem with the right privacy-enhancing tools, can help organisations build trustless and permissionless data collaboration use cases.
|
||||
content: `Rubix in tandem with the right privacy-enhancing tools, can help organisations build trustless and permissionless data collaboration use cases.
|
||||
The plethora of use cases could range from simple insight sharing to running acquisition campaigns on second-party data or
|
||||
non-competing brands building federated learning-based look-alike models without sharing PII data with each other.`,
|
||||
},
|
||||
@@ -91,9 +81,9 @@ const Solve = () => {
|
||||
const handleToggle = (index) => {
|
||||
setExpandedCardIndex((prevIndex) => (prevIndex === index ? null : index));
|
||||
setCollapseStates((prevStates) => {
|
||||
const updatedStates = [...prevStates]; // Create a copy of previous states
|
||||
updatedStates[index] = !updatedStates[index]; // Toggle the state of the clicked card
|
||||
return updatedStates; // Return the updated states
|
||||
const updatedStates = [...prevStates];
|
||||
updatedStates[index] = !updatedStates[index];
|
||||
return updatedStates;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Text, SimpleGrid, Card, Image, Box, Flex } from "@chakra-ui/react";
|
||||
// import map from "../../assets/images/map-pin.png";
|
||||
import linkedin from "../../assets/images/linkedin.png";
|
||||
import games from "../../assets/images/discot.png";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
|
||||
return (
|
||||
@@ -14,23 +15,24 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
|
||||
backgroundRepeat={"no-repeat"}
|
||||
>
|
||||
<Text display={"flex"}>
|
||||
<Text
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
_hover={{
|
||||
"&::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "linear-gradient(to bottom, #f8697a8c 0%, #8d54f86e 86%)",
|
||||
borderRadius:"5px"
|
||||
}
|
||||
}}
|
||||
<Text
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
_hover={{
|
||||
"&::before": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background:
|
||||
"linear-gradient(to bottom, #f8697a8c 0%, #8d54f86e 86%)",
|
||||
borderRadius: "5px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image src={imageUrl} />
|
||||
<Image src={imageUrl} />
|
||||
</Text>
|
||||
<Text
|
||||
position={"relative"}
|
||||
@@ -40,16 +42,18 @@ const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => {
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: "15px",
|
||||
height: "62%",
|
||||
height: "84%",
|
||||
width: "100%",
|
||||
borderLeft: "1px solid #ffffff70",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={linkedin}
|
||||
style={{ minWidth: "34px", height: "34px", marginBottom: "10px" }}
|
||||
/>
|
||||
<img src={games} style={{ minWidth: "34px", height: "34px" }} />
|
||||
<Link>
|
||||
<img
|
||||
src={linkedin}
|
||||
style={{ minWidth: "34px", height: "34px", marginBottom: "10px" }}
|
||||
/>
|
||||
</Link>
|
||||
{/* <img src={games} style={{ minWidth: "34px", height: "34px" }} /> */}
|
||||
</Text>
|
||||
</Text>
|
||||
{/* <Text
|
||||
|
||||
@@ -21,10 +21,10 @@ const HomeCard = ({ key, date, text, link }) => {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
width={"475px"}
|
||||
width={"420px"}
|
||||
background={"#151419"}
|
||||
borderRadius={"10px"}
|
||||
minHeight={"475px"}
|
||||
minHeight={"420px"}
|
||||
key={key}
|
||||
sx={{
|
||||
"@media (max-width: 600px)": {
|
||||
|
||||
@@ -32,6 +32,7 @@ const individuals = [
|
||||
description:
|
||||
"A visionary poised to deliver trustless, secure internet and passwordless cyber security",
|
||||
imageUrl: imgOne,
|
||||
link: `https://www.linkedin.com/in/kc-reddy-767a3463/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -40,6 +41,7 @@ const individuals = [
|
||||
description:
|
||||
"Global business leader with a technology orientation and a vision to drive economic value.",
|
||||
imageUrl: imgtwo,
|
||||
link: `https://www.linkedin.com/in/ravi-srinivasa-murty-7a46041/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -48,6 +50,7 @@ const individuals = [
|
||||
description:
|
||||
"Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
|
||||
imageUrl: imgthree,
|
||||
link: `https://www.linkedin.com/in/hari-krishnan-1691b6120/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -56,6 +59,7 @@ const individuals = [
|
||||
description:
|
||||
"Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
|
||||
imageUrl: imgten,
|
||||
link: `https://www.linkedin.com/in/eser-torun-cfa?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -64,6 +68,7 @@ const individuals = [
|
||||
description:
|
||||
"A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
|
||||
imageUrl: imgfour,
|
||||
link: `https://www.linkedin.com/in/gokul-p-s-3a8445130/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -72,6 +77,7 @@ const individuals = [
|
||||
description:
|
||||
"A motivated and responsible B tech Graduate, with a strong work ethic.",
|
||||
imageUrl: imgfive,
|
||||
link: ` https://www.linkedin.com/in/allen-iype-p-cherian/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -80,6 +86,7 @@ const individuals = [
|
||||
description:
|
||||
"Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
|
||||
imageUrl: imgsix,
|
||||
link: `https://www.linkedin.com/in/nidhinmahesh/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -88,6 +95,7 @@ const individuals = [
|
||||
description:
|
||||
"Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
|
||||
imageUrl: imgeleven,
|
||||
link: `https://www.linkedin.com/in/arnabghose997?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -96,6 +104,7 @@ const individuals = [
|
||||
description:
|
||||
"Enthusiastic blockchain developer who pushes herself every day to excel at work.",
|
||||
imageUrl: imgseven,
|
||||
link: `https://www.linkedin.com/in/ashita-gupta-5a0827167/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -104,6 +113,7 @@ const individuals = [
|
||||
description:
|
||||
"A very humble and talented Golang developer and mechatronics and blockchain engineer",
|
||||
imageUrl: imgeight,
|
||||
link: `https://www.linkedin.com/in/vaishnav-c-h-134053221/`,
|
||||
},
|
||||
{
|
||||
location: "india",
|
||||
@@ -112,6 +122,7 @@ const individuals = [
|
||||
description:
|
||||
"A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
|
||||
imageUrl: imgnine,
|
||||
link: `https://www.linkedin.com/in/maneesha-panda/`,
|
||||
},
|
||||
// {
|
||||
// location: "india",
|
||||
|
||||
@@ -90,6 +90,7 @@ const Connect = () => {
|
||||
fontSize={"38px"}
|
||||
color={"#fff"}
|
||||
marginBottom={"3rem"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
|
||||
@@ -76,6 +76,7 @@ const Place = () => {
|
||||
fontSize={"38px"}
|
||||
textTransform={"capitalize"}
|
||||
color={"#fff"}
|
||||
textAlign={"center"}
|
||||
sx={{
|
||||
"@media (max-width: 500px)": {
|
||||
fontSize: "22px",
|
||||
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import BGimage from "../../assets/images/form.webp";
|
||||
import formx from "../../assets/images/formx.png";
|
||||
import formfb from "../../assets/images/formfb.png";
|
||||
import discord from "../../assets/images/contactDiscord.png";
|
||||
import forml from "../../assets/images/forml.png";
|
||||
import { Link } from "react-router-dom";
|
||||
import ReCAPTCHA from "react-google-recaptcha";
|
||||
@@ -191,19 +191,22 @@ const Contact = () => {
|
||||
marginTop={"20px"}
|
||||
gap={"2rem"}
|
||||
>
|
||||
<Link to="https://twitter.com/rubixchain">
|
||||
<Link to="https://twitter.com/rubixchain" target="_blank">
|
||||
<Image src={formx} />
|
||||
</Link>
|
||||
<Link to="https://www.facebook.com/RubixChain">
|
||||
<Image src={formfb} />
|
||||
</Link>
|
||||
<Link to="https://www.linkedin.com/company/rubixnet/">
|
||||
<Link
|
||||
to="https://www.linkedin.com/company/rubixnet/"
|
||||
target="_blank"
|
||||
>
|
||||
<Image src={forml} />
|
||||
</Link>
|
||||
<Link to="https://discord.com/invite/MNYPfhFEEk" target="_blank">
|
||||
<Image src={discord} width={"46px"} height={"46px"} />
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box marginBottom={"3rem"}>
|
||||
{/* <Box marginBottom={"3rem"}>
|
||||
<Badge
|
||||
textAlign={"left"}
|
||||
background={"transparent"}
|
||||
@@ -256,7 +259,7 @@ const Contact = () => {
|
||||
914 578 1245
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box> */}
|
||||
</Box>
|
||||
|
||||
{/* Form */}
|
||||
@@ -437,9 +440,9 @@ const Contact = () => {
|
||||
required: true,
|
||||
})}
|
||||
/>
|
||||
{errors.Email && (
|
||||
{errors.email && (
|
||||
<p style={{ fontSize: "13px", color: "red" }}>
|
||||
{errors.Email.message}
|
||||
{errors.email.message}
|
||||
</p>
|
||||
)}
|
||||
</Box>
|
||||
@@ -483,9 +486,9 @@ const Contact = () => {
|
||||
required: true,
|
||||
})}
|
||||
/>
|
||||
{errors.Phone && (
|
||||
{errors.phone && (
|
||||
<p style={{ fontSize: "13px", color: "red" }}>
|
||||
{errors.Phone.message}
|
||||
{errors.phone.message}
|
||||
</p>
|
||||
)}
|
||||
</Box>
|
||||
@@ -533,9 +536,9 @@ const Contact = () => {
|
||||
</select>
|
||||
)}
|
||||
/>
|
||||
{errors.selectOption && (
|
||||
{errors.typeofenquiry && (
|
||||
<p style={{ fontSize: "13px", color: "red" }}>
|
||||
{errors.selectOption.message}
|
||||
{errors.typeofenquiry.message}
|
||||
</p>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@@ -10,10 +10,10 @@ const content = [
|
||||
link: `bring-your-own-blockspace`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: `Published: December 30, 2021`,
|
||||
text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
|
||||
link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
|
||||
id: 5,
|
||||
date: `Published: January 28, 2022`,
|
||||
text: `Enterprise blockchains on a Public Chain!`,
|
||||
link: `enterprise-blockchains-on-a-public-chain`,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -27,18 +27,19 @@ const content = [
|
||||
text: `Securing wallet to wallet transfers across the network: Rubix solved it differently`,
|
||||
link: `securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently`,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: `Published: January 28, 2022`,
|
||||
text: `Enterprise blockchains on a Public Chain!`,
|
||||
link: `enterprise-blockchains-on-a-public-chain`,
|
||||
},
|
||||
|
||||
{
|
||||
id: 6,
|
||||
date: `Published: January 12, 2022`,
|
||||
text: `Multichain over Blockchain — A reality check on security threat`,
|
||||
link: `multichain-over-blockchain-a-reality-check-on-security-threat`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: `Published: December 30, 2021`,
|
||||
text: `Rubix: The Sustainable Blockchain Solution — a Green Initiative`,
|
||||
link: `rubix-the-sustainable-blockchain-solution-a-green-initiative`,
|
||||
},
|
||||
// {
|
||||
// id: 7,
|
||||
// date: `Published: January 12, 2022`,
|
||||
@@ -103,7 +104,7 @@ const Resources = () => {
|
||||
{content.map((item) => (
|
||||
<HomeCard
|
||||
key={item.id}
|
||||
date={item.date}
|
||||
// date={item.date}
|
||||
text={item.text}
|
||||
link={item.link}
|
||||
/>
|
||||
|
||||
@@ -178,7 +178,7 @@ const Stats = () => {
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={100000}
|
||||
end={174015}
|
||||
end={178396}
|
||||
delay={0}
|
||||
style={{
|
||||
fontSize: `${isSmallScreen ? "23px" : "38px"}`,
|
||||
@@ -245,7 +245,7 @@ const Stats = () => {
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={50000000}
|
||||
end={51400000}
|
||||
end={10247786}
|
||||
delay={0}
|
||||
style={{
|
||||
fontSize: `${isSmallScreen ? "23px" : "38px"}`,
|
||||
@@ -271,7 +271,7 @@ const Stats = () => {
|
||||
{inView && (
|
||||
<CountUp
|
||||
start={10000000}
|
||||
end={10247786}
|
||||
end={13347109}
|
||||
delay={0}
|
||||
style={{
|
||||
fontSize: `${isSmallScreen ? "23px" : "38px"}`,
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
|
||||
import getStarted from "../../assets/images/getStarted.png";
|
||||
import getStarted2 from "../../assets/images/getStarted2.png";
|
||||
import getStarted3 from "../../assets/images/getStarted3.png";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const GetStarted = () => {
|
||||
return (
|
||||
@@ -21,7 +22,7 @@ const GetStarted = () => {
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"3rem"}
|
||||
paddingBottom={"2rem"}
|
||||
paddingBottom={"1rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textAlign={"left"}
|
||||
@@ -55,8 +56,7 @@ const GetStarted = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
Rubix allows developers to build on a fast, secure, and scalable chain
|
||||
that has a unique approach to data sharing, objects.
|
||||
4 easy steps to quickly launch your dAPP
|
||||
</Text>
|
||||
|
||||
<Box padding={"4rem 0"}>
|
||||
@@ -88,7 +88,7 @@ const GetStarted = () => {
|
||||
}}
|
||||
>
|
||||
<TabPanel padding={"0px"}>
|
||||
<Image
|
||||
{/* <Image
|
||||
fit="cover"
|
||||
src={getStarted}
|
||||
sx={{
|
||||
@@ -97,10 +97,10 @@ const GetStarted = () => {
|
||||
},
|
||||
"@media (max-width: 375px)": {},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</TabPanel>
|
||||
<TabPanel padding={"0px"}>
|
||||
<Image
|
||||
{/* <Image
|
||||
fit="cover"
|
||||
src={getStarted2}
|
||||
sx={{
|
||||
@@ -109,10 +109,10 @@ const GetStarted = () => {
|
||||
},
|
||||
"@media (max-width: 375px)": {},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</TabPanel>
|
||||
<TabPanel padding={"0px"}>
|
||||
<Image
|
||||
{/* <Image
|
||||
fit="cover"
|
||||
src={getStarted}
|
||||
sx={{
|
||||
@@ -121,10 +121,10 @@ const GetStarted = () => {
|
||||
},
|
||||
"@media (max-width: 375px)": {},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</TabPanel>
|
||||
<TabPanel padding={"0px"}>
|
||||
<Image
|
||||
{/* <Image
|
||||
fit="cover"
|
||||
src={getStarted3}
|
||||
width={"300px"}
|
||||
@@ -134,7 +134,7 @@ const GetStarted = () => {
|
||||
},
|
||||
"@media (max-width: 375px)": {},
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
<TabList
|
||||
@@ -152,6 +152,7 @@ const GetStarted = () => {
|
||||
<Tab
|
||||
color="#fff"
|
||||
justifyContent={"left"}
|
||||
alignItems={"end"}
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
textAlign={"left"}
|
||||
@@ -165,7 +166,58 @@ const GetStarted = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
- Start by reading our whitepaper
|
||||
Step 1 - Start by reading our whitepaper
|
||||
<a
|
||||
download="RubiX_WhitePaper.pdf"
|
||||
href="../../assets/pdf/RubiX_WhitePaper.pdf"
|
||||
style={{
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
marginLeft: "10px",
|
||||
paddingBottom: "2px",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
>
|
||||
Click here to download
|
||||
</a>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
color="#fff"
|
||||
justifyContent={"left"}
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
textAlign={"left"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "15px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
textAlign: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Step 2 - Install a Rubix node on your laptop
|
||||
</Tab>
|
||||
<Tab
|
||||
color="#fff"
|
||||
justifyContent={"left"}
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
textAlign={"left"}
|
||||
whiteSpace={"nowrap"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "15px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
textAlign: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Step 3 - Migrate your current use case or process to Rubix
|
||||
</Tab>
|
||||
<Tab
|
||||
color="#fff"
|
||||
@@ -183,43 +235,7 @@ const GetStarted = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
- Install a Rubix node on your laptop
|
||||
</Tab>
|
||||
<Tab
|
||||
color="#fff"
|
||||
justifyContent={"left"}
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
textAlign={"left"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "15px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
textAlign: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
- Migrate your current use case or process to Rubix
|
||||
</Tab>
|
||||
<Tab
|
||||
color="#fff"
|
||||
justifyContent={"left"}
|
||||
fontSize={"20px"}
|
||||
fontFamily={"Poppins"}
|
||||
textAlign={"left"}
|
||||
sx={{
|
||||
"@media (max-width: 1024px)": {
|
||||
fontSize: "15px",
|
||||
},
|
||||
"@media (max-width: 435px)": {
|
||||
textAlign: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
- Design your first dApp
|
||||
Step 4 - Design your first dApp
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
|
||||
@@ -251,11 +251,11 @@ const NavBar = () => {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/LearnPage"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
// style={
|
||||
// location.pathname === "/LearnPage"
|
||||
// ? highlight
|
||||
// : normal
|
||||
// }
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
@@ -275,11 +275,11 @@ const NavBar = () => {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/LearnPage"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
// style={
|
||||
// location.pathname === "/LearnPage"
|
||||
// ? highlight
|
||||
// : normal
|
||||
// }
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
@@ -299,11 +299,11 @@ const NavBar = () => {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
style={
|
||||
location.pathname === "/LearnPage"
|
||||
? highlight
|
||||
: normal
|
||||
}
|
||||
// style={
|
||||
// location.pathname === "/LearnPage"
|
||||
// ? highlight
|
||||
// : normal
|
||||
// }
|
||||
>
|
||||
<Box
|
||||
display={"flex"}
|
||||
@@ -740,7 +740,7 @@ const NavBar = () => {
|
||||
</PopoverContent>
|
||||
</Popover> */}
|
||||
|
||||
<Link to="/" className="link" style={{ position: "relative" }}>
|
||||
{/* <Link to="/" className="link" style={{ position: "relative" }}>
|
||||
<Button
|
||||
backgroundColor={"transparent"}
|
||||
color={"#fff"}
|
||||
@@ -754,10 +754,10 @@ const NavBar = () => {
|
||||
>
|
||||
FOUNDATION
|
||||
</Button>
|
||||
{/* <span
|
||||
<span
|
||||
style={location.pathname === "/" ? active : linkStyle}
|
||||
/> */}
|
||||
</Link>
|
||||
/>
|
||||
</Link> */}
|
||||
|
||||
<Link
|
||||
to="/Contact"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/ eslint-disable no-unused-vars /;
|
||||
import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
|
||||
import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
@@ -15,33 +16,33 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
// Initialize ScrollTrigger
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const SubnetContent = {
|
||||
heading: `decentralised Auto Syncing subnets`,
|
||||
};
|
||||
// const SubnetContent = {
|
||||
// heading: `decentralised Auto Syncing subnets`,
|
||||
// };
|
||||
|
||||
export const NewSubnetComp = () => {
|
||||
const firstBoxRef = useRef(null);
|
||||
const secondBoxRef = useRef(null);
|
||||
const thirdBoxRef = useRef(null);
|
||||
const mainBox = useRef(null);
|
||||
// const firstBoxRef = useRef(null);
|
||||
// const secondBoxRef = useRef(null);
|
||||
// const thirdBoxRef = useRef(null);
|
||||
// const mainBox = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
// gsap.set(firstBoxRef.current, { opacity: 1 });
|
||||
let tl = gsap
|
||||
.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: mainBox.current,
|
||||
start: "top top",
|
||||
scrub: 1,
|
||||
pin: true,
|
||||
end: "bottom bottom-=500vh",
|
||||
markers: false,
|
||||
},
|
||||
})
|
||||
.fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
||||
.fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
|
||||
.fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
||||
.fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
|
||||
// let tl = gsap
|
||||
// .timeline({
|
||||
// scrollTrigger: {
|
||||
// trigger: mainBox.current,
|
||||
// start: "top top",
|
||||
// scrub: 1,
|
||||
// pin: true,
|
||||
// end: "bottom bottom-=500vh",
|
||||
// markers: false,
|
||||
// },
|
||||
// })
|
||||
// .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
||||
// .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
|
||||
// .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
|
||||
// .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
|
||||
|
||||
// .fromTo(
|
||||
// firstBoxRef.current,
|
||||
@@ -65,7 +66,7 @@ export const NewSubnetComp = () => {
|
||||
// );
|
||||
|
||||
return () => {
|
||||
tl.kill();
|
||||
// tl.kill();
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -77,18 +78,18 @@ export const NewSubnetComp = () => {
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={mainBox}
|
||||
height={"100vh"}
|
||||
position={"relative"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
alignItems={"center"}
|
||||
// ref={mainBox}
|
||||
height={"auto"}
|
||||
// position={"relative"}
|
||||
// display={"flex"}
|
||||
// justifyContent={"center"}
|
||||
// alignItems={"center"}
|
||||
>
|
||||
<Box
|
||||
ref={firstBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
// ref={firstBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
height={"100vh"}
|
||||
width={"100%"}
|
||||
backgroundColor={"#000"}
|
||||
@@ -100,11 +101,12 @@ export const NewSubnetComp = () => {
|
||||
textAlign={"center"}
|
||||
height={"100vh"}
|
||||
display={"grid"}
|
||||
// p={10}
|
||||
paddingTop={"10rem"}
|
||||
alignContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
@@ -116,7 +118,7 @@ export const NewSubnetComp = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
{SubnetContent.heading}
|
||||
decentralised Auto Syncing subnets
|
||||
</Text>
|
||||
<Box
|
||||
display={"grid"}
|
||||
@@ -199,16 +201,16 @@ export const NewSubnetComp = () => {
|
||||
width={"100%"}
|
||||
padding={"0 5rem"}
|
||||
paddingBottom={"2rem"}
|
||||
ref={secondBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
// ref={secondBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingTop={"10rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
@@ -310,16 +312,16 @@ export const NewSubnetComp = () => {
|
||||
width={"100%"}
|
||||
padding={"2rem"}
|
||||
// paddingBottom={"2rem"}
|
||||
ref={thirdBoxRef}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
// ref={thirdBoxRef}
|
||||
// position={"absolute"}
|
||||
// top={"0"}
|
||||
// left={"0"}
|
||||
display={"grid"}
|
||||
placeContent={"center"}
|
||||
>
|
||||
<Text
|
||||
as={"h2"}
|
||||
paddingTop={"2rem"}
|
||||
paddingTop={"5rem"}
|
||||
fontWeight={700}
|
||||
fontSize={"40px"}
|
||||
textTransform={"capitalize"}
|
||||
|
||||
Reference in New Issue
Block a user