Features Section Done iampavangandhi#60

fabcodingzest · Aug 29, 2020 · d505389 · d505389
1 parent d574c71
commit d505389
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 12 deletions.
diff --git a/public/css/style.css b/public/css/style.css
diff --git a/public/images/mobile-buy-mockup.png b/public/images/mobile-buy-mockup.png
diff --git a/public/images/mobile-market-mockup.png b/public/images/mobile-market-mockup.png
diff --git a/public/images/mobile-payment-mockup.png b/public/images/mobile-payment-mockup.png
diff --git a/views/login.ejs b/views/login.ejs
@@ -81,32 +81,135 @@
     </div>
   </div>
   <!-- Hero Section -->
-  <div class="max-w-4xl lg:max-w-5xl my-4 md:my-0 mx-4 md:mx-auto">
-    <div class="wrapper flex flex-col md:flex-row items-center justify-between max-w-6xl h-2/3 mx-auto">
-      <div class="text-box md:w-1/2 flex justify-start flex-col text-center md:text-left md:ml-8 md:mb-16 ld:ml-0">
-        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 text-gray-900">TradeByte</h1>
-        <p class="text-lg sm:text-xl lg:text-2xl text-gray-700">Welcome to TradeByte, stocks trading simulation webapp. Your one stop to all the latest stocks and their insights.</p>
+  <section class="max-w-4xl lg:max-w-5xl my-4 md:my-0 mx-4 md:mx-auto">
+    <div
+      class="wrapper flex flex-col md:flex-row items-center justify-between max-w-6xl h-2/3 mx-auto"
+    >
+      <div
+        class="text-box md:w-1/2 flex justify-start flex-col text-center md:text-left md:ml-8 md:mb-16 ld:ml-0"
+      >
+        <h1
+          class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 text-gray-900"
+        >
+          TradeByte
+        </h1>
+        <p class="text-lg sm:text-xl lg:text-2xl text-gray-700">
+          Welcome to TradeByte, stocks trading simulation webapp. Your one stop
+          to all the latest stocks and their insights.
+        </p>
       </div>
       <div class="illustration-box w-full md:w-2/3">
         <img src="../images/desktop-mockup.png" alt="TradeByte Illustration" />
       </div>
     </div>
