review edit

src/pages/ReviewPage/ReviewCards.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import './ReviewPage.css'
+function ReviewCards({ desc,rate }) {
+  return (
+    <section class="t-bq-section" id="paul">
+    <div class="t-bq-wrapper t-bq-wrapper-boxed">
+        <div class="t-bq-quote t-bq-quote-paul">
+            <div class="t-bq-quote-paul-userpic"></div>
+            <div class="t-bq-quote-paul-qmark">
+                &#10077;
+            </div>
+            <div class="t-bq-quote-paul-pattern">
+            </div>
+            <div class="t-bq-quote-paul-base">
+                <blockquote class="t-bq-quote-paul-text" cite="Strugatsky Brothers">
+                {desc}
+                </blockquote>
+                <div class="t-bq-quote-paul-meta">
+                    <div class="t-bq-quote-paul-meta-info">
+                        <div class="t-bq-quote-paul-author"><cite>Strugatsky Brothers</cite></div>
+                        <div class="t-bq-quote-paul-source"><span>Rating {rate}</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+  )
+}
+
+export default ReviewCards

src/pages/ReviewPage/ReviewPage.css

@@ -31,8 +31,9 @@ section.t-bq-section {
 
 .t-bq-quote-paul .t-bq-quote-paul-pattern {
     flex-basis: 80px;
-    background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png") repeat;
+    /* background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png") repeat; */
     border-radius: 10px 0 0 10px;
+    background: linear-gradient(180deg,rgba(9,76,131,.75),#21b8cb),#efffec;
 }
 
 .t-bq-quote-paul .t-bq-quote-paul-base {
@@ -63,7 +64,7 @@ section.t-bq-section {
     left: 45px;
     width: 70px;
     height: 70px;
-    background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
+    /* background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat; */
     background-size: cover;
     border-radius: 50%;
 }

src/pages/ReviewPage/ReviewPage.js

@@ -1,44 +1,31 @@
-import React, { useEffect } from 'react'
+import React, { useEffect,useState } from 'react'
 import Mainlayout from '../../components/Mainlayout/Mainlayout'
 import './ReviewPage.css'
 import axios from 'axios'
 import baseUrl from '../../utils/Urls'
-import {useEffect,useState} from 'react'
+import ReviewCards from './ReviewCards'
 function ReviewPage() {
-
+const[reviews,setReviews]=useState([])
 
 useEffect(()=>{
   axios.get(`${baseUrl}/reviews/`).then((response)=>{
-
+    setReviews(response.data)
   })
-})
+},[])
 
   return (
     <Mainlayout>
-    <section class="t-bq-section" id="paul">
-    <div class="t-bq-wrapper t-bq-wrapper-boxed">
-        <div class="t-bq-quote t-bq-quote-paul">
-            <div class="t-bq-quote-paul-userpic"></div>
-            <div class="t-bq-quote-paul-qmark">
-                &#10077;
-            </div>
-            <div class="t-bq-quote-paul-pattern">
-            </div>
-            <div class="t-bq-quote-paul-base">
-                <blockquote class="t-bq-quote-paul-text" cite="Strugatsky Brothers">
-Psychologically, almost all of them were slaves - slaves of faith, slaves of their own kind, slaves of passions, slaves of greed. And if, by the will of fate, one of them was born or became a master, he did not know what to do with his freedom. He again hurried to become a slave - a slave of wealth, unnatural excesses, a slave of dissolute friends, a slave of his slaves. 
-                </blockquote>
-                <div class="t-bq-quote-paul-meta">
-                    <div class="t-bq-quote-paul-meta-info">
-                        <div class="t-bq-quote-paul-author"><cite>Strugatsky Brothers</cite></div>
-                        <div class="t-bq-quote-paul-source"><span>Hard to Be a God</span></div>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <div className='review__container'>
+     {
+        reviews.map((item)=>{
+          return(
+              <ReviewCards key={item.id} desc={item.desc} rate={item.rate}/>
+          )
+        })
+     }
     </div>
-</section>
-    </Mainlayout>
+
+        </Mainlayout>
   )
 }