Skip to content

Commit

Permalink
mobile finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamidroohi71
hamidroohi71 committed Jun 26, 2024
1 parent b31610d commit fb70ba3
Show file tree
Hide file tree
Showing 13 changed files with 74 additions and 69 deletions.
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import BigText from "./components/BigText";
function App() {
return (
<>
<div className="bg-[#f0efef] px-[50px] pb-[50px] rounded-b-[100px]">
<div className="bg-[#f0efef] px-[10px] lg:px-[50px] pb-[50px] rounded-b-[100px]">
<Header />
<Hero />
<CompanySection />
Expand Down
12 changes: 6 additions & 6 deletions src/components/CollectiveBunch.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
const CollectiveBunch = () => {
return (
<div className="flex items-center justify-between px-[100px] text-white">
<div className="w-[716px]">
<p className="text-[40px]">
<div className="flex items-center justify-between flex-col lg:flex-row px-[10px] lg:px-[100px] text-white">
<div className="lg:w-[716px]">
<p className="text-[30px] lg:text-[40px]">
We’re Darwinia Community DAO. A Crypto based service with brilliant
offers for making the CRYPTO experience fun deliverable.
</p>
<p className="text-[40px] mt-[40px]">
Join Us and enjoy your Crypto journey
</p>
<button className="bg-white text-black text-[28px] font-[500] w-[240px] h-[60px] rounded-[30px] mt-[20px] hover:scale-[1.05] duration-300">
<button className="bg-white text-black text-[16px] my-[50px] lg:my-0 w-full lg:text-[28px] font-[500] lg:w-[240px] h-[40px] lg:h-[60px] rounded-[30px] mt-[20px] hover:scale-[1.05] duration-300">
Join
</button>
</div>
<ul>
<ul className="flex flex-col items-center justify-center gap-[20px] lg:block">
<li className="text-[20px]">Dribbble</li>
<li className="text-[20px]">Instagram</li>
<li className="text-[20px]">X</li>
<li className="text-[20px]">Facebook</li>
<li className="text-[20px]">LinkedIn</li>
<li className="mt-[40px] text-[20px]">Work</li>
<li className="mb-[40px] text-[20px]">About</li>
<li className="text-[20px] w-[233px]">
<li className="text-[20px] lg:w-[233px]">
Unfold HQ 5920 Pan American Blvd Suite 205, North Port, Florida, 34287
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions src/components/CompanySection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ const CompanySection = () => {
};
}, []);
return (
<div className="flex items-center justify-between my-[100px] gap-[200px]">
<div className="flex items-center justify-center lg:justify-between flex-col lg:flex-row my-[100px] gap-[40px] lg:gap-[200px]">
<div className="text-[40px] font-[500] relative">
Mint, keep, share and transfer your favorite NFTs with our new community
<img
src="/images/NFT/NFT_1.png"
className="absolute text-[0] top-[0] bottom-0 my-auto right-[-40%] transition-all w-[150px] h-[150px] rounded-[50%]"
className="lg:absolute text-[0] top-[0] bottom-0 lg:my-auto right-[-40%] transition-all w-[150px] h-[150px] rounded-[50%]"
style={{ transform: `rotateZ(${rotation}deg)` }}
/>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/CuttingEdge.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const CuttingEdge = () => {
return (
<div className="flex items-center gap-[20px] h-[954px]">
<div className="min-w-[426px] bg-[#FB3B94] flex items-end rounded-[50px] h-full p-[50px]">
<div className="flex flex-col lg:flex-row items-center gap-[20px] lg:h-[954px]">
<div className="lg:min-w-[426px] bg-[#FB3B94] lg:flex items-end rounded-[50px] h-full p-[50px]">
<div>
<h3 className="text-[40px] font-bold text-white">You First</h3>
<p className="30px mt-[20px] text-white font-[500]">
Expand All @@ -12,7 +12,7 @@ const CuttingEdge = () => {
</div>
</div>
<div className="h-full">
<div className="bg-white w-full items-end flex rounded-[50px] h-[49%] p-[50px]">
<div className="bg-white w-full items-end lg:flex rounded-[50px] lg:h-[49%] p-[50px]">
<div>
<h3 className="text-[40px] font-bold text-black">Cutting Edge</h3>
<p className="30px mt-[20px] font-[500]">
Expand All @@ -22,8 +22,8 @@ const CuttingEdge = () => {
</p>
</div>
</div>
<div className="w-full flex h-[49%] mt-[20px] gap-[20px]">
<div className="bg-[#000] items-end flex rounded-[50px] p-[50px] w-[50%]">
<div className="w-full lg:flex lg:h-[49%] mt-[20px] gap-[20px]">
<div className="bg-[#000] items-end flex rounded-[50px] p-[50px] lg:w-[50%] mb-[20px] lg:mb-0">
<div>
<h3 className="text-[40px] font-bold text-white">Hide Nothing</h3>
<p className="30px mt-[20px] text-white font-[500]">
Expand All @@ -33,7 +33,7 @@ const CuttingEdge = () => {
</p>
</div>
</div>
<div className="bg-[#FB3B94] items-end flex rounded-[50px] p-[50px] w-[50%]">
<div className="bg-[#FB3B94] items-end flex rounded-[50px] p-[50px] lg:w-[50%]">
<div>
<h3 className="text-[40px] font-bold text-white">Fresh Angles</h3>
<p className="30px mt-[20px] text-white font-[600]">
Expand Down
6 changes: 3 additions & 3 deletions src/components/Friends.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ const Friends = () => {
}, []);

return (
<div className="bg-white rounded-[50px] min-h-[742px] px-[50px] flex items-center justify-between mt-[100px]">
<div className="bg-white rounded-[50px] lg:min-h-[742px] px-[50px] flex flex-col lg:flex-row items-center justify-between mt-[100px]">
<div>
<h2 className="text-[120px] font-[400]">Friends</h2>
<h2 className="text-[120px] font-[400]">& Partners</h2>
<h2 className="text-[40px] lg:text-[120px] font-[400]">Friends</h2>
<h2 className="text-[40px] lg:text-[120px] font-[400]">& Partners</h2>
</div>
<div className="bg-black w-[558px] h-[700px] rounded-[50px] relative overflow-hidden">
<ul
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Header = () => {
<a href="/">
<img src="/images/DCDAO.png" alt="" className="w-[100px] h-[100px]" />
</a>
<div className="w-[196px] h-[196px] bg-[#FB3B94] rounded-full pt-[110px] text-[40px] text-white font-bold text-center cursor-pointer hover:bg-[#000] absolute top-[-100px] right-[50px] transition-all delay-75">
<div className="w-[140px] h-[140px] lg:w-[196px] lg:h-[196px] bg-[#FB3B94] rounded-full pt-[40px] lg:pt-[110px] text-[40px] text-white font-bold text-center cursor-pointer hover:bg-[#000] lg:absolute top-[-100px] right-[50px] transition-all delay-75">
Join
</div>
</header>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
const Hero = () => {
return (
<div className="relative bg-[url('/images/hero.webp')] h-[100vh] bg-center bg-no-repeat bg-cover p-[2vw] flex items-center justify-between lg:flex-col 2xl:flex-row">
<div className="relative bg-[url('/images/hero.webp')] lg:h-[100vh] bg-center bg-no-repeat bg-cover p-[2vw] flex flex-col items-center gap-[20px] lg:gap-0 lg:justify-between lg:flex-col 2xl:flex-row">
{/* Overlay */}
<div className="absolute inset-0 bg-black opacity-50"></div>

<h1 className="relative text-[160px] font-[600] leading-[200px] text-[#fff] z-10">
<h1 className="relative text-[40px] lg:text-[160px] font-[600] lg:leading-[200px] text-[#fff] z-10">
Darwinia <br /> Community
<br /> DAO
</h1>
Expand Down
26 changes: 13 additions & 13 deletions src/components/InfiniteSlider.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
const InfiniteSlider = () => {
return (
<div className="bg-[#FB3B94] py-[1.875rem] lg:py-[2.5rem] my-[100px] mx-[-50px]">
<div className="bg-[#FB3B94] py-[1.875rem] lg:py-[2.5rem] my-[50px] lg:my-[100px] mx-0 lg:mx-[-50px]">
<div className="flex overflow-hidden space-x-[3.75rem] lg:space-x-[5rem]">
<div className="flex space-x-16 animate-loop-scroll">
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Safe Wallet
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Fun Crypto
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Mint NFTs
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Darwinia
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Wizard
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
EVM Based
</h4>
</div>
<div className="flex space-x-16 animate-loop-scroll" aria-hidden="true">
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Safe Wallet
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Fun Crypto
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Mint NFTs
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Darwinia
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
Wizard
</h4>
<h4 className="text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
<h4 className="text-[20px] lg:text-[40px] font-[500] text-[white] max-w-none object-contain w-[10.875rem] lg:w-[13.188rem]">
EVM Based
</h4>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/InfiniteText.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ const InfiniteText = () => {
<div className="py-[2.5rem] my-[100px]">
<div className="flex overflow-hidden">
<div className="flex animate-loop-scroll">
<h4 className="text-white text-[160px] max-w-none object-contain w-[120rem] font-bold">
<h4 className="text-white text-[40px] lg:text-[160px] max-w-none object-contain w-[500px] lg:w-[120rem] font-bold">
We make things Better
</h4>
</div>
<div className="flex animate-loop-scroll" aria-hidden="true">
<h4 className="text-white text-[160px] max-w-none object-contain w-[120rem]">
<h4 className="text-white text-[40px] lg:text-[160px] max-w-none object-contain w-[500px] lg:w-[120rem] font-bold">
We make things Better
</h4>
</div>
Expand Down
10 changes: 6 additions & 4 deletions src/components/LetsChat.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
const LetsChat = () => {
return (
<div className="w-full min-h-[375px] flex items-center justify-between bg-white transition-all delay-75 duration-200 cursor-pointer hover:bg-[#FB3B94] my-[100px] p-[50px] rounded-[50px] ">
<div className="w-full min-h-[375px] flex items-center justify-between flex-col lg:flex-row bg-white transition-all delay-75 duration-200 cursor-pointer hover:bg-[#FB3B94] my-[100px] p-[50px] rounded-[50px] gap-[20px] lg:gap-0 ">
<div>
<h2 className="text-[120px] font-[600]">Lets Start Now</h2>
<p className="mt-[10px] text-[30px] font-[500]">
<h2 className="text-[40px] lg:text-[120px] font-[600]">
Lets Start Now
</h2>
<p className="text-[20px] lg:mt-[10px] lg:text-[30px] font-[500]">
Join the community by connecting to your wallet
</p>
</div>
<button className="w-[200px] h-[200px] rounded-full bg-black text-white text-[40px] font-[600] hover:scale-[1.05] duration-300">
<button className="w-[100px] h-[100px] lg:w-[200px] lg:h-[200px] rounded-full bg-black text-white text-[40px] font-[600] hover:scale-[1.05] duration-300">
Start
</button>
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/components/OurClients.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const OurClients = () => {
config: { duration: 700 },
},
className:
"w-[26vw] h-[150px] bg-black text-white absolute p-[20px] rounded-[50px] rotate-12 flex items-center",
"lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center",
text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
},
{
Expand All @@ -27,7 +27,7 @@ const OurClients = () => {
},
src: "/images/NFT/NFT_5.png",
className:
"w-[150px] h-[150px] absolute p-[20px] rounded-[50px] -rotate-12",
"w-[150px] h-[150px] lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 hidden lg:block",
},
{
type: "div",
Expand All @@ -37,7 +37,7 @@ const OurClients = () => {
config: { duration: 700 },
},
className:
"w-[26vw] h-[150px] bg-black text-white absolute p-[20px] rounded-[50px] -rotate-12 flex items-center",
"lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 flex items-center",
text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
},
{
Expand All @@ -50,7 +50,7 @@ const OurClients = () => {
},
src: "/images/DCDAO.png",
alt: "",
className: "absolute w-[9.76vw] h-[9.76vw]",
className: "lg:absolute w-[9.76vw] h-[9.76vw] hidden lg:block",
},
{
type: "img",
Expand All @@ -62,7 +62,7 @@ const OurClients = () => {
},
src: "/images/DCDAO.png",
alt: "",
className: "absolute w-[9.76vw] h-[9.76vw]",
className: "lg:absolute w-[9.76vw] h-[9.76vw] hidden lg:block",
},
{
type: "div",
Expand All @@ -72,7 +72,7 @@ const OurClients = () => {
config: { duration: 700 },
},
className:
"w-[26vw] h-[150px] bg-black text-white absolute p-[20px] rounded-[50px] rotate-12 flex items-center",
"lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center",
text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
},
{
Expand All @@ -84,7 +84,7 @@ const OurClients = () => {
},
src: "/images/NFT/NFT_4.png",
className:
"w-[150px] h-[150px] absolute p-[20px] rounded-[50px] -rotate-12",
"w-[150px] h-[150px] lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 hidden lg:block",
},
{
type: "div",
Expand All @@ -94,7 +94,7 @@ const OurClients = () => {
config: { duration: 700 },
},
className:
"w-[26vw] h-[150px] bg-black text-white absolute p-[20px] rounded-[50px] -rotate-12 flex items-center",
"lg:w-[26vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 flex items-center",
text: "T“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
},
{
Expand All @@ -106,7 +106,7 @@ const OurClients = () => {
},
src: "/images/NFT/NFT_6.png",
className:
"w-[150px] h-[150px] absolute p-[20px] rounded-[50px] -rotate-12",
"w-[150px] h-[150px] lg:absolute p-[20px] rounded-[50px] lg:-rotate-12 hidden lg:block",
},
{
type: "div",
Expand All @@ -116,7 +116,7 @@ const OurClients = () => {
config: { duration: 700 },
},
className:
"w-[21vw] h-[150px] bg-black text-white absolute p-[20px] rounded-[50px] rotate-12 flex items-center",
"lg:w-[21vw] lg:h-[150px] bg-black text-white lg:absolute p-[20px] rounded-[50px] lg:rotate-12 flex items-center",
text: "“In the top 1% of companies I've ever worked with when it comes to people caring about my project.”",
},
];
Expand Down Expand Up @@ -148,14 +148,14 @@ const OurClients = () => {

return (
<div
className="flex items-center justify-center mt-[50%] mb-[600px] flex-col relative transition-all delay-75"
className="flex items-center justify-center mt-[50%] lg:mb-[600px] flex-col relative transition-all delay-75 gap-[20px] lg:gap-0"
ref={componentRef}
>
{animatedElements}
<h2 className="text-[90px] text-center w-[938px] font-[600] leading-[120px]">
<h2 className="text-[30px] lg:text-[90px] text-center lg:w-[938px] font-[600] lg:leading-[120px]">
Our Clients Can’t Say Enough About Us.
</h2>
<p className="mt-[30px] text-[30px] w-[512px] text-center font-[500]">
<p className="mt-[30px] text-[16px] lg:text-[30px] lg:w-[512px] text-center font-[500]">
Take a look for yourself. No Slack messages were harmed in the making of
this component.
</p>
Expand Down
Loading

0 comments on commit fb70ba3

Please sign in to comment.