green line size issue fixed

tejash023 · Apr 4, 2023 · 052cecd · 052cecd
1 parent de2fb87
commit 052cecd
Show file tree

Hide file tree

Showing 10 changed files with 282 additions and 86 deletions.
diff --git a/components/home/ExploreProjects/ExploreProjects.tsx b/components/home/ExploreProjects/ExploreProjects.tsx
@@ -22,7 +22,7 @@ function ExploreProjects() {
 
  return (
  <div>
- <div id="projects" className="w-full relative">
+ <div id="projects" className="w-full md:pb-20 lg:pb-0 relative">
  {/* Heading Part */}
  <div className="flex justify-between gap-2 md:items-center flex-col md:flex-row mb-5">
  <h1 className="md:text-[64px] text-[36px] text-[#7EE787] font-medium">
@@ -53,23 +53,11 @@ function ExploreProjects() {
  {/* Cards */}
  <div className="flex md:mt-1">
  <div className="w-1/4 hidden md:block pt-28 pb-12 px-10">
- {/* Connector Big Screen */}
- <div className="">
- <div className="flex h-[300px]">
- <div className="flex-1 pt-[6px] pl-[47px]">
- <div className="border-t-[3px] border-l-[3px] border-[#7ee787] w-full h-full float-right rounded-tl-[30px]" />
- </div>
- <div className="w-4">
- <div className="w-4 h-4 rounded-full border-[3px] border-[#7ee787]"></div>
- </div>
- </div>
- <div className="flex h-4">
- <div className="flex-1">
- <div className="w-4 h-4 rounded-full ml-[40px] border-[3px] border-[#7ee787]"></div>
- </div>
- <div className="w-4"></div>
- </div>
- </div>
+ <img
+ className="lg:h-96"
+ src="/LandingPage/OpenSource/Frame.png"
+ alt=""
+ />
  </div>
  <div className="md:w-1/2 w-full relative shrink-0">
  <ExploreCard data={contentData[2]} />
@@ -78,10 +66,8 @@ function ExploreProjects() {
  </div>
 
  {/* Connector Mobile */}
- <div className="md:hidden flex flex-col items-center w-fit px-8 py-12">
- <div className="w-4 h-4 rounded-full border-2 border-[#7ee787]" />
- <div className="border-l-2 border-[#7EE787] h-16" />
- <div className="w-4 h-4 rounded-full border-2 border-[#7ee787]" />
+ <div className="flex md:hidden sm:h-40 h-28 m-10">
+ <img src="/line1.png" alt="line3 " />
  </div>
  </div>
  </div>

diff --git a/components/home/Open-Source Programs/mainOpenSource.tsx b/components/home/Open-Source Programs/mainOpenSource.tsx
@@ -7,9 +7,9 @@ import LFX from '../../../public/LFX.png';
 
 function OpenSourcePrograms() {
  return (
- <div>
- <div className="flex flex-col lg:flex-row box-border mx-w-screen justify-between items-center">
- <div className="p-3 lg:w-[45%] space-y-10">
+ <div className="relative">
+ <div className="flex flex-col lg:flex-row mt-5 sm:mt-0 box-border mx-w-screen justify-between items-center">
+ <div className="p-3 lg:w-[45%] space-y-5 sm:space-y-10">
  <h1 className="xl:text-5xl font-thin lg:text-4xl text-3xl">
  <span className="font-semibold text-[#7EE787]">
  Learn about some biggest
@@ -22,13 +22,21 @@ function OpenSourcePrograms() {
  </div>
  <div className="md:w-4/5 lg:w-3/5 relative md:p-10">
  <img
- className="relative z-10"
+ className="relative z-10 sm:block hidden"
  src="/LandingPage/OpenSource/program.png"
  alt=""
  />
+ <img
+ className="relative scale-110 z-10 sm:hidden block"
+ src="/LandingPage/OpenSource/Group111.png"
+ alt=""
+ />
  <div className="green-gradient absolute z-0 lg:bottom-52 sm:bottom-24 bottom-16 lg:right-96"></div>
  </div>
  </div>
+ <div className="flex sm:justify-end justify-start sm:h-40 h-28 ml-8 sm:ml-0 sm:mr-40">
+ <img src="/line1.png" alt="line3 " />
+ </div>
  </div>
  );
 }

diff --git a/components/home/OpenSourceProfile/OpenSourceProfile.tsx b/components/home/OpenSourceProfile/OpenSourceProfile.tsx
@@ -44,7 +44,7 @@ const opensrc = () => {
  alt=""
  />
  <img
- className="flex w-[70vw] items-center justify-center mt-3 sm:hidden"
+ className="flex w-[60vw] mr-5 items-center justify-center mt-3 sm:hidden"
  src="true-design2.png"
  alt=""
  />

diff --git a/components/home/Tutorial Hell/tutorial_hell.tsx b/components/home/Tutorial Hell/tutorial_hell.tsx
@@ -186,7 +186,7 @@ const TutorialHell = () => {
  </div>
  </div>
  </div>
- <div className="flex h-40 m-10">
+ <div className="flex sm:h-40 h-28 m-10">
  <img src="/line1.png" alt="line3 " />
  </div>
  </div>

diff --git a/components/home/WhatIsClueless/WhatIsClueless.tsx b/components/home/WhatIsClueless/WhatIsClueless.tsx
@@ -16,56 +16,6 @@ const WhatIsClueless: React.FC = () => {
  return (
  <div className="relative">
  <div className="green-gradient absolute -top-10 -right-10 hidden sm:block"></div>
- {/* <Container
- maxWidth="lg"
- className="mt-24 flex flex-col md:flex-row scale-105"
- sx={{
- width: isMobile ? '92.5%' : '95%',
- justifyContent: 'center',
- alignItems: 'center',
- border: '1px solid #ccc',
- gap: isMobile ? '' : '2rem',
- borderRadius: '46px',
- background: '#282E36',
- marginTop: '2rem',
- }}
- >
- <Box
- sx={{
- width: isMobile ? '100%' : '70%',
- padding: isMobile ? '2rem 1rem' : '4rem 2rem',
- }}
- >
- <Typography
- variant="h2"
- sx={{
- fontWeight: '500',
- fontSize: isMobile ? '2rem' : '2.6rem',
- color: 'lightgreen',
- marginBottom: '1rem',
- }}
- >
- Clueless is a student community
- </Typography>
- <Typography
- variant="h3"
- sx={{
- fontWeight: '300',
- fontSize: isMobile ? '1.2rem' : '1.4rem',
- lineHeight: '1.8rem',
- color: 'white',
- }}
- >
- Built with the vision to encourage open-source enthusiasts! We
- provide the best resources, conducts weekly contests to test your
- skills, a guide to Open-source, and help you build projects.
- </Typography>
- </Box>
- <HeatMapImage />
- </Container>
- <div className="flex justify-end h-40 mr-72 my-4">
- <img src="/line1.png" alt="line1" />
- </div> */}
  <div className="bg-[#282E36] relative border border-[#ccc] flex flex-col lg:flex-row mb-8 justify-between items-center mt-[6rem] rounded-[2.5rem] p-8">
  <div>
  <h1 className="text-[2rem] md:text-[2.4rem] text-skin-globalGreen font-medium mb-[1rem]">
@@ -82,7 +32,7 @@ const WhatIsClueless: React.FC = () => {
  <HeatMapImage />
  </div>
  </div>
- <div className="flex justify-end h-40 mr-56 my-4">
+ <div className="flex justify-end sm:h-40 h-28 md:mr-56 mr-12 -mt-2 sm:mt-0">
  <img src="/line1.png" alt="line1" />
  </div>
  </div>

diff --git a/components/home/WorldOfOpenSource/WorldOfOpenSource.tsx b/components/home/WorldOfOpenSource/WorldOfOpenSource.tsx
@@ -20,9 +20,9 @@ const WorldOfOpenSource: React.FC = () => {
  }, []);
 
  return (
- <div className="relative">
+ <div className="relative md:mt-10 mt-8">
  <div className="green-gradient absolute z-10 -top-5 right-80"></div>
- <div className="flex flex-col justify-between relative z-20 mb-4 md:flex-row w-full h-[380px]">
+ <div className="flex flex-col-reverse justify-between relative z-20 mb-4 md:flex-row w-full h-auto">
  <div className="w-full md:w-[80%] my-auto">
  <div className="md:pr-[3rem] py-[1rem] max-w-[524px]">
  <Typography
@@ -57,9 +57,9 @@ const WorldOfOpenSource: React.FC = () => {
 
  <motion.div
  id="motion-area"
- className="my-auto w-full md:w-[60%]"
+ className="my-auto w-full sm:h-[320px] h-[420px] md:w-[60%]"
  style={{
- height: lessThanLag ? '320px' : '80%',
+ // height: lessThanLag ? '320px' : '80%',
  backgroundColor: 'rgba(40, 46, 54, 0.97)',
  borderRadius: '28px',
  padding: '12px',
@@ -187,7 +187,7 @@ const WorldOfOpenSource: React.FC = () => {
  width: '76px',
  position: 'relative',
  left: '70%',
- top: '-25%',
+ top: '5%',
  }}
  >
  <SvgIcon sx={{ fontSize: '76px', cursor: 'grab' }}>
@@ -239,7 +239,7 @@ const WorldOfOpenSource: React.FC = () => {
  </motion.div>
  </motion.div>
  </div>
- <div className="flex h-72 mt-[85%] sm:mt-[50%] md:mt-[10%] lg:mt-0">
+ <div className="flex sm:h-56 h-36 ml-5 lg:mt-0">
  <img src="/line2.png" alt="line2" />
  </div>
  </div>