Final update

public/index.html

@@ -11,7 +11,6 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
     <!-- TAILWIND CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
 

src/components/about.js

@@ -1,16 +1,16 @@
 import SvgCircle from "./svg/svgCircles";
 function About() {
   return (
-    <div id="about" className="panel w-screen h-screen overflow-hidden">
+    <div id="about" className="panel w-screen sm:h-screen h-[100vh] overflow-scroll sm:overflow-hidden">
       <SvgCircle x="-10vw" y="50vh" r = "60vh"/>
       <SvgCircle x="-10vw" y="50vh" r = "40vh"/>
 
-      <div className="flex flex-col  md:grid grid-cols-9 mx-auto p-2 py-20  text-blue-50">
+      <div className="flex flex-col  md:grid grid-cols-9 mx-auto p-2 sm:py-20 py-6  text-blue-50">
           <div className="flex flex-row-reverse md:contents">
             <div
-              className="col-start-1 col-end-5 p-4 rounded-xl my-4 ml-auto shadow-md"
+              className="col-start-1 text-center col-end-5 p-4 rounded-xl my-4 ml-auto "
             >
-              <h3 className=" font-bold justify-center mb-3 bg-gradient-to-r from-indigo-800 to-green-400 bg-clip-text inline text-4xl">
+              <h3 className=" font-bold justify-center mb-3 bg-gradient-to-r from-[#262262] to-[#39B54A] text-transparent bg-clip-text inline text-4xl">
                 What is FLiC
               </h3>
               <p className="leading-tight text-[#D6D6D6] text-justify">
@@ -42,9 +42,9 @@ function About() {
             </div>
             <div
 
-              className=" col-start-6 col-end-10 p-4 rounded-xl my-4 mr-auto shadow-md"
+              className=" col-start-6 col-end-10 p-4 text-center rounded-xl my-4 mr-auto "
             >
-              <h3 className=" justify-center mb-3 bg-gradient-to-r from-indigo-800 to-green-400 text-transparent bg-clip-text font-bold inline text-4xl">
+              <h3 className=" justify-center mb-3 bg-gradient-to-r from-[#262262] to-[#39B54A] text-transparent bg-clip-text font-bold inline text-4xl">
                 Why is FLiC
               </h3>
               <p className="leading-tight text-[#D6D6D6] text-justify">
@@ -65,9 +65,9 @@ function About() {
           <div className="flex flex-row-reverse md:contents">
             <div
 
-              className="col-start-1 col-end-5 p-4 rounded-xl my-4 ml-auto shadow-md"
+              className="col-start-1 text-center col-end-5 p-4 rounded-xl my-4 ml-auto "
             >
-              <h3 className="justify-center mb-3 bg-gradient-to-r from-indigo-800 to-green-400 text-transparent bg-clip-text font-bold inline text-4xl">
+              <h3 className="justify-center mb-3 bg-gradient-to-r from-[#262262] to-[#39B54A] text-transparent bg-clip-text font-bold inline text-4xl">
                 Our Mission
               </h3>
               <p className="leading-tight text-[#D6D6D6] text-justify">

src/components/contact.js

@@ -1,7 +1,94 @@
 function Contact() {
   return (
-    <div id="contact" className="full-screen h-screen w-screen">
-      <h1>Contact</h1>
+    <div id="contact" className="full-screen sm:h-screen md:mt-[70vh] lg:mt-0 h-auto w-screen">
+      <div id='contact'>
+      <section className="sm:py-52 pt-20 h-auto text-gray-50">
+        <div className="grid max-w-6xl grid-cols-1 px-6 m-auto lg:px-8 md:grid-cols-2 md:divide-x">
+          <div className="py-6 md:py-0 md:px-6">
+            <h1 className="bg-gradient-to-r from-[#262262] to-[#39B54A] text-transparent bg-clip-text text-4xl font-bold">
+              Get in touch
+            </h1>
+            <p className="pt-2 pb-4">
+              Fill in the form to start a conversation
+            </p>
+            <div className="space-y-4">
+              <p className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="w-5 h-5 mr-2 sm:mr-6"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                <span>FLiC Address, IET-DAVV</span>
+              </p>
+              <p className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="w-5 h-5 mr-2 sm:mr-6"
+                >
+                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
+                </svg>
+                <span>123456789</span>
+              </p>
+              <p className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="w-5 h-5 mr-2 sm:mr-6"
+                >
+                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
+                </svg>
+                <span>contact@business.com</span>
+              </p>
+            </div>
+          </div>
+          <form
+            novalidate=""
+            action="https://formspree.io/f/meqdkojv"
+            method="POST"
+            className="flex flex-col py-6 space-y-4 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid"
+          >
+            <label className="block">
+              <input
+                type="text"
+                placeholder="Your Name"
+                className="block w-full py-2 rounded-3xl px-4 shadow-lg focus:ring focus:ring-opacity-75 focus:ring-yellow-400 bg-gray-800"
+              />
+            </label>
+            <label className="block">
+              <input
+                type="email"
+                placeholder="Email Address"
+                className="block w-full  py-2 rounded-3xl px-4 shadow-lg focus:ring focus:ring-opacity-75 focus:ring-yellow-400 bg-gray-800"
+              />
+            </label>
+            <label className="block">
+              <textarea
+                rows="3"
+                placeholder="Message"
+                className="block w-full py-2 rounded-3xl px-4 shadow-lg  focus:ring focus:ring-opacity-75 focus:ring-yellow-400 bg-gray-800"
+              ></textarea>
+            </label>
+            <button
+              type="button"
+              className="py-2 sm:py-3  font-semibold rounded-full bg-[#39B54A]/80 text-[#202020] self-center px-8 text-lg  focus:ring-opacity-75  hover:bg-[#39B54A]  "
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </section>
+    </div>
     </div>
   );
 }

src/components/home.js

@@ -3,7 +3,7 @@ import SvgDrawIcon from "./svg/svgDrawIcon";
 
 function Home() {
   return (
-    < div id="home" className="panel w-screen h-screen overflow-hidden">
+    < div id="home" className="panel w-screen sm:h-screen h-auto  overflow-hidden">
       <SvgCircle x="90vw" y="50vh" r = "60vh"/>
       <SvgCircle x="90vw" y="50vh" r = "40vh"/>
       <SvgCircle x="5vw" y="95vh" r = "10vh"/>

src/components/navbar.js

@@ -2,8 +2,8 @@ import SvgLogo from "./svg/svgLogo";
 
 function Navbar () {
   return (
-    <nav className="navbar fixed z-50">
-      <ul className="pt-10 pl-16 flex gap-12 items-center text-xl font-bold">
+    <nav className="navbar fixed z-50 bg-[#202020]">
+      <ul className="pt-4 pl-16 flex gap-12 items-center text-xl font-bold">
         {/* LOGO animation -> svg*/}
         <li>
           <a href="#home">

src/components/svg/svgLogo.js

@@ -1,9 +1,9 @@
 function SvgLogo(){
     return (
-      <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="157.71 288.18 764.59 503.63" shapeRendering="geometricPrecision" textRendering="geometricPrecision">
+      <svg id="svg" width={40} height={40} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="157.71 288.18 764.59 503.63" shapeRendering="geometricPrecision" textRendering="geometricPrecision">
       <defs>
         <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%" gradientTransform="rotate(-11)">
-          <stop offset={0} style={{stopColor: '#2F2A7B'}} />
+          <stop offset={0} style={{stopColor: '#262262'}} />
           <stop offset={1} style={{stopColor: '#39B54A'}} />
         </linearGradient>
 

src/components/team.js

@@ -1,12 +1,81 @@
 import SvgCircle from "./svg/svgCircles";
 
 function Team() {
+    const teamchiefs = [
+        {
+            name : "Mustafa Azad",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa Azad",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa Azad",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa Azad",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+    ]
+    const teamhead = [
+        {
+            name : "Mustafa Azad",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+        {
+            name : "Mustafa",
+            desc : "Google",
+            img : "https://source.unsplash.com/user/c_v_r"
+        },
+    ]
+
   return (
     <div id="team" className="full-screen h-screen w-screen">
-      <div className="absolute">
-        <h1>Team</h1>
-        <p>This is team</p>
-      </div>
+      <div className="absolute sm:mx-16 mt-16">
+        <h2 className='bg-gradient-to-r mt-5 mx-auto text-center sm:text-left from-indigo-800 to-green-500 text-transparent bg-clip-text sm:text-5xl text-4xl text-[2.1rem] sm:mx-auto font-bold'>Meet Our Team!</h2>
+        <div className="border-b-4 mb-12  border-[#39B54A] sm:ml-20 my-2 mx-auto lg:w-[15vw] sm:w-[20vw] w-[30vw]"></div>
+        <h3 className='mt-10 font-semibold text-center sm:text-left text-2xl text-white mb-4 sm:mb-4'>Co-Founders</h3>
+        <div className="sm:grid lg:grid-cols-4 sm:grid-cols-2 sm:ml-5 snap-x snap-center md:ml-[-1.7rem] lg:ml-0 sm:w-[90vw] flex ml-[-15%] gap-[14vh] sm:gap-0 mx-auto w-auto mr-4 overflow-auto">
+        {teamchiefs.map((value,idx) => {
+            return(
+                <div className="grid grid-cols-1 ml-[18%] sm:ml-0 my-2" key={idx}>
+                    <div className="sm:w-36 sm:h-36 w-32 h-32 mx-auto rounded-full"><img className='rounded-full sm:w-36 sm:h-36 w-32 h-32' src={value.img} alt="" /></div>
+                    <h3 className='text-center sm:mx-auto w-[8rem] font-semibold text-white my-1 mt-2 text-lg'>{value.name}</h3>
+                    <p className='sm:mx-auto font-medium text-sm text-slate-200 sm:w-40 w-[8rem] text-center'>{value.desc}</p>
+                </div>
+            )
+        })}
+        </div>
+        <h3 className='mt-10 font-semibold text-center sm:text-left text-2xl text-white mb-4 sm:mb-0'>Heads</h3>
+        <div className="sm:grid lg:grid-cols-4 sm:grid-cols-2 sm:ml-5 snap-x snap-center md:ml-[-1.7rem] lg:ml-0 sm:w-[90vw] flex ml-[-15%] gap-[14vh] sm:gap-0 mx-auto w-auto mr-4 overflow-auto">
+        {teamhead.map((value,idx) => {
+            return(
+              <div className="grid grid-cols-1 ml-[18%] sm:ml-0 my-2" key={idx}>
+              <div className="sm:w-36 sm:h-36 w-32 h-32 mx-auto rounded-full"><img className='rounded-full sm:w-36 sm:h-36 w-32 h-32' src={value.img} alt="" /></div>
+              <h3 className='text-center sm:mx-auto w-[8rem] font-semibold text-white my-1 mt-2 text-lg'>{value.name}</h3>
+              <p className='sm:mx-auto font-medium text-sm text-slate-200 sm:w-40 w-[8rem] text-center'>{value.desc}</p>
+          </div>
+            )
+        })}
+        </div>
+        </div>
 
       <SvgCircle x="-10vw" y="-50vh" r = "60vh"/>
     </div>

tailwind.config.js

@@ -2,9 +2,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "primary-color": "var(--primary-color)",
-        "secondary-color": "var(--secondary-color)",
-        "gradient" : "var(--gradient)"
+        "pcolor": "#202020",
+        "grncolor": "#39B54A",
+        "purp" : "#262262"
       },
     },
   },