From b4fd143a876fe28c2ec17df4a293558f8245f48d Mon Sep 17 00:00:00 2001
From: Roaster05 <100672872+Roaster05@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:59:40 +0530
Subject: [PATCH] fixed codestartpage UI

---
 src/components/FAQ2.vue                       |  53 ++++++
 src/components/LookBack2.vue                  |  88 ++++++++++
 src/components/QuesAns2.vue                   | 128 ++++++++++++++
 src/components/Testimonials2.vue              | 164 ++++++++++++++++++
 src/components/codestart/About.vue            |   2 +-
 .../codestart/CodestartSponsors.vue           |   2 +-
 src/components/codestart/FAQ.vue              |   6 +-
 src/components/codestart/Landing.vue          |   4 +-
 src/components/layouts/SectionLayout2.vue     |  95 ++++++++++
 src/pages/CodeStart.vue                       |   6 +-
 10 files changed, 538 insertions(+), 10 deletions(-)
 create mode 100644 src/components/FAQ2.vue
 create mode 100644 src/components/LookBack2.vue
 create mode 100644 src/components/QuesAns2.vue
 create mode 100644 src/components/Testimonials2.vue
 create mode 100644 src/components/layouts/SectionLayout2.vue

diff --git a/src/components/FAQ2.vue b/src/components/FAQ2.vue
new file mode 100644
index 0000000..b233c76
--- /dev/null
+++ b/src/components/FAQ2.vue
@@ -0,0 +1,53 @@
+<template>
+    <div :class="[$style.faqList, $style[$mq]]">
+      <QuesAns
+        v-for="(item, i) in faqItems"
+        :key="i"
+        :item="item"
+        ref="faqs"
+        :index="i"
+        @onToggleQuestion="closeOtherQuestions"
+      >
+        <slot :name="i">
+          <p :inner-html.prop="item.answer | anchor"></p>
+        </slot>
+      </QuesAns>
+    </div>
+  </template>
+  
+  <script>
+  const QuesAns = () => import("@components/QuesAns2");
+  
+  export default {
+    components: {
+      QuesAns
+    },
+    props: {
+      faqItems: {
+        type: Array,
+        required: true
+      }
+    },
+    methods: {
+      closeOtherQuestions(index, isOpen) {
+        let { faqs } = this.$refs;
+        faqs.forEach((faq, i) => {
+          if (i != index) faq.open = false;
+        });
+      }
+    }
+  };
+  </script>
+  
+  <style module lang="stylus">
+  .faqList {
+    width: 100%;
+  }
+  
+  @media screen and (max-width: 769px) {
+    .wrapper {
+      width: 90%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/LookBack2.vue b/src/components/LookBack2.vue
new file mode 100644
index 0000000..15bdd53
--- /dev/null
+++ b/src/components/LookBack2.vue
@@ -0,0 +1,88 @@
+<template>
+    <div :class="[$style.lookback, $style[$mq]]">
+      <GridLayout :itemWidth="computedWidth">
+        <div
+          :class="$style.stat"
+          v-for="(stat, i) in this.stats"
+          :key="i"
+          :slot="`item${i}`"
+        >
+          <div :class="$style.clip">
+            <img :src="stat.image" :class="$style.img" />
+          </div>
+          <div :class="$style.name">{{ stat.name }}</div>
+          <div :class="$style.value">{{ stat.value }}</div>
+        </div>
+      </GridLayout>
+    </div>
+  </template>
+  <script>
+  const GridLayout = () => import("./layouts/GridLayout");
+  
+  export default {
+    props: {
+      stats: {
+        type: Array,
+      },
+    },
+    components: {
+      GridLayout,
+    },
+    computed: {
+      computedWidth() {
+        if (this.$mq == "lg") return "160px";
+        return "220px";
+      },
+    },
+  };
+  </script>
+  
+  <style module lang="stylus">
+  .lookback {
+  
+    .stat {
+      width: 200px;
+      height: 200px;
+  
+      &:nth-child(odd) {
+        &::before {
+          content: '';
+          width: 100px;
+        }
+      }
+  
+      .clip {
+        border-radius: 30px;
+        box-shadow: var(--icon-shadow);
+        background: white;
+        width: 160px;
+        height: 160px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 25px;
+        padding: 10px;
+        background-color: #66FF66;
+      }
+  
+      .img {
+        width: 70%;
+        height: 70%;
+        position: relative;
+        top: 10%;
+        left: 15%;
+      }
+  
+      .name, .value {
+        font-family: 'Quicksand';
+        font-weight: 700;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+        color: var(--text-color);
+        line-height: 28px;
+        $font-size: 25px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/QuesAns2.vue b/src/components/QuesAns2.vue
new file mode 100644
index 0000000..5bcd687
--- /dev/null
+++ b/src/components/QuesAns2.vue
@@ -0,0 +1,128 @@
+<template>
+    <div :class="[$style.faqItem, $style[$mq]]">
+      <div :class="$style.question" @click="toggleQues">
+        <p>
+          {{ item.question }}
+          <i
+            class="fa fa-chevron-down"
+            :style="chevronRotateStyle"
+            aria-hidden="true"
+          ></i>
+        </p>
+      </div>
+      <div :class="$style.answer" :style="answerHeightStyle" ref="answer">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        open: false,
+        openProgress: 0,
+        maxHeight: -1,
+      };
+    },
+  
+    props: {
+      item: {
+        required: true,
+        type: Object,
+      },
+      index: {
+        required: true,
+        type: Number,
+      },
+    },
+  
+    methods: {
+      toggleQues: function() {
+        this.open = !this.open;
+        this.$emit("onToggleQuestion", this.index, this.open);
+      },
+      initHeight() {
+        const { answer } = this.$refs;
+        if (answer.offsetHeight > 0) {
+          this.maxHeight = answer.offsetHeight + 10;
+          clearInterval(this.heightInterval);
+        }
+      },
+    },
+  
+    computed: {
+      height() {
+        return this.openProgress * this.maxHeight;
+      },
+      angle() {
+        return this.openProgress * 180;
+      },
+      answerHeightStyle() {
+        return this.maxHeight >= 0 ? { height: ` ${this.height}px` } : {};
+      },
+      chevronRotateStyle() {
+        return { transform: `rotate(${this.angle}deg)` };
+      },
+    },
+  
+    watch: {
+      open: function(val) {
+        TweenLite.to(this.$data, 0.4, { openProgress: val ? 1 : 0 });
+      },
+    },
+    mounted() {
+      this.heightInterval = setInterval(this.initHeight.bind(this), 200);
+    },
+    destroyed() {
+      clearInterval(this.heightInterval);
+    },
+  };
+  </script>
+  
+  <style lang="stylus" module>
+  @require '~@styles/anims';
+  
+  .faqItem {
+    position: relative;
+    width: 100%;
+    text-align: left;
+    clear: both;
+    border-bottom: 2px solid #66FF66;
+  
+    a {
+      color: #66FF66;
+    }
+  
+    .question {
+      cursor: pointer;
+      font-family: 'Roboto Slab';
+      font-weight: bold;
+      user-select: none;
+  
+      i {
+        position: absolute;
+        right: 0px;
+      }
+  
+      ^[0].xs, ^[0].sm {
+        p {
+          $font-size: 14px;
+        }
+      }
+    }
+  
+    .answer {
+      $font-size: 18px;
+      overflow: hidden;
+      width: 100%;
+      clear: both;
+      font-family: 'Quicksand';
+  
+      ^[0].xs, ^[0].sm {
+        $font-size: 13px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/Testimonials2.vue b/src/components/Testimonials2.vue
new file mode 100644
index 0000000..7ed6572
--- /dev/null
+++ b/src/components/Testimonials2.vue
@@ -0,0 +1,164 @@
+<template>
+    <div :class="[$style.testimonials, $style[$mq]]">
+      <div :class="$style.testimonial" v-for="(item, i) in testimonials" :key="i">
+        <div :class="$style.avatar">
+          <img :src="item.image" />
+        </div>
+        <div :class="$style.textbox">
+          <div :class="$style.corner"></div>
+          <div :class="$style.text">
+            <h3>{{ item.name }}</h3>
+            <p>{{ item.comment }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      testimonials: Array,
+    },
+  };
+  </script>
+  
+  <style module lang="stylus">
+  $ht = 120px;
+  $rd = 60px;
+  
+  .testimonials {
+    --item-height: $ht;
+    --item-round: $rd;
+  
+    &.xs {
+      --item-height: 2 * $ht;
+      --item-round: $rd * 0.5;
+    }
+  
+    &.sm {
+      --item-height: 1.2 * $ht;
+      --item-round: $rd * 0.66;
+    }
+  
+    &.md, &.lg {
+      --item-height: 1.5 * $ht;
+    }
+  
+    .testimonial {
+      width: 80%;
+      margin-left: 10%;
+      display: flex;
+      flex-wrap: no-wrap;
+      margin-bottom: 40px;
+      margin-top: 40px;
+  
+      .avatar {
+        order: 0;
+        border-radius: var(--item-round);
+        height: calc(var(--item-round) * 2);
+        width: calc(var(--item-round) * 2);
+        background: #66FF66;
+        padding: calc((var(--item-round) / 6));
+        box-shadow: var(--icon-shadow);
+  
+        img {
+          height: calc(var(--item-round) * (5/3));
+          width: calc(var(--item-round) * (5/3));
+          border-radius: 60px;
+          object-fit: cover;
+        }
+      }
+  
+      .textbox {
+        order: 1;
+        display: flex;
+        flex-flow: row;
+  
+        .corner {
+          order: 2;
+          min-width: var(--item-round);
+          height: var(--item-round);
+          background-repeat: no-repeat;
+        }
+  
+        .text {
+          order: 3;
+          background: #66FF66;
+          padding: 15px calc(var(--item-round) * 0.68);
+  
+          h3 {
+            color: var(--background-color);
+            margin: 0;
+            font-family: 'Roboto Slab';
+  
+            ~/.xs ^[1..-1], ~/.sm ^[1..-1] {
+              $font-size: 14px;
+            }
+          }
+  
+          p {
+            color: var(--background-color);
+            $font-size: 14px;
+            font-weight: 700;
+  
+            ~/.xs ^[1..-1], ~/.sm ^[1..-1], ~/.md ^[1..-1] {
+              $font-size: 12px;
+            }
+          }
+        }
+      }
+  
+      ~/.xs ^[1..-1] {
+        width: 95%;
+        margin-left: 2.5%;
+      }
+    }
+  
+    .testimonial:nth-child(odd) {
+      flex-flow: row;
+  
+      .textbox {
+        flex-flow: row;
+  
+        .corner {
+          background-image: url('~@assets/Testimonial/corner-odd.svg');
+        }
+  
+        .text {
+          border-bottom-left-radius: var(--item-round);
+          border-bottom-right-radius: calc(2 * var(--item-round));
+  
+          ~/.xs ^[1..-1], ~/.md ^[1..-1] {
+            border-bottom-right-radius: var(--item-round);
+            border-top-right-radius: var(--item-round);
+          }
+        }
+      }
+    }
+  
+    .testimonial:nth-child(even) {
+      flex-flow: row-reverse;
+  
+      .textbox {
+        flex-flow: row-reverse;
+        text-align: right;
+  
+        .corner {
+          background-image: url('~@assets/Testimonial/corner-even.svg');
+        }
+  
+        .text {
+          border-bottom-right-radius: var(--item-round);
+          border-bottom-left-radius: calc(2 * var(--item-round));
+  
+          ~/.xs ^[1..-1], ~/.md ^[1..-1] {
+            border-bottom-left-radius: var(--item-round);
+            border-top-left-radius: var(--item-round);
+          }
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/codestart/About.vue b/src/components/codestart/About.vue
index 4504b11..a0b7c77 100644
--- a/src/components/codestart/About.vue
+++ b/src/components/codestart/About.vue
@@ -9,7 +9,7 @@ CodeStart stands for fostering the growth of young minds and becoming a guiding
 </template>
 
 <script>
-const SectionLayout = () => import("@components/layouts/SectionLayout");
+const SectionLayout = () => import("@components/layouts/SectionLayout2");
 
 export default {
   components: {
diff --git a/src/components/codestart/CodestartSponsors.vue b/src/components/codestart/CodestartSponsors.vue
index df5321c..26c4e2f 100644
--- a/src/components/codestart/CodestartSponsors.vue
+++ b/src/components/codestart/CodestartSponsors.vue
@@ -61,7 +61,7 @@
 
 <script>
 const GridLayout = () => import("../layouts/GridLayout");
-const SectionLayout = () => import("@components/layouts/SectionLayout");
+const SectionLayout = () => import("@components/layouts/SectionLayout2");
 const ResponsiveTwoColumnLayout = () =>
   import("@components/layouts/ResponsiveTwoColumnLayout");
 
diff --git a/src/components/codestart/FAQ.vue b/src/components/codestart/FAQ.vue
index 4ad236f..cf47bbd 100644
--- a/src/components/codestart/FAQ.vue
+++ b/src/components/codestart/FAQ.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-const FAQ = () => import("@components/FAQ");
-const SectionLayout = () => import("@components/layouts/SectionLayout");
+const FAQ = () => import("@components/FAQ2");
+const SectionLayout = () => import("@components/layouts/SectionLayout2");
 const ResponsiveTwoColumnLayout = () =>
   import("@components/layouts/ResponsiveTwoColumnLayout");
 
@@ -109,7 +109,7 @@ export default {
       position: relative;
       border-radius: 50%;
       box-shadow: var(--box-shadow);
-      background: $vermilion;
+      background: #66FF66;
       position: relative;
 
       .faqImageText {
diff --git a/src/components/codestart/Landing.vue b/src/components/codestart/Landing.vue
index 32d236e..aed5a18 100644
--- a/src/components/codestart/Landing.vue
+++ b/src/components/codestart/Landing.vue
@@ -161,7 +161,7 @@ $wd = 100vw;
       }
 
       .circle1 {
-        background-color: $vermilion;
+        background-color: #66FF66;
         width: calc((var(--hero-dia) / 1.3));
         height: calc((var(--hero-dia) / 1.3));
         margin-top: calc((var(--hero-dia) / -2.6));
@@ -181,7 +181,7 @@ $wd = 100vw;
                   filter: invert(.75);
       }
       .circle3 {
-        background-color: $vermilion;
+        background-color: #66FF66;
         background-image: url('../../assets/codestart/codestart-S.png');
         background-size: calc((var(--hero-dia) / 2.5)) calc((var(--hero-dia) / 2.5));
         background-position: center;
diff --git a/src/components/layouts/SectionLayout2.vue b/src/components/layouts/SectionLayout2.vue
new file mode 100644
index 0000000..9653490
--- /dev/null
+++ b/src/components/layouts/SectionLayout2.vue
@@ -0,0 +1,95 @@
+<template>
+    <div :class="$style.sectionContainer">
+      <h1 :class="[$style.sectionTitle, $style[$mq], tooLong]">{{ title }}</h1>
+      <hr :class="$style.sectionLine" />
+      <div :style="contentStyle">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      title: {
+        required: true,
+        type: String,
+      },
+      contentStyle: {
+        required: false,
+        type: Object,
+      },
+    },
+    computed: {
+      tooLong() {
+        const title = this.$props.title;
+        if (title.length > 10) {
+          return this.$style.tooLong;
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style module lang="stylus">
+  div.sectionContainer {
+    margin: 36px 0;
+  
+    h1.sectionTitle {
+      font-family: 'Baloo Bhaina 2';
+      color: var(--heading-color);
+      letter-spacing: 2px;
+      $font-size: 64px;
+      margin-top: 144px;
+      margin-bottom: 0px;
+  
+      &.lg, &.xl, &.xxl {
+        padding-top: 36px;
+      }
+  
+      &.xs, &.sm, &.md {
+        margin-top: 72px;
+      }
+  
+      &.xs {
+        $font-size: 52px;
+      }
+  
+      ~/:nth-child(even) h1.sectionTitle {
+        text-align: start;
+      }
+  
+      ~/:nth-child(odd) h1.sectionTitle {
+        text-align: end;
+      }
+    }
+  
+    h1.tooLong {
+      &.xs {
+        $font-size: 36px;
+      }
+    }
+  
+    hr.sectionLine {
+      height: 8px;
+      background-color: #66FF66;
+      display: block;
+      width: 70%;
+      border: none;
+      margin: 0px 0 48px;
+  
+      ~/:nth-child(even) hr.sectionLine {
+        margin-right: 30%;
+        border-radius: 10px;
+        background-image: linear-gradient(to left, var(--background-color), #66FF66);
+      }
+  
+      ~/:nth-child(odd) hr.sectionLine {
+        margin-left: 30%;
+        border-radius: 10px;
+        background-image: linear-gradient(to right, var(--background-color), #66FF66);
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/CodeStart.vue b/src/pages/CodeStart.vue
index b21c1f3..e2c61cf 100644
--- a/src/pages/CodeStart.vue
+++ b/src/pages/CodeStart.vue
@@ -28,12 +28,12 @@
   const About = () => import("@components/codestart/About");
   const FAQ = () => import("@components/codestart/FAQ");
   const Landing = () => import("@components/codestart/Landing");
-  const Lookback = () => import("@components/Lookback");
+  const Lookback = () => import("@components/Lookback2");
   const Prizes = () => import("@components/codestart/Prizes");
   const CodestartSponsors = () => import("@components/codestart/CodestartSponsors");
   const FooterN = () => import("@components/codestart/FooterN");
-  const SectionLayout = () => import("@components/layouts/SectionLayout");
-  const Testimonials = () => import("@components/Testimonials");
+  const SectionLayout = () => import("@components/layouts/SectionLayout2");
+  const Testimonials = () => import("@components/Testimonials2");
   
   export default {
     components: {