feat: created brands feedback section in new homepage

app/home2.0/brand-and-statistics/BrandsList.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import Image from "next/image"
+import fiveStar from "@/assets/5star.svg"
+
+import { brandsData } from "./brands.data"
+
+interface Props extends React.ComponentProps<"div"> {}
+
+export const BrandsList = ({ ...props }: Props) => {
+  return (
+    <div
+      {...props}
+      className="grid grid-cols-1  items-center md:grid-cols-2 lg:grid-cols-3"
+    >
+      {brandsData.map((item) => {
+        return (
+          <div className="flex flex-col items-center justify-center gap-y-4 text-center">
+            <Image src={item.img} alt={item.name} />
+            <p className=""> {item.desc} </p>
+            <Image src={fiveStar} alt={"5 Star"} />
+
+            <div>
+              <p> {item.author.name} </p>
+              <p> {item.author.positions} </p>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

app/home2.0/brand-and-statistics/Statistics.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+interface Props extends React.ComponentProps<"div"> {}
+
+const data = [
+  { name: "Happy customers", value: "45+" },
+  { name: "Hours spent on craft", value: "5k+" },
+  { name: "Review rate", value: "4.8" },
+]
+
+export const Statistics = ({ ...props }: Props) => {
+  return <div {...props}>Statistics</div>
+}

app/home2.0/brand-and-statistics/brands.data.ts

@@ -0,0 +1,33 @@
+import abstact from "@/assets/companies/abstact.svg"
+import intercom from "@/assets/companies/intercom.svg"
+import loom from "@/assets/companies/loom.svg"
+
+export const brandsData = [
+  {
+    name: "loom",
+    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    img: loom,
+    author: {
+      name: "Henry Arthur",
+      positions: "Head of Engineering, Loom",
+    },
+  },
+  {
+    name: "intercom",
+    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    img: intercom,
+    author: {
+      name: "Jerome Bell",
+      positions: "Product Analyst, Intercom",
+    },
+  },
+  {
+    name: "abstact",
+    desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    img: abstact,
+    author: {
+      name: "Eleanor Pena",
+      positions: "Head of Product Design, Abstract",
+    },
+  },
+]

app/home2.0/brand-and-statistics/index.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import { BrandsList } from "./BrandsList"
+import { Statistics } from "./Statistics"
+
+interface Props extends React.ComponentProps<"div"> {}
+
+export const BrandAndStatistics = ({ ...props }: Props) => {
+  return (
+    <div {...props}>
+      <BrandsList />
+      <Statistics />
+    </div>
+  )
+}

app/home2.0/index.ts

@@ -2,3 +2,4 @@ export * from "./details-about"
 export * from "./word-explanation"
 export * from "./CompanyListMarquees"
 export * from "./Hero"
+export * from "./brand-and-statistics"

app/page.tsx

@@ -1,8 +1,11 @@
-"use client"
+"use client";
+
+import { SiteNave } from "@/components/SiteNav";
+
 
-import { SiteNave } from "@/components/SiteNav"
 
 import {
+  BrandAndStatistics,
   CompanyListMarquees,
   Hero,
   Introducing,
@@ -19,7 +22,8 @@ export default function IndexPage() {
         <CompanyListMarquees />
         <Introducing />
         <WordExplanation />
+        <BrandAndStatistics />
       </div>
     </>
   )
-}
+}