Frontend: 2 Sections Implementation

pages/components/Footer.js

@@ -0,0 +1,8 @@
+
+export default function Footer() {
+    return (
+      <div className="">
+        Footer
+      </div>
+    )
+  }

pages/components/Header.js

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+export default function Header() {
+
+    const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    const toggleMobileMenu = () => {
+      setMobileMenuOpen(!isMobileMenuOpen);
+    };
+
+    return (
+      <header className={`sticky top-0 shadow-md bg-white z-10`}>
+        <nav className='flex items-center h-20 text-zinc-500 font-light'>
+          <div className='flex-1 text-center '>
+            <a href="#" className="flex items-center justify-center">
+              <img src="https://assets.setmore.com/website/next/images/common/setmore-logo.svg" alt="Setmore Logo" />
+            </a>
+          </div>
+
+          <div className='flex-1 text-center lg:hidden'>
+            <button onClick={toggleMobileMenu} className='text-zinc-600 font-normal'>
+              {isMobileMenuOpen ? 'Close' : 'Menu'}
+            </button>
+          </div>
+
+        {isMobileMenuOpen && (
+          <div className='lg:hidden absolute top-20 left-0 right-0 bg-white shadow-md'>
+            <ul className='flex flex-col items-center space-y-4'>
+              <li>Learn</li>
+              <li>Integrations</li>
+              <li>Features</li>
+              <li>Industries</li>
+              <li>Pricing</li>
+            </ul>
+          </div>
+        )}
+
+
+          <div className='flex-10 hidden lg:flex items-center justify-center'>
+            <ul className='flex flex-row space-x-6 '>
+              <li>Learn</li>
+              <li>Integrations</li>
+              <li>Features</li>
+              <li>Industries</li>
+              <li>Pricing</li>
+            </ul>
+          </div>
+
+
+          <div className='flex-1 text-center lg:flex hidden pl-36'>
+            <div className='flex items-center justify-center space-x-6'>
+              <div>
+                <a href="tel:+1-800-749-4920">+1 (800) 749-4920</a>
+              </div>
+              <div className='text-zinc-600 font-normal'>
+                Login
+              </div>
+              <div className='bg-setmore text-white py-2 px-6 text-sm rounded-lg'>
+                Start FREE
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+    )
+  }

pages/components/SectionA/Ratings.js

@@ -0,0 +1,13 @@
+import Stars from "./Stars";
+import TrustPilot from "./TrustPilot";
+
+
+export default function Ratings() {
+    return (
+      <div className="flex flex-row sm:items-center sm:justify-center lg:items-start lg:justify-normal text-md py-14 space-x-4 font-light">
+        <span>Excellent</span>
+        <Stars />
+        <TrustPilot />
+      </div>
+    )
+  }

pages/components/SectionA/SectionA.js

@@ -0,0 +1,58 @@
+import Ratings from "./Ratings";
+
+export default function SectionA() {
+    return (
+    <section className="flex flex-col sm:py-3 sm:px-12 md:py-10 md:px-24 sm:flex-row space-y-8 sm:space-y-0">
+
+      <div className="p-8 flex-grow-1/3">
+        <article className=""> 
+          <h1 className="text-5xl font-semibold py-7">
+              <span className="text-setmoreHeading font-setmoreHeading">Free scheduling software</span>
+              <span className="text-setmore">.</span>
+          </h1>
+          <p className="text-zinc-600 text-xl font-light">
+            Organize your business with 24/7 automated online booking, reminders, payments, and more.
+          </p>
+          <form className="pt-8 text-xl flex flex-col lg:flex-row lg:items-center">
+                <input
+                  type="email"
+                  placeholder="Your email"
+                  className="bg-white w-full lg:w-64 h-15 p-4 border rounded-md shadow-md mb-4 lg:mb-0 lg:mr-4"
+                />
+                <div className="bg-setmore text-white py-4 px-6 rounded-lg flex items-center my-4 justify-center">
+                  <span className="text-center">Start FREE</span>
+                </div>
+          </form>
+
+          <div className="flex flex-row text-md sm:items-center sm:justify-center lg:items-start lg:justify-normal text-neutral-400 font-light">
+              <span>Or sign up with</span>
+              <div className="flex flex-row py-0 mx-1 text-setmore px-2 rounded-full items-center justify-center" style={{backgroundColor: '#f5f8fa'}}>
+                {/* <i className=""> */}
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" width="20px" height="20px"/>
+                {/* </i> */}
+                <a>Google</a>
+              </div>
+              <span>or</span>
+              <div className="flex flex-row py-0 mx-1 text-setmore px-2 rounded-full items-center justify-center" style={{backgroundColor: '#f5f8fa'}}>
+                <i className="">
+                  <img src="https://img.freepik.com/premium-vector/blue-social-media-logo_197792-1759.jpg?size=626&ext=jpg" width="20px" height="20px" />
+                </i>
+                <a>Facebook</a>
+              </div>
+          </div>
+          <Ratings />
+
+
+        </article>
+      </div>
+      <div className="relative w-full flex-grow-2/3">
+        <figure className="relative lg:scale-75 ">
+        <img className="w-full h-auto md:w-full lg:w-full xl:w-full" src="https://assets.setmore.com/website/v2/images/homepage-v2/setmore-website-homepage-hero-cover.webp" alt="Cover" />
+      <img className="absolute top-[-25px] left-10 w-full h-auto md:w-full lg:w-full xl:w-full" src="https://assets.setmore.com/website/v2/images/homepage-v2-2/[email protected]" alt="Overlay" />
+        </figure>
+      </div>
+    </section>
+    )
+  }
+
+

