first commit
This commit is contained in:
mukesh13
299
components/shop/ShopDescription.jsx
Normal file
299
components/shop/ShopDescription.jsx
Normal file
@ -0,0 +1,299 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import CommentBox from "./CommentBox";
|
||||
import { useState } from "react";
|
||||
export default function ShopDescription() {
|
||||
const [activeTab, setActiveTab] = useState(1);
|
||||
return (
|
||||
<div className="tf-container">
|
||||
<div className="widget-tabs style-1">
|
||||
<ul className="widget-menu-tab overflow-x-auto">
|
||||
<li
|
||||
className={`item-title h5 ${activeTab == 1 ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(1)}
|
||||
>
|
||||
<span className="text-whitespace">Description</span>
|
||||
</li>
|
||||
<li
|
||||
className={`item-title h5 ${activeTab == 2 ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(2)}
|
||||
>
|
||||
<span className="text-whitespace">Reviews (3)</span>
|
||||
</li>
|
||||
<li
|
||||
className={`item-title h5 ${activeTab == 3 ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(3)}
|
||||
>
|
||||
<span className="text-whitespace">Additinal Information</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="widget-content-tab">
|
||||
<div
|
||||
className={`widget-content-inner ${
|
||||
activeTab == 1 ? "active" : ""
|
||||
} `}
|
||||
>
|
||||
<div className="tab-description d-grid gap_29">
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
The 24-inch iMac M3 2023 has an impressively slim design.
|
||||
Despite being slim, the iMac is also equipped with a diverse
|
||||
connection port system such as Thunderbolt. In terms of color,
|
||||
the 24-inch iMac M3 2023 impresses with seven different color
|
||||
versions for users to choose from: Blue, Green, Pink, Silver,
|
||||
Yellow, Orange and Purple.
|
||||
</p>
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
The iMac M3 2023 is equipped with a 24-inch screen with thin
|
||||
screen borders for a wide display space. The screen is equipped
|
||||
with an impressive high resolution of upto 4.5K and a brightness
|
||||
of 500 nits for super sharp display. The device screen is also
|
||||
equipped with a wide color gamut P3, so the details displayed on
|
||||
the screen are extremely vivid
|
||||
</p>
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
The 24-inch iMac M3 2023 is equipped with the best camera system
|
||||
compared to previous generations of iMac introduced by Apple.
|
||||
Along with that is an integrated image processor, a processor
|
||||
with the ability to analyze and improve pixels at 1 trillion
|
||||
calculations per second. Thanks to that, the 24-inch iMac M3
|
||||
2023 brings impressive video recording capabilities. In addition
|
||||
to the sharp camera, the 24-inch iMac M3 2023 is also equipped
|
||||
with a microphone that supports effective sound recording.
|
||||
Thanks to that, users can record podcasts or livestreams without
|
||||
the need for supporting equipment. In particular, the microphone
|
||||
on the device is also designed with echo reduction and
|
||||
beamforming technology to effectively reduce ambient noise
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`widget-content-inner ${
|
||||
activeTab == 2 ? "active" : ""
|
||||
} `}
|
||||
>
|
||||
<div className="tab-reviews write-cancel-review-wrap">
|
||||
<div className="tab-reviews-heading">
|
||||
<div className="top">
|
||||
<div className="text-center">
|
||||
<div className="number text-display">4.9</div>
|
||||
<div className="ratings justify-content-center">
|
||||
<i className="icon icon-star-solid" />
|
||||
<i className="icon icon-star-solid" />
|
||||
<i className="icon icon-star-solid" />
|
||||
<i className="icon icon-star-solid" />
|
||||
<i className="icon icon-star-solid" />
|
||||
</div>
|
||||
<p className="text_mono-gray-8">(168 Ratings)</p>
|
||||
</div>
|
||||
<div className="rating-score">
|
||||
<div className="item">
|
||||
<div className="number-1 text-body-2 text_mono-gray">
|
||||
5
|
||||
</div>
|
||||
<i className="icon icon-star-solid" />
|
||||
<div className="line-bg">
|
||||
<div style={{ width: "94.67%" }} />
|
||||
</div>
|
||||
<div className="number-2 text-body-2 text_mono-gray">
|
||||
59
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="number-1 text-body-2 text_mono-gray">
|
||||
4
|
||||
</div>
|
||||
<i className="icon icon-star-solid" />
|
||||
<div className="line-bg">
|
||||
<div style={{ width: "60%" }} />
|
||||
</div>
|
||||
<div className="number-2 text-body-2 text_mono-gray">
|
||||
46
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="number-1 text-body-2 text_mono-gray">
|
||||
3
|
||||
</div>
|
||||
<i className="icon icon-star-solid" />
|
||||
<div className="line-bg">
|
||||
<div style={{ width: "0%" }} />
|
||||
</div>
|
||||
<div className="number-2 text-body-2 text_mono-gray">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="number-1 text-body-2 text_mono-gray">
|
||||
2
|
||||
</div>
|
||||
<i className="icon icon-star-solid" />
|
||||
<div className="line-bg">
|
||||
<div style={{ width: "0%" }} />
|
||||
</div>
|
||||
<div className="number-2 text-body-2 text_mono-gray">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="number-1 text-body-2 text_mono-gray">
|
||||
1
|
||||
</div>
|
||||
<i className="icon icon-star-solid" />
|
||||
<div className="line-bg">
|
||||
<div style={{ width: "0%" }} />
|
||||
</div>
|
||||
<div className="number-2 text-body-2 text_mono-gray">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="reply-comment style-2">
|
||||
<div className="reply-comment-heading mb_82">
|
||||
<h2>3 Comments</h2>
|
||||
</div>
|
||||
<div className="wrap-comment">
|
||||
<div className="reply-comment-wrap">
|
||||
<div className="reply-comment-item">
|
||||
<div className="heading mb_15">
|
||||
<div className="box-user">
|
||||
<div className="avatar">
|
||||
<Image
|
||||
alt="avatar"
|
||||
src="/images/avatar/avatar-2.jpg"
|
||||
width={119}
|
||||
height={119}
|
||||
/>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Kobbie Dao</h5>
|
||||
<p className="text-body-1 text_mono-gray-5">
|
||||
September 30, 2023 / 9:30 AM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="tf-btn btn-primary2">
|
||||
<span>Reply</span>
|
||||
<span className="bg-effect" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="comment text-body-1 text_black">
|
||||
As a web designer myself, I couldn't agree more with the
|
||||
sentiment that great design should be felt and
|
||||
remembered long after the screen is turned off.
|
||||
</div>
|
||||
</div>
|
||||
<div className="reply-comment-item type-reply">
|
||||
<div className="heading mb_35">
|
||||
<div className="box-user">
|
||||
<div className="avatar">
|
||||
<Image
|
||||
alt="avatar"
|
||||
src="/images/avatar/avatar-3.jpg"
|
||||
width={119}
|
||||
height={119}
|
||||
/>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="text_black">Zalatan</h5>
|
||||
<p className="text-body-1 text_mono-gray-5">
|
||||
September 30, 2023 / 9:30 AM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="tf-btn btn-primary2">
|
||||
<span>Reply</span>
|
||||
<span className="bg-effect" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="comment text-body-1 text_black">
|
||||
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
|
||||
dignissim fermentum malesuada auctor volutpat,
|
||||
vestibulum ipsum nulla.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="reply-comment-wrap">
|
||||
<div className="reply-comment-item">
|
||||
<div className="heading mb_15">
|
||||
<div className="box-user">
|
||||
<div className="avatar">
|
||||
<Image
|
||||
alt="avatar"
|
||||
src="/images/avatar/avatar-4.jpg"
|
||||
width={119}
|
||||
height={119}
|
||||
/>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="text_black">Bellingham</h5>
|
||||
<p className="text-body-1 text_mono-gray-5">
|
||||
September 30, 2023 / 9:30 AM
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="tf-btn btn-primary2">
|
||||
<span>Reply</span>
|
||||
<span className="bg-effect" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="comment text-body-1 text_black">
|
||||
Aute mi ut suspendisse velit leo, vel risus ac. Amet dui
|
||||
dignissim fermentum malesuada auctor volutpat,
|
||||
vestibulum ipsum nulla.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="leave-comment">
|
||||
<div className="heading-title mb_56">
|
||||
<h2 className="mb_18">Leave a Reply</h2>
|
||||
<p className="text-body-1 text_mono-gray letter-spacing-1">
|
||||
Your email address will not be published. Require field
|
||||
are marked <span>*</span>
|
||||
</p>
|
||||
</div>
|
||||
<CommentBox />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`widget-content-inner ${
|
||||
activeTab == 3 ? "active" : ""
|
||||
} `}
|
||||
>
|
||||
<div className="tab-description d-grid gap_12">
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
With the 2024 version, the Macbook Air is upgraded to a
|
||||
15.3-inch screen with Liquid Retina resolution (2880 x 1864)
|
||||
that reproduces detailed image quality, millions of pixels and a
|
||||
wide spectrum P3 color range of up to 1 billion colors. Allows
|
||||
you to perfectly perform graphic design tasks with strict color
|
||||
requirements.
|
||||
</p>
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
500 nits brightness with True Tone Technology regulates vision
|
||||
and vision extremely well, quickly adapting to ambient light
|
||||
conditions to display the sharpest content from text to video.
|
||||
</p>
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
MacBook Air 15 inch M3 2024 8-core CPU - Screen
|
||||
</p>
|
||||
<p className="text-body-1 text_mono-gray-8">
|
||||
Multi-dimensional surround sound system Dolby Atmos, Spatial
|
||||
Audio combined with a high-quality linear speaker system brings
|
||||
a complete and realistic entertainment experience with vivid
|
||||
sound quality, clear bass, and sound amplification. Loud allows
|
||||
you to immerse yourself in melodious music or vivid movies,
|
||||
detailed sound is also extremely beneficial when participating
|
||||
in video post-production editing and sound effects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user