diff --git a/src/App.jsx b/src/App.jsx index 50428ae..4406d07 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import HomePage from "./pages/HomePage"; import NavBar from "./components/NavBar/NavBar"; import LearnPage from "./pages/LearnPage"; import BuildPage from "./pages/BuildPage"; +import Community from "./pages/Community"; const router = createBrowserRouter( createRoutesFromElements( @@ -15,6 +16,7 @@ const router = createBrowserRouter( } /> } /> } /> + } /> ) ); diff --git a/src/assets/images/Component115.png b/src/assets/images/Component115.png new file mode 100644 index 0000000..97c6169 Binary files /dev/null and b/src/assets/images/Component115.png differ diff --git a/src/assets/images/Component116.png b/src/assets/images/Component116.png new file mode 100644 index 0000000..57300e6 Binary files /dev/null and b/src/assets/images/Component116.png differ diff --git a/src/assets/images/Component117.png b/src/assets/images/Component117.png new file mode 100644 index 0000000..11c45eb Binary files /dev/null and b/src/assets/images/Component117.png differ diff --git a/src/assets/images/Component118.png b/src/assets/images/Component118.png new file mode 100644 index 0000000..600cd85 Binary files /dev/null and b/src/assets/images/Component118.png differ diff --git a/src/assets/images/Component119.png b/src/assets/images/Component119.png new file mode 100644 index 0000000..dcf6def Binary files /dev/null and b/src/assets/images/Component119.png differ diff --git a/src/assets/images/Component120.png b/src/assets/images/Component120.png new file mode 100644 index 0000000..95c7d56 Binary files /dev/null and b/src/assets/images/Component120.png differ diff --git a/src/assets/images/Component121.png b/src/assets/images/Component121.png new file mode 100644 index 0000000..7ac91b6 Binary files /dev/null and b/src/assets/images/Component121.png differ diff --git a/src/assets/images/Component122.png b/src/assets/images/Component122.png new file mode 100644 index 0000000..573ec92 Binary files /dev/null and b/src/assets/images/Component122.png differ diff --git a/src/assets/images/Component123.png b/src/assets/images/Component123.png new file mode 100644 index 0000000..e42e6fc Binary files /dev/null and b/src/assets/images/Component123.png differ diff --git a/src/assets/images/Discort.png b/src/assets/images/Discort.png new file mode 100644 index 0000000..4c33dde Binary files /dev/null and b/src/assets/images/Discort.png differ diff --git a/src/assets/images/GitHub2.png b/src/assets/images/GitHub2.png new file mode 100644 index 0000000..8c85b35 Binary files /dev/null and b/src/assets/images/GitHub2.png differ diff --git a/src/assets/images/arrow-right.png b/src/assets/images/arrow-right.png new file mode 100644 index 0000000..02baae5 Binary files /dev/null and b/src/assets/images/arrow-right.png differ diff --git a/src/assets/images/cardimg2.png b/src/assets/images/cardimg2.png new file mode 100644 index 0000000..9f7dc66 Binary files /dev/null and b/src/assets/images/cardimg2.png differ diff --git a/src/assets/images/discot.png b/src/assets/images/discot.png new file mode 100644 index 0000000..eee1257 Binary files /dev/null and b/src/assets/images/discot.png differ diff --git a/src/assets/images/enterprise.png b/src/assets/images/enterprise.png new file mode 100644 index 0000000..71aecb5 Binary files /dev/null and b/src/assets/images/enterprise.png differ diff --git a/src/assets/images/facebook.png b/src/assets/images/facebook.png new file mode 100644 index 0000000..8949a0b Binary files /dev/null and b/src/assets/images/facebook.png differ diff --git a/src/assets/images/linkedin.png b/src/assets/images/linkedin.png new file mode 100644 index 0000000..1e7032b Binary files /dev/null and b/src/assets/images/linkedin.png differ diff --git a/src/assets/images/linkedn.png b/src/assets/images/linkedn.png new file mode 100644 index 0000000..b4a154c Binary files /dev/null and b/src/assets/images/linkedn.png differ diff --git a/src/assets/images/map-pin.png b/src/assets/images/map-pin.png new file mode 100644 index 0000000..b11d8e1 Binary files /dev/null and b/src/assets/images/map-pin.png differ diff --git a/src/assets/images/partner.png b/src/assets/images/partner.png new file mode 100644 index 0000000..08ddb5c Binary files /dev/null and b/src/assets/images/partner.png differ diff --git a/src/assets/images/place-banner.png b/src/assets/images/place-banner.png new file mode 100644 index 0000000..cee681b Binary files /dev/null and b/src/assets/images/place-banner.png differ diff --git a/src/assets/images/reddit2.png b/src/assets/images/reddit2.png new file mode 100644 index 0000000..510ecdc Binary files /dev/null and b/src/assets/images/reddit2.png differ diff --git a/src/assets/images/telegram.png b/src/assets/images/telegram.png new file mode 100644 index 0000000..b733984 Binary files /dev/null and b/src/assets/images/telegram.png differ diff --git a/src/assets/images/twitter.png b/src/assets/images/twitter.png new file mode 100644 index 0000000..2c5a84c Binary files /dev/null and b/src/assets/images/twitter.png differ diff --git a/src/components/Card/CommCard.jsx b/src/components/Card/CommCard.jsx new file mode 100644 index 0000000..427109f --- /dev/null +++ b/src/components/Card/CommCard.jsx @@ -0,0 +1,82 @@ +/* eslint-disable react/prop-types */ +/* eslint-disable no-unused-vars */ +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"; + +const CommCard = ({ id, imageUrl, name, jobTitle, description, location }) => { + return ( + + + + + + + + + + + + {location} + + + {name} + + + {jobTitle} + + + {description} + + + ); +}; + +export default CommCard; diff --git a/src/components/Card/ConnectCard.jsx b/src/components/Card/ConnectCard.jsx new file mode 100644 index 0000000..34e7f00 --- /dev/null +++ b/src/components/Card/ConnectCard.jsx @@ -0,0 +1,92 @@ +import React from "react"; +import { Box, SimpleGrid, Text } from "@chakra-ui/react"; + +const ConnectCard = ({ + title, + imageOne, + imageTwo, + textOne, + textTwo, + imageThree, + textThree, +}) => { + + return ( +
+ + + {title} + + + + + + {textOne} + + + + + + {textTwo} + + + {imageThree && ( + + + + {textThree} + + + )} + + +
+ ); +}; + +export default ConnectCard; diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx new file mode 100644 index 0000000..32fffec --- /dev/null +++ b/src/components/Card/HappenCard.jsx @@ -0,0 +1,44 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import CardImg2 from "../../assets/images/cardimg2.png"; +import { Badge } from "@chakra-ui/react"; + +const HappenCard = ({ key, date, text, para, month, curentDate }) => { + return ( + + + + {month} +
+ {curentDate} + + + + + {date} + + + {text} + + {para} + + + + ); +}; + +export default HappenCard; diff --git a/src/components/Card/InsightsCard.jsx b/src/components/Card/InsightsCard.jsx new file mode 100644 index 0000000..c1a9b8d --- /dev/null +++ b/src/components/Card/InsightsCard.jsx @@ -0,0 +1,64 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import cardimg from "../../assets/images/CardImg.png"; +import { Badge } from "@chakra-ui/react"; +import { useState } from "react"; + +const InsightsCard = ({ key, title, text }) => { + const [showBrideBox, setShowBrideBox] = useState(false); + return ( + + setShowBrideBox(true)} + onMouseLeave={() => setShowBrideBox(false)} + width={"502px"} + background={"#151419"} + borderRadius={"10px"} + minHeight={"430px"} + key={key} + > + + + {showBrideBox && ( + + INSIGHT + + )} + + + + {title} + + + {text} + + + + + ); +}; + +export default InsightsCard; diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx new file mode 100644 index 0000000..69b56db --- /dev/null +++ b/src/components/Card/PlaceCard.jsx @@ -0,0 +1,56 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import {ArrowForwardIcon } from '@chakra-ui/icons' +import Arrow from "../../assets/images/arrow-right.png" + +const PlaceCard = ({ key, text, cardicon ,title,button}) => { + return ( + + + + + + {title} + + + {text} + + + + {button} + + + + + + ); +}; + +export default PlaceCard; diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx new file mode 100644 index 0000000..631817b --- /dev/null +++ b/src/components/Community/CommunityBanner.jsx @@ -0,0 +1,172 @@ +import { Box, Button, Container, Text } from "@chakra-ui/react"; +import banner from "../../assets/images/learnBanner.png"; + +const BannerContent = [ + { + heading1: `Welcome To The`, + heading2: `Rubix Community`, + }, + { + subheading: `This is a space for enterprises, dApp developers, stakeholders + and blockchain advocates to aggregate resources and ideas to make a difference + through our green blockchain technology.`, + }, + { + btn: `Explore our community`, + }, +]; + +const CommunityBanner = () => { + return ( + + + + + {BannerContent[0].heading1}
+ + {BannerContent[0].heading2} + + + + + {BannerContent[1].subheading} + + + + + + + + + ); +}; + +export default CommunityBanner; diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx new file mode 100644 index 0000000..9c67c34 --- /dev/null +++ b/src/components/Community/CommunityCard.jsx @@ -0,0 +1,157 @@ +import { + Box, + Card, + CardBody, + CardHeader, + Container, + Heading, + Image, + SimpleGrid, + Text, +} from "@chakra-ui/react"; +import React from "react"; +import CommCard from "../Card/CommCard"; +import imgOne from "../../assets/images/Component115.png"; +import imgtwo from "../../assets/images/Component116.png"; +import imgthree from "../../assets/images/Component117.png"; +import imgfour from "../../assets/images/Component118.png"; +import imgfive from "../../assets/images/Component119.png"; +import imgsix from "../../assets/images/Component120.png"; +import imgseven from "../../assets/images/Component121.png"; +import imgeight from "../../assets/images/Component122.png"; +import imgnine from "../../assets/images/Component123.png"; + + +const individuals = [ + { + location: "india", + name: "KC Reddy", + jobTitle: "Founder/CTO", + description: + "A visionary poised to deliver trustless, secure internet and passwordless cyber security", + imageUrl: imgOne, + }, + { + location: "india", + name: "Ravi Srinivasa Murty", + jobTitle: "Chief Strategy Officer", + description: + "Global business leader with a technology orientation and a vision to drive economic value.", + imageUrl: imgtwo, + }, + { + location: "india", + name: "Hari Krishnan", + jobTitle: "Head of Technology", + description: + "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.", + imageUrl: imgthree, + }, + { + location: "india", + name: "Gokul P S", + jobTitle: "Core Blockchain Developer", + description: + "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.", + imageUrl: imgfour, + }, + { + location: "india", + name: "Allen Iype P Cherian", + jobTitle: "Blockchain Engineer", + description: + "A motivated and responsible B tech Graduate, with a strong work ethic.", + imageUrl: imgfive, + }, + { + location: "india", + name: "Nidhin M.", + jobTitle: "Lead Engineer", + description: + "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.", + imageUrl: imgsix, + }, + { + location: "india", + name: "ASHITA GUPTA", + jobTitle: "Blockchain Developer", + description: + "Enthusiastic blockchain developer who pushes herself every day to excel at work.", + imageUrl: imgseven, + }, + { + location: "india", + name: "Vaishnav C H", + jobTitle: "Blockchain Developer", + description: + "A very humble and talented Golang developer and mechatronics and blockchain engineer", + imageUrl: imgeight, + }, + { + location: "india", + name: "Maneesha Panda", + jobTitle: "Blockchain Engineer", + description: + "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.", + imageUrl: imgOne, + }, +]; + +const CommunityCard = () => { + return ( + <> + + + + Rubix Community + + + {individuals.map((item) => ( + + ))} + + + + + ); +}; + +export default CommunityCard; diff --git a/src/components/Community/Connect.jsx b/src/components/Community/Connect.jsx new file mode 100644 index 0000000..c7edb69 --- /dev/null +++ b/src/components/Community/Connect.jsx @@ -0,0 +1,100 @@ +import { Box, Container, SimpleGrid, Text } from "@chakra-ui/react"; +import React from "react"; +import Telegram from "../../assets/images/telegram.png"; +import Reddit from "../../assets/images/reddit2.png"; +import ConnectCard from "../Card/ConnectCard"; +import Twitter from "../../assets/images/twitter.png"; +import Facebook from "../../assets/images/facebook.png"; +import linkedin from "../../assets/images/linkedn.png"; +import Discort from "../../assets/images/Discort.png"; +import GitHub from "../../assets/images/GitHub2.png"; + +const ConnectRubix = [ + { + id: "1", + title: "Developer Resources", + imageOne: Telegram, + imageTwo: Reddit, + textOne: "Telegram", + textTwo: "Reddit", + }, + { + id: "2", + title: "Innovator Dialogue", + imageOne: Telegram, + imageTwo: GitHub, + textOne: "GitHub", + textTwo: "Discord", + }, + { + id: "3", + title: "Social Media", + imageOne: Twitter, + imageTwo: Facebook, + imageThree:linkedin, + textOne: "Twitter", + textTwo: "Facebook", + textThree:'LinkedIn', + }, +]; + +const Connect = () => { + return ( + <> + + + + Connect with Rubix community + + + {ConnectRubix.map((item) => ( + + ))} + + + + + ); +}; + +export default Connect; diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx new file mode 100644 index 0000000..a7626d4 --- /dev/null +++ b/src/components/Community/Happen.jsx @@ -0,0 +1,153 @@ +/* eslint-disable no-unused-vars */ +import { + Box, + Container, + Text, + Image, + Button, + SimpleGrid, +} from "@chakra-ui/react"; +import HappenCard from "../Card/HappenCard"; + +const Latest = [ + { + id: 1, + date: `Sunday, 10 May 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, + { + id: 2, + date: `Sunday, 15 Jan 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, + { + id: 3, + date: `Sunday, 14 Feb 2024`, + text: `Financial Times Crypto & Digital Assets Summit Panel`, + para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ", + curentDate: "10", + month: "MAY", + }, +]; + +const Content = { + heading: `Latest Happenings`, +}; + +const Happen = () => { + return ( + + + + {Content.heading} + + + + + {Latest.map((item) => ( + + ))} + + + + + + + + + ); +}; + +export default Happen; diff --git a/src/components/Community/Insights.jsx b/src/components/Community/Insights.jsx new file mode 100644 index 0000000..a03b73b --- /dev/null +++ b/src/components/Community/Insights.jsx @@ -0,0 +1,133 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import HomeCard from "../Card/HomeCard"; +import InsightsCard from "../Card/InsightsCard"; + +const content = [ + { + id: 1, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, + { + id: 2, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, + { + id: 3, + title: `Rubix Hackathon`, + text: `Start 2023 off right by registering for the next Top Rubix Start-up Hackathon! Join the community and build any project that leverages Rubix blockchain technology.`, + }, +]; + +const Content = { + heading: `Current news & insights`, +}; + +const Insights = () => { + return ( + + + + {Content.heading} + + + {content.map((item) => ( + + ))} + + + + + + + ); +}; + +export default Insights; diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx new file mode 100644 index 0000000..e6fee86 --- /dev/null +++ b/src/components/Community/LearnMore.jsx @@ -0,0 +1,112 @@ +import { Box, Button, Container, Text } from "@chakra-ui/react"; +// import banner from "../../assets/images/moreBanner.png"; + +const SectionContent = { + heading: `Connect with us to learn more!`, + subContent: `With minimal computing power and curiosity to explore Web3 and its potential, anyone can build with the Rubix community.`, + btnContent: `Contact Us`, +}; + +const LearnMore = () => { + return ( + + + {SectionContent.heading} + + + + {SectionContent.subContent} + + + + + ); +}; + +export default LearnMore; diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx new file mode 100644 index 0000000..4bcc5f2 --- /dev/null +++ b/src/components/Community/Place.jsx @@ -0,0 +1,108 @@ +/* eslint-disable no-unused-vars */ +import { Box, Container, Text, Image, Button } from "@chakra-ui/react"; +import Partner from "../../assets/images/partner.png" +import PlaceCard from "../Card/PlaceCard"; +import Enterprise from "../../assets/images/enterprise.png"; +import Banner from "../../assets/images/place-banner.png"; + +const content = [ + { + id: 1, + title:'Partners', + cardicon: Partner, + text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`, + button:'Explore our ecosystem', + }, + { + id: 2, + title:'Enterprises', + cardicon: Enterprise, + text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`, + button:'See how it works', + }, + { + id: 3, + title:'Developers', + cardicon: Enterprise, + text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`, + button:'Start Building', + }, + { + id: 4, + title:'Advisors', + cardicon: Enterprise, + text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`, + button:'Contact Us', + }, +]; + +const Content = { + heading: `Find your place at the table`, +}; + +const Place = () => { + return ( + + + + {Content.heading} + + + {content.map((item) => ( + + ))} + + + + ); +}; + +export default Place; diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx index 2f826c6..d1b9edd 100644 --- a/src/components/HomePage/Resources.jsx +++ b/src/components/HomePage/Resources.jsx @@ -95,7 +95,7 @@ const Resources = () => { overflow={"hidden"} sx={{ "::before": { - content: '""', + content: '""', position: "absolute", top: "50%", left: "50%", diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx index db95234..db09407 100644 --- a/src/components/HomePage/Stats.jsx +++ b/src/components/HomePage/Stats.jsx @@ -25,7 +25,7 @@ const Stats = () => { "@media (max-width: 600px)": { fontSize: "28px", }, - }} + }} > { LEARN BUILD USE CASES - COMMUNITY + COMMUNITY FOUNDATION { + return ( + <> + + + + + + + + + ) +} + +export default Community diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx index 5a7b308..8a6aa84 100644 --- a/src/pages/LearnPage.jsx +++ b/src/pages/LearnPage.jsx @@ -11,7 +11,7 @@ const LearnPage = () => { - +