fix responsive all pages & change style page list blog and blog item & add date picker

app/component/AnimationTextHead.js

@@ -1,10 +1,10 @@
 function AnimationTextHead({ name, text, children }) {
     return (
         <div className='flex justify-center items-start relative w-fit'>
-            <div className='overflow-hidden mb-1.5'>
+            <div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'>
                 <p
                     data-aos={name}
-                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[20px] font-bold'>{text}</p>
+                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold'>{text}</p>
             </div>
             <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
                 {children}

app/component/comment/ItemUser.js

@@ -55,7 +55,7 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
                         <Skeleton variant="text" className="!w-1/3" />
                     </>
                 ) : (
-                    <p className="text-[#495057] text-[14px] font-normal leading-[30px]">{data.comment}</p>
+                    <p className="text-[#495057] text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
                 )}
                 <div className="flex items-center justify-start mt-2 gap-[28px]">
                     <div className="flex items-center justify-start gap-1">

app/component/datePicker/ButtonDate.js

@@ -0,0 +1,16 @@
+import { Button as ButtonMUI } from '@mui/material'
+import React from 'react'
+
+function ButtonDate({ handleClick, id, text }) {
+    return (
+        <ButtonMUI
+            onClick={handleClick}
+            aria-describedby={id}
+            className="!border-[#E9ECEF] !text-[#6C757D]"
+        >
+            {text}
+        </ButtonMUI>
+    )
+}
+
+export default ButtonDate

app/component/datePicker/Field.js

@@ -0,0 +1,32 @@
+import { TextField } from "@mui/material"
+
+function Field({ title, handleClick }) {
+    return (
+        <div className="relative">
+            <TextField
+                label={title}
+                className="!w-full !mx-auto !bg-[#FFF]"
+                sx={{
+                    borderRadius: '8px !important',
+                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
+                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #0FA1B3 !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <span
+                className="absolute cursor-pointer left-0 top-0 w-full h-full"
+                onClick={handleClick}
+            ></span>
+        </div>
+    )
+}
+
+export default Field

app/component/datePicker/index.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Popover } from '@mui/material';
+import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import Field from './Field';
+import ButtonDate from './ButtonDate';
+
+function DatePicker({ type, date, updateDate, text, from }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => setAnchorEl(null);
+
+    const open = true;
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <div className='min-w-[700px] min-h-[700px]'>
+            {/* {from && from === 'register' ? (
+                <Field
+                    title={text}
+                    handleClick={handleClick}
+                />
+            ) : (
+                <ButtonDate
+                    text={text}
+                    handleClick={handleClick}
+                />
+            )} */}
+            <DatePickerJalali
+                    onChange={(e) => {
+                        if (e._d) {
+                            updateDate(e._d, type)
+                        }
+                        handleClose()
+                    }}
+                />
+        </div>
+    )
+}
+
+export default DatePicker

app/globals.css

@@ -171,7 +171,8 @@ html {
     background: url(../public/assets/images/banner-about.png);
 }
 
-.bg-banner-home::after {
+.bg-banner-home::after,
+.bg-banner-stroke::after {
     content: "";
     position: absolute;
     right: 0;
@@ -215,9 +216,7 @@ html {
 .cover-head-blogs p {
     position: absolute;
     bottom: 32px;
-    right: 24px;
     color: #FAFAFA;
-    font-size: 24px;
     font-weight: 700;
 }
 
@@ -299,4 +298,91 @@ html {
         padding-left: 108px;
         padding-right: 108px;
     }
-}
+}
+
+
+
+/* Date Picker Style */
+
+.panel-elevation {
+    box-shadow: none !important;
+    border: none;
+    outline: none;
+}
+
+.icon-keyboard_double_arrow_right,
+.icon-keyboard_double_arrow_left {
+    display: none !important;
+}
+
+.icon-chevron-right::before,
+.icon-chevron-left::before {
+    content: "" !important;
+    background: url(../public/assets/icons/arrow-right.svg);
+    width: 24px;
+    height: 24px;
+}
+
+.icon-chevron-left::before {
+    rotate: 180deg;
+}
+
+.panel-date-holder-item span {
+    /* font-family: Iran Sans !important; */
+    font-size: 18px !important;
+    font-weight: 500 !important;
+}
+
+.panel-date-holder-item span:hover {
+    color: #FF8848 !important;
+}
+
+.year-item-selected,
+.month-item-selected {
+    background: #FF8848 !important;
+    border-radius: 3px !important;
+}
+
+.panel-header-rtl {
+    border-bottom: none !important;
+}
+
+.day-label-bar-inner-rtl {
+    background: #FFF !important;
+}
+
+.day-label-bar-inner-rtl div {
+    color: #6C757D !important;
+}
+
+.panel-jalaali .days-body .not-current {
+    display: none !important;
+}
+
+.panel-jalaali .days-body .day.hovered span {
+    color: #343A40 !important;
+}
+
+.panel-jalaali .days-body .day.weekend-day span {
+    color: #B71232 !important;
+}
+
+.panel-jalaali .today,
+.panel-jalaali .highlight {
+    border-radius: 50% !important;
+}
+
+.panel-jalaali .today {
+    border: 1px solid #FF8848 !important;
+}
+
+.panel-jalaali .highlight {
+    background: #ff975d !important;
+}
+
+.panel-jalaali .panel-footer-wrapper,
+.panel-jalaali .panel-footer-rtl {
+    display: none !important;
+}
+
+/* End Date Picker Style */

app/layout.js

@@ -1,5 +1,6 @@
 import "./globals.css";
 import ThemeRegistry from './component/ThemeRegistry';
+import "jalaali-react-date-picker/lib/styles/index.css";
 
 export const metadata = {
   title: "Create Next App",