Merge pull request #91 from mukeshblackhat/landingPage

made it mobile friendly as per design
code100x · Sep 15, 2024 · 5cf91ea · 5cf91ea
2 parents d8285df + 0b9d0f8
commit 5cf91ea
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 14 deletions.
diff --git a/apps/web/components/CTA.tsx b/apps/web/components/CTA.tsx
@@ -1,13 +1,13 @@
 export function CTA(){
    return(
-      <section className="bg-white dark:bg-[#020817]  py-6 md:py-10 ">
-      <div className="flex p-4 relative items-center m-auto text-center gap-4 max-w-[1024px] border-[1px] rounded-xl bg-gradient-to-t dark:from-[#020817] dark:to-[#0F172A]">
-       <div className="flex flex-col w-1/2 text-start items-start gap-4 m-4 ">
+      <section className="bg-white dark:bg-[#020817]  py-6 md:py-10  ">
+      <div className="flex  flex-col  md:flex-row p-4 relative items-center m-auto text-center gap-4 max-w-[1024px] border-[1px] rounded-xl bg-gradient-to-t from-[] to-[#a4a3a3] dark:from-[#020817] dark:to-[#0F172A]">
+       <div className="flex flex-col w-full md:w-1/2 text-start items-start gap-4 m-4 ">
       <div className=" text-xl font-bold">Ready to Elevate Your <span className="text-blue-200">Coding Skills?</span></div>
       <div className="text-gray-600">Dive into a world of challenging contests, extensive problem libraries, and real-time leaderboards. Whether you’re aiming to sharpen your skills or compete against the best, Algorithmic Arena is your platform for growth and achievement.</div>
-      <button className="p-2 border-[1px] rounded-md bg-[#4E7AFF]">Join Now</button>
+      <button className="p-2 w-full md:w-auto border-[1px] rounded-md bg-[#4E7AFF]">Join Now</button>
        </div>
-       <div className="flex grow"></div>
+       <div className="flex grow h-60 md:h-auto"></div>
        <img className="absolute right-0 bottom-0 " src="a2.svg" alt="a2"/>
       </div>
     </section>

diff --git a/apps/web/components/Features.tsx b/apps/web/components/Features.tsx
@@ -38,14 +38,14 @@ export function Features() {
         <div className="text-5xl font-bold">
           Platform <span className="text-[#4E7AFF]">Features</span>
         </div>
-        <div className="text-sm text-gray-500 w-2/3">
+        <div className="text-sm text-gray-500 w-full md:w-2/3">
           Unlock the Full Potential of Competitive Programming with These Key
           Features
         </div>
         <div className="grid gap-2 grid-cols-1 md:grid-cols-2 p-2 ">
           {Features.map((lang: any, index: number) => (
             <div
-              className={`border-[1px] rounded-md p-2 text-start gap-2 flex flex-col w-[80%] ${
+              className={`border-[1px] rounded-md p-2 text-start gap-2 flex flex-col  ${
                 index % 2 === 0 ? 'mr-0' : 'ml-0'
               }`}
               key={index}

diff --git a/apps/web/components/Hero.tsx b/apps/web/components/Hero.tsx
@@ -1,13 +1,13 @@
 import Link from "next/link";
 export function Hero() {
   return (
-    <section className="bg-white dark:bg-[#020817] py-4 md:py-6">
+    <section className="bg-white dark:bg-[#020817] m-4 md:m-0 py-4 md:py-6">
       <div className="mx-auto px-4 md:px-6 flex flex-col justify-center items-center gap-0">
         <div className="flex flex-col justify-center text-center gap-3 ">
           <div className="text-6xl font-bold">Conquer the Code at</div>
           <div className="text-6xl text-[#4E7AFF] font-bold">Algorithmic Arena</div>
           <div className="text-sm text-gray-600">Join elite coders, solve problems, and climb leaderboards at Algorithmic Arena </div>
-          <div className="flex justify-center gap-4 mt-4">
+          <div className="flex justify-center flex-col md:flex-row gap-4 mt-4">
             <button className="border-[1px] border-gray-600 px-4 py-2 rounded-sm bg-[#4E7AFF]">Start Solving </button>
             <button className="border-[1px] border-gray-600 px-4 py-2 rounded-sm">Explore Features</button>
           </div>

diff --git a/apps/web/components/HowItWork.tsx b/apps/web/components/HowItWork.tsx
@@ -34,7 +34,7 @@ export function HowItWork (){
           <div className="grid gap-3 grid-cols-1 md:grid-cols-2 p-2 ">
             {steps.map((lang: any, index: number) => (
               <div
-                className={`border-[1px] rounded-md p-4  text-start gap-2 flex flex-col w-[80%] ${
+                className={`border-[1px] rounded-md p-4  text-start gap-2 flex flex-col  ${
                   index % 2 === 0 ? 'mr-0' : 'ml-0'
                 } `}
                 key={index}

diff --git a/apps/web/components/Landing.tsx b/apps/web/components/Landing.tsx
@@ -8,7 +8,7 @@ import { CTA } from "./CTA";
 export function Landing() {
   return (
     <div className="flex flex-col min-h-screen">
-      <main className={`${style.background} flex-1`} >
+      <main className={`${style.background} flex-1 m-2 md:m-0`} >
        <Hero/>
        <LanguageSectionLanding/>
        <Features/>

diff --git a/apps/web/components/LanguageSectionLanding.tsx b/apps/web/components/LanguageSectionLanding.tsx
@@ -2,11 +2,11 @@
 export function  LanguageSectionLanding (){
    const languages=['C.svg','C++.svg','Csharp.svg','Go.svg','Java.svg','JS.svg','Php.svg','Ruby.svg']
    return(
-      <section className="bg-white dark:bg-gray-900 bg-gradient-to-t dark:from-[#020817] dark:to-[#0F172A] py-10 md:py-16">
+      <section className="bg-white dark:bg-gray-900 bg-gradient-to-t dark:from-[#020817] dark:to-[#0F172A] mx-4 md:mx-0 py-10 md:py-16">
       <div className="flex flex-col items-center text-center gap-4">
          <div className="text-5xl font-bold">Supported <span className="text-[#4E7AFF]">Languages</span></div>
-         <div className="text-sm text-gray-500 w-1/3">Solve problems in your preferred language with Algorithmic Arena, offering a wide range of programming language options.</div>
-         <div className="flex gap-2 bg-gray-100 dark:bg-black rounded-md p-2">
+         <div className="text-sm text-gray-500 w-full md:w-1/3">Solve problems in your preferred language with Algorithmic Arena, offering a wide range of programming language options.</div>
+         <div className="flex flex-wrap justify-center   gap-2 bg-gray-100 dark:bg-black rounded-md p-2">
             {languages.map((lang:string,index:number)=><img key={index} src={`/languagesIcon/${lang}`} alt="lng icons" />)}
          </div>
          <div>& Many More</div>