Merge pull request #76 from mevlutcantuna/implement-second-section-of…

…-landing-page

implemented second section of landing page

gurubu-client/src/app/components/page/testimonial.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+
+const Testimonial = () => {
+  return (
+    <section className="testimonial-section">
+      <div className="testimonial">
+        <Image
+          width={140}
+          height={40}
+          alt="grubu-logo"
+          src="/gurubu-logo.svg"
+        />
+        <p className="testimonial__text">
+          I was looking for an application that could quickly determine story
+          points without registration, and I finally found it.
+        </p>
+        <div className="testimonial__owner">
+          <Image
+            src="/testimonial-avatar.png"
+            width={64}
+            height={64}
+            alt="testmonial-avatar"
+          />
+          <span className="testimonial__owner__name">Cihat Bilgiç</span>
+          <span className="testimonial__owner__title">
+            Product Owner, Trendyol
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Testimonial;

gurubu-client/src/app/page.tsx

@@ -2,6 +2,7 @@ import Footer from "./components/common/footer";
 import Navbar from "./components/common/navbar";
 import Greeting from "./components/page/greeting";
 import Howto from "./components/page/howto";
+import Testimonial from "./components/page/testimonial";
 import "./styles/page/style.scss";
 
 export default function Home() {
@@ -10,6 +11,7 @@ export default function Home() {
       <Navbar />
       <Greeting />
       <Howto />
+      {/*  <Testimonial /> */}
       <Footer />
     </main>
   );

gurubu-client/src/app/styles/page/style.scss

@@ -3,6 +3,7 @@
 
 @import "./greeting.scss";
 @import "./howto.scss";
+@import "./testimonial.scss";
 
 main {
   min-height: 100vh;

gurubu-client/src/app/styles/page/testimonial.scss

@@ -0,0 +1,45 @@
+.testimonial-section{
+    width: 100%;
+    margin: $space-xxxxlarge 0;
+    padding: 0 $space-xxlarge;
+
+    .testimonial{
+        max-width: 1280px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: $space-xxlarge 0;
+        margin: 0 auto;
+
+        &__text{
+            font-size: $font-size-body-2;
+            font-weight: $medium;
+            line-height: $line-height-header-3;
+            text-align: center;
+
+            @include media(xl){
+                font-size: $font-size-body-1;
+                line-height: $line-height-header-2;
+            }
+        }
+
+        &__owner{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+
+            &__name{
+                margin: $space-large 0 $space-xsmall 0;
+                font-size: $font-size-paragraph-2;
+                font-weight: $semibold;
+            }
+
+            &__title{
+                color: #475467;
+                line-height: $line-height-paragraph-4;
+            }
+        }
+    }
+}

gurubu-client/src/app/styles/variables.scss

@@ -58,8 +58,9 @@ $font-size-header-1: 50px;
 $font-size-header-2: 42px;
 $font-size-header-3: 26px;
 
-$font-size-body-1: 36px;
-$font-size-body-2: 28px;
+$font-size-body-1: 48px;
+$font-size-body-2: 36px;
+$font-size-body-3: 28px;
 
 $font-size-paragraph-1: 22px;
 $font-size-paragraph-2: 18px;
@@ -101,6 +102,7 @@ $space-large: 16px;
 $space-xlarge: 24px;
 $space-xxlarge: 32px;
 $space-xxxlarge: 48px;
+$space-xxxxlarge: 96px;
 
 // radius