| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { useState } from "@wordpress/element"; |
| 3 |
import { FeatureListIcon } from "../../../icons/icons"; |
| 4 |
|
| 5 |
const WelcomePage = () => { |
| 6 |
const [showVideo, setShowVideo] = useState(false); |
| 7 |
const featureLists = [ |
| 8 |
{ |
| 9 |
title: __("160+ Ready Patterns Library", "post-carousel"), |
| 10 |
}, |
| 11 |
{ |
| 12 |
title: __("60+ Advanced Post & Builder Blocks", "post-carousel"), |
| 13 |
}, |
| 14 |
{ |
| 15 |
title: __("Seamless Drag & Drop Editing", "post-carousel"), |
| 16 |
}, |
| 17 |
{ |
| 18 |
title: __("Frontend Filter & Pagination", "post-carousel"), |
| 19 |
}, |
| 20 |
{ |
| 21 |
title: __("Advanced Query Builder", "post-carousel"), |
| 22 |
}, |
| 23 |
|
| 24 |
// second column. |
| 25 |
|
| 26 |
{ |
| 27 |
title: __("Customize Everything with Ease", "post-carousel"), |
| 28 |
}, |
| 29 |
{ |
| 30 |
title: __("Global Settings Control", "post-carousel"), |
| 31 |
}, |
| 32 |
{ |
| 33 |
title: __("Smart Modules & Functionalities", "post-carousel"), |
| 34 |
}, |
| 35 |
]; |
| 36 |
|
| 37 |
function getGreeting() { |
| 38 |
const hour = new Date().getHours(); |
| 39 |
if (hour >= 5 && hour < 12) { |
| 40 |
return __("Good morning", "post-carousel"); |
| 41 |
} |
| 42 |
if (hour >= 12 && hour < 17) { |
| 43 |
return __("Good afternoon", "post-carousel"); |
| 44 |
} |
| 45 |
if (hour >= 17 && hour < 21) { |
| 46 |
return __("Good evening", "post-carousel"); |
| 47 |
} |
| 48 |
return __("Good night", "post-carousel"); |
| 49 |
} |
| 50 |
|
| 51 |
return ( |
| 52 |
<div className="sp-smart-post-setup-welcome-page"> |
| 53 |
<div className="sp-smart-post-setup-welcome-page-left"> |
| 54 |
<span className="sp-smart-post-setup-page-subtitle">{getGreeting()}, {sp_pcp_block_settings?.userName || ""}</span> |
| 55 |
<h3 className="sp-smart-post-setup-page-title">Welcome to <span className="sp-smart-post-setup-page-title-highlight">Smart Post!</span></h3> |
| 56 |
<p className="sp-smart-post-setup-page-desc"> |
| 57 |
Thanks for installing Smart Post — your all-in-one solution for creating, organizing, and publishing |
| 58 |
content more efficiently inside WordPress. |
| 59 |
</p> |
| 60 |
<p className="sp-smart-post-setup-page-desc"> |
| 61 |
Smart Post is an Advanced Gutenberg Blocks Library plugin with <strong>60+ ready-to-use post and smart blocks</strong> to |
| 62 |
showcase your content beautifully. Create stunning layouts like post grid, list, slider, thumbnail |
| 63 |
slider, carousel and additional page builder blocks—all with just a few clicks. |
| 64 |
</p> |
| 65 |
<div className="sp-smart-post-setup-feature-lists"> |
| 66 |
{featureLists?.map(({ title }, index) => ( |
| 67 |
<div key={index} className="sp-smart-post-setup-feature-list"> |
| 68 |
<span className="sp-smart-post-setup-feature-list-icon"> |
| 69 |
<FeatureListIcon /> |
| 70 |
</span> |
| 71 |
<span className="sp-smart-post-setup-feature-title">{title}</span> |
| 72 |
{/* { index === featureLists.length - 1 && ( |
| 73 |
<span className="sp-smart-post-setup-feature-hot"> |
| 74 |
Upcoming |
| 75 |
</span> |
| 76 |
) } */} |
| 77 |
</div> |
| 78 |
))} |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
<div |
| 82 |
className="sp-smart-post-setup-welcome-page-right" |
| 83 |
style={{ |
| 84 |
backgroundImage: `url(${sp_pcp_block_settings?.wizardImages}thumbnail.png)`, |
| 85 |
}} |
| 86 |
> |
| 87 |
{showVideo ? ( |
| 88 |
<iframe |
| 89 |
width="510" |
| 90 |
height="410" |
| 91 |
src="https://www.youtube.com/embed/_WxI7oyxdPA?si=za939M1X32eBO_KX&autoplay=1&autoplay=1" |
| 92 |
title="YouTube video player" |
| 93 |
allow="autoplay; encrypted-media" |
| 94 |
></iframe> |
| 95 |
) : ( |
| 96 |
<div className="sp-smart-post-setup-video-overlay"> |
| 97 |
<button |
| 98 |
id="sp-smart-post-play-btn" |
| 99 |
className="sp-smart-post-play-btn-sonar" |
| 100 |
onClick={() => setShowVideo(true)} |
| 101 |
> |
| 102 |
<img src={`${sp_pcp_block_settings?.wizardImages}video-play-icon.svg`} alt="Smart Post" /> |
| 103 |
</button> |
| 104 |
</div> |
| 105 |
)} |
| 106 |
</div> |
| 107 |
</div> |
| 108 |
); |
| 109 |
}; |
| 110 |
|
| 111 |
export default WelcomePage; |
| 112 |
|
