Featues page

This commit is contained in:
CHIEFSOFT\ameye
2025-01-28 11:22:28 -05:00
parent 48a573dc50
commit e3669ad48d
3 changed files with 238 additions and 220 deletions
@@ -0,0 +1,76 @@
export default function MermsFeatureSection4 (){
return (
<>
<section className="pt-100 ct-04 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* CONTENT BOX #1 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">1</div>
<span className="cbox-2-line" />
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">Simple, Secure &amp; Intuitive</h5>
<p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
quaerat
</p>
</div>
</div> {/* END CONTENT BOX #1 */}
{/* CONTENT BOX #2 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">2</div>
<span className="cbox-2-line" />
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">Weekly Email Reports</h5>
<p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
quaerat
</p>
</div>
</div> {/* END CONTENT BOX #2 */}
{/* CONTENT BOX #3 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">3</div>
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">No Personal Data Collected</h5>
<p className="mb-0">Ligula risus auctor tempus feugiat dolor lacinia nemo purus in
lipsum purus sapien quaerat a primis viverra tellus vitae luctus dolor ipsum n
eque ligula quaerat
</p>
</div>
</div> {/* END CONTENT BOX #3 */}
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block wow fadeInLeft">
<img className="img-fluid" src="/images/tablet-01.png" alt="content-image" />
</div>
</div>
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
</>
)
}
@@ -0,0 +1,76 @@
export default function MermsFeaturesSection1(){
return (
<>
<section id="features-2" className="pt-100 features-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row justify-content-center">
<div className="col-md-10 col-lg-9">
<div className="section-title mb-80">
{/* Title */}
<h2 className="s-50 w-700">Everything in One Place</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* FEATURES-2 WRAPPER */}
<div className="fbox-wrapper text-center">
<div className="row row-cols-1 row-cols-md-3">
{/* FEATURE BOX #1 */}
<div className="col">
<div className="fbox-2 fb-1 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_01.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_01_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Intuitive Dashboard</h6>
<p>Luctus egestas augue undo ultrice aliquam in lacus congue dapibus</p>
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col">
<div className="fbox-2 fb-2 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_05.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_05_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Effortless Integration</h6>
<p>Tempor laoreet augue undo ultrice aliquam in lacusq luctus feugiat</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
{/* FEATURE BOX #3 */}
<div className="col">
<div className="fbox-2 fb-3 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_02.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_02_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Real-time Analytics</h6>
<p>Egestas luctus augue undo ultrice aliquam in lacus feugiat cursus</p>
</div>
</div>
</div> {/* END FEATURE BOX #3 */}
</div> {/* End row */}
</div> {/* END FEATURES-2 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-2 */}
<hr className="divider" />
</>
)
}
+86 -220
View File
@@ -4,52 +4,115 @@ import Layout from "../components/layout/Layout"
import Link from "next/link" import Link from "next/link"
import MermsAboutFeautures from "../components/sections/MermsAboutFeautures"; import MermsAboutFeautures from "../components/sections/MermsAboutFeautures";
import MermsBanner from "../components/sections/MermsBanner"; import MermsBanner from "../components/sections/MermsBanner";
import MermsFeatureSection4 from "../components/sections/MermsFeatureSection4";
import MermsFeaturesSection1 from "../components/sections/MermsFeaturesSection1";
export default function Home() { export default function Home() {
return ( return (
<> <>
<Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header"> <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
<div> <div>
<section className="ct-01 inner-page-hero content-section division"> <section className="pt-100 ct-02 content-section division">
<div className="container"> <div className="container">
{/* SECTION CONTENT (ROW) */} {/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center"> <div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-6">
<div className="img-block left-column wow fadeInRight">
<img className="img-fluid" src="/images/img-08.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */} {/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2"> <div className="col-md-6">
<div className="txt-block left-column wow fadeInRight"> <div className="txt-block right-column wow fadeInLeft">
{/* Section ID */} {/* Section ID */}
<span className="section-id">Productivity Focused</span> <span className="section-id">Strategies That Work</span>
{/* Title */} {/* Title */}
<h2 className="s-46 w-700">Achieve more with better workflows</h2> <h2 className="s-46 w-700">Right strategies &amp; implementations</h2>
{/* Text */} {/* Text */}
<p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis <p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis
vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit
</p> </p>
{/* List */} {/* Small Title */}
<ul className="simple-list"> <h5 className="s-24 w-700">Get more done in less time</h5>
<li className="list-item"> {/* CONTENT BOX #1 */}
<p>Tempor sapien quaerat an ipsum laoreet purus and sapien dolor an ultrice <div className="cbox-1 ico-15">
ipsum aliquam undo congue dolor cursus <div className="ico-wrap color--theme">
<div className="cbox-1-ico"><span className="flaticon-check" /></div>
</div>
<div className="cbox-1-txt">
<p>Magna dolor luctus at egestas sapien</p>
</div>
</div>
{/* CONTENT BOX #2 */}
<div className="cbox-1 ico-15">
<div className="ico-wrap color--theme">
<div className="cbox-1-ico"><span className="flaticon-check" /></div>
</div>
<div className="cbox-1-txt">
<p>Cursus purus suscipit vitae cubilia magnis volute egestas vitae sapien
turpis ultrice auctor congue varius magnis
</p> </p>
</li> </div>
<li className="list-item"> </div>
<p className="mb-0">Cursus purus suscipit vitae cubilia magnis volute egestas vitae {/* CONTENT BOX #3 */}
sapien turpis ultrice auctor congue placerat <div className="cbox-1 ico-15">
</p> <div className="ico-wrap color--theme">
</li> <div className="cbox-1-ico"><span className="flaticon-check" /></div>
</ul> </div>
<div className="cbox-1-txt">
<p className="mb-0">Volute turpis dolores and sagittis congue</p>
</div>
</div>
</div> </div>
</div> {/* END TEXT BLOCK */} </div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block right-column wow fadeInLeft">
<img className="img-fluid" src="/images/img-06.png" alt="content-image" />
</div>
</div>
</div> {/* END SECTION CONTENT (ROW) */} </div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */} </div> {/* End container */}
</section> {/* END TEXT CONTENT */} </section> {/* END TEXT CONTENT */}
<MermsFeaturesSection1 />
<MermsFeatureSection4 />
{/*<section className="ct-01 inner-page-hero content-section division">*/}
{/* <div className="container">*/}
{/* /!* SECTION CONTENT (ROW) *!/*/}
{/* <div className="row d-flex align-items-center">*/}
{/* /!* TEXT BLOCK *!/*/}
{/* <div className="col-md-6 order-last order-md-2">*/}
{/* <div className="txt-block left-column wow fadeInRight">*/}
{/* /!* Section ID *!/*/}
{/* <span className="section-id">Productivity Focused</span>*/}
{/* /!* Title *!/*/}
{/* <h2 className="s-46 w-700">Achieve more with better workflows</h2>*/}
{/* /!* Text *!/*/}
{/* <p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis*/}
{/* vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit*/}
{/* </p>*/}
{/* /!* List *!/*/}
{/* <ul className="simple-list">*/}
{/* <li className="list-item">*/}
{/* <p>Tempor sapien quaerat an ipsum laoreet purus and sapien dolor an ultrice*/}
{/* ipsum aliquam undo congue dolor cursus*/}
{/* </p>*/}
{/* </li>*/}
{/* <li className="list-item">*/}
{/* <p className="mb-0">Cursus purus suscipit vitae cubilia magnis volute egestas vitae*/}
{/* sapien turpis ultrice auctor congue placerat*/}
{/* </p>*/}
{/* </li>*/}
{/* </ul>*/}
{/* </div>*/}
{/* </div> /!* END TEXT BLOCK *!/*/}
{/* /!* IMAGE BLOCK *!/*/}
{/* <div className="col-md-6 order-first order-md-2">*/}
{/* <div className="img-block right-column wow fadeInLeft">*/}
{/* <img className="img-fluid" src="/images/img-06.png" alt="content-image" />*/}
{/* </div>*/}
{/* </div>*/}
{/* </div> /!* END SECTION CONTENT (ROW) *!/*/}
{/* </div> /!* End container *!/*/}
{/*</section> /!* END TEXT CONTENT *!/*/}
<MermsAboutFeautures /> <MermsAboutFeautures />
<section className="pt-100 ws-wrapper content-section"> <section className="pt-100 ws-wrapper content-section">
@@ -260,207 +323,10 @@ export default function Home() {
</div> {/* End row */} </div> {/* End row */}
</div> {/* End container */} </div> {/* End container */}
</section> {/* END FEATURES-12 */} </section> {/* END FEATURES-12 */}
{/* FEATURES-2
============================================= */}
<section id="features-2" className="pt-100 features-section division">
<div className="container">
{/* SECTION TITLE */}
<div className="row justify-content-center">
<div className="col-md-10 col-lg-9">
<div className="section-title mb-80">
{/* Title */}
<h2 className="s-50 w-700">Everything in One Place</h2>
{/* Text */}
<p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
</div>
</div>
</div>
{/* FEATURES-2 WRAPPER */}
<div className="fbox-wrapper text-center">
<div className="row row-cols-1 row-cols-md-3">
{/* FEATURE BOX #1 */}
<div className="col">
<div className="fbox-2 fb-1 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_01.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_01_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Intuitive Dashboard</h6>
<p>Luctus egestas augue undo ultrice aliquam in lacus congue dapibus</p>
</div>
</div>
</div> {/* END FEATURE BOX #1 */}
{/* FEATURE BOX #2 */}
<div className="col">
<div className="fbox-2 fb-2 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_05.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_05_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Effortless Integration</h6>
<p>Tempor laoreet augue undo ultrice aliquam in lacusq luctus feugiat</p>
</div>
</div>
</div> {/* END FEATURE BOX #2 */}
{/* FEATURE BOX #3 */}
<div className="col">
<div className="fbox-2 fb-3 wow fadeInUp">
{/* Image */}
<div className="fbox-img gr--whitesmoke h-175">
<img className="img-fluid light-theme-img" src="/images/f_02.png" alt="feature-image" />
<img className="img-fluid dark-theme-img" src="/images/f_02_dark.png" alt="feature-image" />
</div>
{/* Text */}
<div className="fbox-txt">
<h6 className="s-22 w-700">Real-time Analytics</h6>
<p>Egestas luctus augue undo ultrice aliquam in lacus feugiat cursus</p>
</div>
</div>
</div> {/* END FEATURE BOX #3 */}
</div> {/* End row */}
</div> {/* END FEATURES-2 WRAPPER */}
</div> {/* End container */}
</section> {/* END FEATURES-2 */}
<hr className="divider" /> <hr className="divider" />
<section className="pt-100 ct-04 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center">
{/* TEXT BLOCK */}
<div className="col-md-6 order-last order-md-2">
<div className="txt-block left-column wow fadeInRight">
{/* CONTENT BOX #1 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">1</div>
<span className="cbox-2-line" />
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">Simple, Secure &amp; Intuitive</h5>
<p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
quaerat
</p>
</div>
</div> {/* END CONTENT BOX #1 */}
{/* CONTENT BOX #2 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">2</div>
<span className="cbox-2-line" />
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">Weekly Email Reports</h5>
<p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
quaerat
</p>
</div>
</div> {/* END CONTENT BOX #2 */}
{/* CONTENT BOX #3 */}
<div className="cbox-2 process-step">
{/* Icon */}
<div className="ico-wrap">
<div className="cbox-2-ico bg--theme color--white">3</div>
</div>
{/* Text */}
<div className="cbox-2-txt">
<h5 className="s-22 w-700">No Personal Data Collected</h5>
<p className="mb-0">Ligula risus auctor tempus feugiat dolor lacinia nemo purus in
lipsum purus sapien quaerat a primis viverra tellus vitae luctus dolor ipsum n
eque ligula quaerat
</p>
</div>
</div> {/* END CONTENT BOX #3 */}
</div>
</div> {/* END TEXT BLOCK */}
{/* IMAGE BLOCK */}
<div className="col-md-6 order-first order-md-2">
<div className="img-block wow fadeInLeft">
<img className="img-fluid" src="/images/tablet-01.png" alt="content-image" />
</div>
</div>
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
{/* TEXT CONTENT
============================================= */}
<section className="pt-100 ct-02 content-section division">
<div className="container">
{/* SECTION CONTENT (ROW) */}
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-6">
<div className="img-block left-column wow fadeInRight">
<img className="img-fluid" src="/images/img-08.png" alt="content-image" />
</div>
</div>
{/* TEXT BLOCK */}
<div className="col-md-6">
<div className="txt-block right-column wow fadeInLeft">
{/* Section ID */}
<span className="section-id">Strategies That Work</span>
{/* Title */}
<h2 className="s-46 w-700">Right strategies &amp; implementations</h2>
{/* Text */}
<p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis
vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit
</p>
{/* Small Title */}
<h5 className="s-24 w-700">Get more done in less time</h5>
{/* CONTENT BOX #1 */}
<div className="cbox-1 ico-15">
<div className="ico-wrap color--theme">
<div className="cbox-1-ico"><span className="flaticon-check" /></div>
</div>
<div className="cbox-1-txt">
<p>Magna dolor luctus at egestas sapien</p>
</div>
</div>
{/* CONTENT BOX #2 */}
<div className="cbox-1 ico-15">
<div className="ico-wrap color--theme">
<div className="cbox-1-ico"><span className="flaticon-check" /></div>
</div>
<div className="cbox-1-txt">
<p>Cursus purus suscipit vitae cubilia magnis volute egestas vitae sapien
turpis ultrice auctor congue varius magnis
</p>
</div>
</div>
{/* CONTENT BOX #3 */}
<div className="cbox-1 ico-15">
<div className="ico-wrap color--theme">
<div className="cbox-1-ico"><span className="flaticon-check" /></div>
</div>
<div className="cbox-1-txt">
<p className="mb-0">Volute turpis dolores and sagittis congue</p>
</div>
</div>
</div>
</div> {/* END TEXT BLOCK */}
</div> {/* END SECTION CONTENT (ROW) */}
</div> {/* End container */}
</section> {/* END TEXT CONTENT */}
<MermsBanner /> <MermsBanner />
</div> </div>
</Layout> </Layout>
</> </>
) )