Add Wordpress Link/Section

components/LandingPage/CTASection.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import style from 'styles/landing.module.css'
+
+export default function CTASection (): JSX.Element {
+  return (
+    <div className={style.cta_ctn}>
+      <div className={style.container}>
+        <div className={style.cta_content}>
+          <h2>
+            Ready to Start Accepting <span>eCash</span>?
+          </h2>
+          <div className={style.cta_buttons}>
+            <Link href="/signup" className="button_main button_large">
+              Get Started Free
+            </Link>
+            <Link
+              href="https://docs.paybutton.org"
+              target="_blank"
+              className="button_outline button_large"
+            >
+              View Documentation
+            </Link>
+          </div>
+          <div className={style.cta_features}>
+            <div className={style.cta_feature}>
+              <span className={style.cta_check}>✓</span>
+              <span>No setup fees</span>
+            </div>
+            <div className={style.cta_feature}>
+              <span className={style.cta_check}>✓</span>
+              <span>Instant activation</span>
+            </div>
+            <div className={style.cta_feature}>
+              <span className={style.cta_check}>✓</span>
+              <span>Easy to use</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/LandingPage/Dashboard.tsx

@@ -1,16 +1,14 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import style from '/styles/landing.module.css';
-import DashboardScreen from 'assets/dashboard-light.png';
-import DashboardScreenDark from 'assets/dashboard-dark.png';
-import Wave from 'assets/wave2.svg';
+import Image from 'next/image'
+import style from 'styles/landing.module.css'
+import DashboardScreen from 'assets/dashboard-light.png'
+import DashboardScreenDark from 'assets/dashboard-dark.png'
 
-export default function Dashboard(): JSX.Element {
+export default function Dashboard (): JSX.Element {
   return (
     <div className={style.dashboard_ctn}>
       <div className={style.container}>
         <h2>
-          Dashboard<span>New!</span>
+          Dashboard
         </h2>
         <p>
           Track transactions and revenue through the PayButton dashboard. Create
@@ -30,8 +28,18 @@ export default function Dashboard(): JSX.Element {
           />
         </div>
       </div>
-      <Image src={Wave} alt="wave" className={style.wave2} />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1440 181"
+        className={style.wave2}
+      >
+        <path
+          fill="var(--wave-fill-color, #e5e4e4)"
+          fillOpacity="1"
+          d="M 0 160 L 80 149.3 C 160 139 320 117 480 122.7 C 640 128 800 160 960 170.7 C 1120 181 1280 171 1440 117 L 1440 181 L 0 181 Z"
+        />
+      </svg>
       <div className={style.whitebackground} />
     </div>
-  );
+  )
 }

components/LandingPage/FeaturesSection.tsx

@@ -0,0 +1,76 @@
+import style from 'styles/landing.module.css'
+
+export default function FeaturesSection (): JSX.Element {
+  return (
+    <div className={style.features_ctn}>
+      <div className={style.container}>
+        <div className={style.features_header}>
+          <h2>
+            Why Choose <span>PayButton</span>?
+          </h2>
+          <p>
+            The most reliable and user-friendly way to accept eCash payments
+            online
+          </p>
+        </div>
+        <div className={style.features_grid}>
+          <div className={style.feature_card}>
+            <div className={style.feature_icon_wrapper}>
+              <div className={style.feature_icon}>⚡</div>
+            </div>
+            <h3>Lightning Fast</h3>
+            <p>
+              Instant payment processing with eCash's fast blockchain. No
+              waiting for confirmations or dealing with slow traditional payment
+              methods.
+            </p>
+          </div>
+          <div className={style.feature_card}>
+            <div className={style.feature_icon_wrapper}>
+              <div className={style.feature_icon}>🔒</div>
+            </div>
+            <h3>Secure & Private</h3>
+            <p>
+              Built on eCash's secure blockchain with privacy features. Your
+              customers' payment data stays private and secure.
+            </p>
+          </div>
+          <div className={style.feature_card}>
+            <div className={style.feature_icon_wrapper}>
+              <div className={style.feature_icon}>💰</div>
+            </div>
+            <h3>Low Fees</h3>
+            <p>
+              Minimal transaction fees compared to traditional payment
+              processors. Keep more of your revenue with eCash's efficient
+              network.
+            </p>
+          </div>
+
+          <div className={style.feature_card}>
+            <div className={style.feature_icon_wrapper}>
+              <div className={style.feature_icon}>🛠️</div>
+            </div>
+            <h3>Easy Integration</h3>
+            <p>
+              Simple code snippets, WordPress plugin, and comprehensive
+              documentation make integration effortless.
+            </p>
+          </div>
+        </div>
+
+        <div className={style.use_cases}>
+          <h3>Perfect for:</h3>
+          <div className={style.use_cases_features}>
+            <span>🛒 E-commerce</span>
+            <span>📝 Content Creators</span>
+            <span>🎓 Online Courses</span>
+            <span>🎨 Digital Downloads</span>
+            <span>🎁 Donations</span>
+            <span>🔧 Freelancers</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/LandingPage/Footer.tsx

@@ -1,19 +1,24 @@
-import Link from 'next/link';
-import Image from 'next/image';
-import style from '/styles/landing.module.css';
-import logoImageSource from 'assets/logo.png';
+import Link from 'next/link'
+import Image from 'next/image'
+import style from 'styles/landing.module.css'
+import logoImageSource from 'assets/logo.png'
 import LogoutButton from './LogoutButton'
 
-export default function Footer ({ userId }): JSX.Element {
-  const currentYear = new Date().getFullYear();
-  const copyrightSymbol = '\u00A9';
+interface FooterProps {
+  userId?: string
+}
+
+export default function Footer ({ userId }: FooterProps): JSX.Element {
+  const currentYear = new Date().getFullYear()
+  const copyrightSymbol = '\u00A9'
   return (
     <div className={style.footer_ctn}>
       <div className={style.container}>
         <div className={style.footer}>
           <Image src={logoImageSource} alt="PayButton" />
           <div className={style.footerlink_ctn}>
             <Link href="#button-generator">Button Generator</Link>
+            <Link href="#wordpress">WordPress</Link>
             <Link
               href="https://github.com/paybutton"
               target="_blank"
@@ -32,24 +37,30 @@ export default function Footer ({ userId }): JSX.Element {
               Docs
             </Link>
             {userId === undefined
-              ? <>
-              <Link href="/signin">Sign In</Link>
-              <Link href="/signup" className="button_outline button_small footer_signup_btn">
-                Sign up
-              </Link>
-            </>
-              : <>
-            <Link href="/dashboard">Dashboard</Link>
-            <LogoutButton footer/>
-          </>
-          }
+              ? (
+              <>
+                <Link href="/signin">Sign In</Link>
+                <Link
+                  href="/signup"
+                  className="button_outline button_small footer_signup_btn"
+                >
+                  Sign up
+                </Link>
+              </>
+                )
+              : (
+              <>
+                <Link href="/dashboard">Dashboard</Link>
+                <LogoutButton footer={true} onClick={() => {}} />
+              </>
+                )}
           </div>
         </div>
         <div className={style.copyright}>
-          {copyrightSymbol} 
+          {copyrightSymbol}
           {currentYear} Blockchain Ventures Corp. All Rights Reserved.
         </div>
       </div>
     </div>
-  );
+  )
 }

components/LandingPage/Hero.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link'
 import Image from 'next/image'
-import style from '/styles/landing.module.css'
-import button from 'assets/button-pointer.png'
-import Wave from 'assets/wave.svg'
-import Blocks from 'assets/blocks.png'
+import style from '../../styles/landing.module.css'
+import button from '../../assets/button-pointer.png'
+import Wave from '../../assets/wave.svg'
+import Blocks from '../../assets/blocks.png'
 
 export default function Hero (): JSX.Element {
   return (
@@ -15,10 +15,16 @@ export default function Hero (): JSX.Element {
               The easiest way to accept <span>eCash</span> online
             </h1>
             <p>
-              Start accepting XEC or BCH on your website with only a few lines of code
+              Start accepting XEC or BCH on your website with only a few lines
+              of code
             </p>
+            <div className={style.hero_features}>
+              <span>⚡ Fast</span>
+              <span>🔒 Secure</span>
+              <span>💰 Low fees</span>
+            </div>
             <div className={style.button_ctn}>
-              <Link href="/signup" className='button_main'>
+              <Link href="/signup" className="button_main">
                 Sign up for free
               </Link>
             </div>

components/LandingPage/Navbar.tsx

@@ -42,8 +42,13 @@ export default function Navbar ({ userId }: IProps): JSX.Element {
           className={style.navlink_ctn}
           style={mobileMenu ? { left: '0' } : { left: '-200px' }}
         >
-          <ThemeToggle landingpage />
-          <a href="#button-generator" onClick={() => setMobileMenu(false)}>Button Generator</a>
+          <ThemeToggle chart={false} setChart={() => {}} landingpage={true} />
+          <a href="#button-generator" onClick={() => setMobileMenu(false)}>
+            Button Generator
+          </a>
+          <a href="#wordpress" onClick={() => setMobileMenu(false)}>
+            WordPress
+          </a>
           <Link
             href="https://github.com/paybutton"
             target="_blank"
@@ -60,19 +65,35 @@ export default function Navbar ({ userId }: IProps): JSX.Element {
           >
             Telegram
           </Link>
-          <Link href="https://docs.paybutton.org/#/?id=what-is-paybutton" onClick={() => setMobileMenu(false)}>Docs</Link>
+          <Link
+            href="https://docs.paybutton.org/#/?id=what-is-paybutton"
+            onClick={() => setMobileMenu(false)}
+          >
+            Docs
+          </Link>
           {userId === undefined
-            ? <>
-            <a href="/signin" onClick={() => setMobileMenu(false)}>Sign In</a>
-            <a href="/signup" className="button_outline button_small" onClick={() => setMobileMenu(false)}>
-              Sign up
-            </a>
-          </>
-            : <>
-            <a href="/dashboard" onClick={() => setMobileMenu(false)}>Dashboard</a>
-            <LogoutButton />
-          </>
-          }
+            ? (
+            <>
+              <a href="/signin" onClick={() => setMobileMenu(false)}>
+                Sign In
+              </a>
+              <a
+                href="/signup"
+                className="button_outline button_small"
+                onClick={() => setMobileMenu(false)}
+              >
+                Sign up
+              </a>
+            </>
+              )
+            : (
+            <>
+              <a href="/dashboard" onClick={() => setMobileMenu(false)}>
+                Dashboard
+              </a>
+              <LogoutButton onClick={() => {}} footer={false} />
+            </>
+              )}
         </div>
       </div>
     </div>