pages/components/SectionA/Stars.js

@@ -0,0 +1,18 @@
+
+function Star() {
+    return <span className="bg-green-600 text-white text-md">★</span>;
+  }
+
+
+export default function Stars() {
+    return (
+      <div className="flex flex-row space-x-1">
+        <Star />
+        <Star />
+        <Star />
+        <Star />
+        <Star />
+      </div>
+    )
+  }
+

pages/components/SectionA/TrustPilot.js

@@ -0,0 +1,14 @@
+
+
+function Star() {
+    return <span className="text-green-600 text-lg">★</span>;
+}
+
+export default function TrustPilot() {
+    return (
+      <div className="">
+        <Star />
+        Trustpilot
+      </div>
+    )
+  }

pages/components/SectionB/SectionB.js

@@ -0,0 +1,32 @@
+
+export default function SectionB() {
+    return (
+    <section className="h-screen w-full relative mt-16">
+        <div className="flex flex-row bg-slate-100 mx-auto lg:d-fx ">
+            {/* <div className="flex flex-grow-1/3 transform translate-x-4 translate-y-30" >
+                    <img 
+                    className="w-3/12 h-3/12 md:w-full lg:w-6/12 xl:w-6/12" 
+                    src="https://assets.setmore.com/website/v2/images/homepage-v2-2/[email protected]"  width="20px" height="20px"/>
+            </div> */}
+            <div style={{ position: 'relative', width: '100%'}}>
+                <div style={{ width: '100%', height: '100%' }}/>
+                <div style={{ position: 'absolute', top: '-40px', left: '0', width: '100%', height: '100%', backgroundImage: 'url("https://assets.setmore.com/website/v2/images/homepage-v2-2/[email protected]")', backgroundSize: '80%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }}/>
+             </div>
+            <div className="flex-grow-2/3 ">
+                <article>
+                    <h2 className="text-4xl font-semibold py-7">
+                        <span className="text-setmoreHeading font-setmoreHeading">Spotlight your brand</span>
+                        <span className="text-setmore">.</span>
+                    </h2>
+                    <p className="text-zinc-600 text-lg font-light w-96">
+                    Brand experience hits a whole new level with a custom Booking Page. Show why your business stands apart and enable people to self-book at their convenience.
+                    </p>
+                    <button className="border border-setmore text-setmore w-60 py-3 px-7 text-sm rounded-md font-light mt-5">
+                        <span>Create your Booking Page</span>
+                    </button>
+                </article>
+            </div>
+        </div>
+    </section>
+    )
+}

pages/components/SectionC/Feature.js

@@ -0,0 +1,11 @@
+export default function Feature({ icon, heading, description }) {
+    return ( 
+        <div>
+            <div>
+                {icon}
+                <h3>{heading}</h3>
+            </div>
+            <p>{description}</p>
+        </div>
+    )
+}

pages/components/SectionC/SectionC.js

@@ -0,0 +1,39 @@
+import Feature from "./Feature";
+
+
+const features = [
+    {
+        icon: '1.',
+        heading: 'Stay one step ahead',
+        description: 'Share your online Booking Page and every new appointment lands in your calendar.'
+    },
+    {
+        icon: '2.',
+        heading: 'Reach global customers',
+        description: 'Add 1-click Zoom or Teleport video meeting links to your appointments.'
+    },
+    {
+        icon: '3.',
+        heading: 'Get paid in advance',
+        description: 'Forget about chasing invoices by accepting payments easily and securely online.'
+    },
+    {
+        icon: '4.',
+        heading: 'No more no-shows',
+        description: 'Let Setmore fire out personalized email or text reminders to every customer.'
+    },
+]
+export default function SectionA() {
+    return ( 
+        <section>
+            <ul>
+                {
+                features.map((feature, index) => (
+                    <li key={index}>
+                        <Feature icon={feature.icon} heading={feature.heading} description={feature.description} />
+                    </li>
+                ))}
+            </ul>
+        </section>
+    )
+}

pages/components/SectionD/SectionD.js

@@ -0,0 +1,32 @@
+export default function SectionA() {
+    return (
+    <section>
+        <article>
+            <h2>3 steps to success 🏆</h2>
+            <ul>
+                <li>
+                    <div>
+                        <div>1</div>
+                        <p>Create your Booking Page to display your services and real-time availability online.</p>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <div>2</div>
+                        <p>Show your business in its best light. Add your logo, branding, an Instagram stream, and reviews.</p>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <div>3</div>
+                        <p>Max out your calendar by linking your Booking Page with your site, Facebook, and Instagram.</p>
+                    </div>
+                </li>
+            </ul>
+            <div>
+                <img src="https://assets.setmore.com/website/v2/images/homepage-v2-2/female-gym-coach-instructing-man.png" />
+            </div>
+        </article>
+    </section>
+    )
+}

pages/components/SectionE/Pill.js

@@ -0,0 +1,11 @@
+
+export default function Pill({title})
+{
+    return (
+        <div>
+            <div>
+                <h4>{title}</h4>
+            </div>
+        </div>
+    )
+}

pages/components/SectionE/SectionE.js

@@ -0,0 +1,19 @@
+import Pill from "./Pill";
+
+export default function SectionE() {
+    return (
+        <section>
+            <div>
+                <h2>Who’s talking about us</h2>
+                <span>.</span>
+            </div>
+            <div>
+                <Pill title={'HubSpot'}/>
+                <Pill title={'Business Insider'}/>
+                <Pill title={'_Zapier'}/>
+            </div>
+
+
+        </section>
+    )
+}