-  </div>
-  <!--  -->
+  </section>
+  <!-- Features -->
+  <section class="features bg-gray-200">
+    <div class="max-w-5xl mx-auto p-8">
+      <h2 class="heading text-gray-800 text-5xl text-center font-bold italic mb-4">Features of TradeByte</h2>
+      <div class="feature-box mb-8 md:mb-0 flex justify-between items-center">
+        <div class="text w-full text-center md:text-left md:w-1/2">
+          <h3 class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 text-gray-700">
+            Search for Stocks in Market
+          </h3>
+          <p class="text-sm md:text-lg lg:text-xl text-gray-600">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+            beatae tempore quibusdam nobis, delectus optio quam voluptas in
+            expedita, ab cumque quidem voluptatem quisquam animi, tenetur
+            suscipit sint quod nulla!
+          </p>
+        </div>
+        <div class="hidden md:block img-box w-1/2 h-1/2">
+          <img
+            class="transform -skew-x-6 skew-y-6 -mr-8 lg:-mr-16"
+            src="/images/mobile-market-mockup.png"
+            alt="View Page Illustration"
+          />
+        </div>
+      </div>
+      <div
+        class="feature-box mb-8 md:mb-0 flex flex-row-reverse justify-between items-center"
+      >
+        <div class="text w-full text-center md:text-left md:w-1/2">
+          <h3 class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 text-gray-700">
+            View Analysis of a stock
+          </h3>
+          <p class="text-sm md:text-lg lg:text-xl text-gray-600">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+            beatae tempore quibusdam nobis, delectus optio quam voluptas in
+            expedita, ab cumque quidem voluptatem quisquam animi, tenetur
+            suscipit sint quod nulla!
+          </p>
+        </div>
+        <div class="hidden md:block img-box w-1/2 h-1/2">
+          <img
+            class="transform skew-x-6 -skew-y-6 -ml-8 lg:-ml-16"
+            src="/images/mobile-view-mockup.png"
+            alt="View Page Illustration"
+          />
+        </div>
+      </div>
+      <div class="feature-box mb-8 md:mb-0 flex justify-between items-center">
+        <div class="text w-full text-center md:text-left md:w-1/2">
+          <h3 class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 text-gray-700">
+            Buy and Sell stocks
+          </h3>
+          <p class="text-sm md:text-lg lg:text-xl text-gray-600">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+            beatae tempore quibusdam nobis, delectus optio quam voluptas in
+            expedita, ab cumque quidem voluptatem quisquam animi, tenetur
+            suscipit sint quod nulla!
+          </p>
+        </div>
+        <div class="hidden md:block img-box w-1/2 h-1/2">
+          <img
+            class="transform -skew-x-6 skew-y-6 -mr-8 lg:-mr-16"
+            src="/images/mobile-buy-mockup.png"
+            alt="View Page Illustration"
+          />
+        </div>
+      </div>
+      <div
+        class="feature-box mb-8 md:mb-0 flex flex-row-reverse justify-between items-center"
+      >
+        <div class="text w-full text-center md:text-left md:w-1/2">
+          <h3 class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-6 text-gray-700">
+            Safe Payment Gateway with Stripe
+          </h3>
+          <p class="text-sm md:text-lg lg:text-xl text-gray-600">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
+            beatae tempore quibusdam nobis, delectus optio quam voluptas in
+            expedita, ab cumque quidem voluptatem quisquam animi, tenetur
+            suscipit sint quod nulla!
+          </p>
+        </div>
+        <div class="hidden md:block img-box w-1/2 h-1/2">
+          <img
+            class="transform skew-x-6 -skew-y-6 -ml-8 lg:-ml-16"
+            src="/images/mobile-payment-mockup.png"
+            alt="View Page Illustration"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
   <!-- Footer -->
   <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
     <div class="container py-6">
       <div
         class="heading md:flex md:max-w-5xl md:justify-between md:items-center md:mx-auto"
       >
-        <h1 class="text-center md:text-left text-lg font-bold lg:text-2xl max-w-4xl">
+        <h1
+          class="text-center md:text-left text-lg font-bold lg:text-2xl max-w-4xl"
+        >
           Join TradeByte to keep up with the latest news about stocks and
           trading.
         </h1>
 
         <div class="flex justify-center items-center md:ml-6">
           <div class="bg-white rounded-lg mt-4 md:mt-0">
-            <a href="/user/signup"
+            <a
+              href="/user/signup"
               class="w-full p-3 text-sm bg-red-700 rounded-lg font-semibold uppercase px-6 lg:px-10"
             >
               SignUp
@@ -117,15 +220,21 @@
 
       <hr class="h-px mt-6 bg-gray-700 border-none" />
 
-      <div class="flex flex-col text-xs md:text-sm items-center justify-between mt-6 md:flex-row">
+      <div
+        class="flex flex-col text-xs md:text-sm items-center justify-between mt-6 md:flex-row"
+      >
         <div class="text-center md:text-left">
           <a href="/" class="text-xl font-bold">TradeByte</a>
           <p>This app is made for educational purpose only.</p>
         </div>
         <div class="flex mt-4 md:m-0 items-start">
           <div class="-mx-4">
             <p>&copy;Copyright TradeByte Team, 2020</p>
-            <a target="_blank" href="https://github.com/iampavangandhi/TradeByte">Check the code on GitHub</a>
+            <a
+              target="_blank"
+              href="https://github.com/iampavangandhi/TradeByte"
+              >Check the code on GitHub</a
+            >
           </div>
         </div>
       </div>