diff --git a/cloudformation/marketing/cloudformation.yml b/cloudformation/marketing/cloudformation.yml index 89fe671..f50f60f 100644 --- a/cloudformation/marketing/cloudformation.yml +++ b/cloudformation/marketing/cloudformation.yml @@ -142,9 +142,12 @@ Resources: SslSupportMethod: sni-only MinimumProtocolVersion: TLSv1.2_2021 CustomErrorResponses: + - ErrorCode: 403 + ResponseCode: 404 + ResponsePagePath: /404.html - ErrorCode: 404 - ResponseCode: 200 - ResponsePagePath: /index.html + ResponseCode: 404 + ResponsePagePath: /404.html RedirectToIndexIfRequired: Type: AWS::CloudFront::Function @@ -164,4 +167,4 @@ Resources: } FunctionConfig: Comment: Redirect to index.html if required - Runtime: cloudfront-js-2.0 \ No newline at end of file + Runtime: cloudfront-js-2.0 diff --git a/marketing/gatsby-config.ts b/marketing/gatsby-config.ts index 873609b..3e73131 100644 --- a/marketing/gatsby-config.ts +++ b/marketing/gatsby-config.ts @@ -24,7 +24,6 @@ const config: GatsbyConfig = { { resolve: "gatsby-plugin-robots-txt", options: { - "host": "https://beddybytes.com", "sitemap": "https://beddybytes.com/sitemap-index.xml", "policy": [ { diff --git a/marketing/gatsby-node.ts b/marketing/gatsby-node.ts new file mode 100644 index 0000000..f033744 --- /dev/null +++ b/marketing/gatsby-node.ts @@ -0,0 +1,22 @@ +import type { GatsbyNode } from "gatsby"; + +const legacyRedirects = [ + { + fromPath: "/2023/10/18/how-to-use-creative-ilks-baby-monitor-on-a-cellular-hotspot-a-step-by-step-guide/", + toPath: "/blog/how-to/cellular-hotspot/", + }, + { + fromPath: "/2023/10/18/how-to-use-creative-ilks-baby-monitor-on-a-cellular-hotspot-a-step-by-step-guide", + toPath: "/blog/how-to/cellular-hotspot/", + }, +]; + +export const createPages: GatsbyNode["createPages"] = async ({ actions }) => { + for (const redirect of legacyRedirects) { + actions.createRedirect({ + ...redirect, + isPermanent: true, + redirectInBrowser: true, + }); + } +}; diff --git a/marketing/src/components/LandingPage/FAQSection/index.tsx b/marketing/src/components/LandingPage/FAQSection/index.tsx index 87efa0e..5818dd4 100644 --- a/marketing/src/components/LandingPage/FAQSection/index.tsx +++ b/marketing/src/components/LandingPage/FAQSection/index.tsx @@ -55,11 +55,16 @@ export const faqLibrary = { secure: { question: 'Is it secure?', answer: ( + +

+ BeddyBytes uses the internet for account authentication and signalling so your devices + can establish a connection. +

- BeddyBytes uses WebRTC to stream video and audio directly between your devices. - We don't store any of your video on our servers, and we don't relay your media - through our servers. + Once connected, video and audio stream directly between your devices over your local + network. We do not relay or store your media on our servers.

+
) }, passwordLength: { diff --git a/marketing/src/components/SocialProof/Section.tsx b/marketing/src/components/SocialProof/Section.tsx index 64341da..47e6f88 100644 --- a/marketing/src/components/SocialProof/Section.tsx +++ b/marketing/src/components/SocialProof/Section.tsx @@ -1,36 +1,69 @@ import React from 'react' +import { Link } from 'gatsby' import './style.scss' const SocialProofSection: React.FunctionComponent = () => (
-

- Over 20,000+ hours monitored! -

-

- Here's what some of our users have to say -

+
+
+
+ 20,000+ + hours monitored +
+
+
+
+ 30 days + refund guarantee +
+
+
+
+ Use your own + phones, tablets, and laptops +
+
+
+

Proof from real-world use

+

+ Families usually want three things answered before they buy: + will it work on their spare devices, is setup manageable, and does the privacy claim hold up? + Start with compatibility, then watch the demo video before you buy. +

-
- BeddyBytes is very easy to use and I love that it's flexible. - I can open the parent station on my phone or laptop depending - on whether I'm studying or doing housework without lugging - around an extra screen. Knowing that images of our family - life are completely private is very reassuring too. -
-
- Great job! Your emphasis on security and sustainability by - using existing devices is commendable. -
-
- Love that it keeps things local for privacy. -
-
- The girls were tidying the garage this morning and normally I - miss out on all their daily activities but I had BeddyBytes - running on a tablet next to me during meeting and I could see - and hear them so felt more included. -
+
+
+ BeddyBytes is very easy to use and I love that it's flexible. + I can open the parent station on my phone or laptop depending + on whether I'm studying or doing housework without lugging + around an extra screen. Knowing that images of our family + life are completely private is very reassuring too. +
+
Parent using phone and laptop monitoring
+
+
+
+ Great job! Your emphasis on security and sustainability by + using existing devices is commendable. +
+
Early customer focused on privacy and reuse
+
+
+
+ Love that it keeps things local for privacy. +
+
Parent prioritising local-only streaming
+
+
+
+ The girls were tidying the garage this morning and normally I + miss out on all their daily activities but I had BeddyBytes + running on a tablet next to me during meeting and I could see + and hear them so felt more included. +
+
Parent monitoring from a tablet during work
+
diff --git a/marketing/src/components/SocialProof/style.scss b/marketing/src/components/SocialProof/style.scss index 9022bb8..5553087 100644 --- a/marketing/src/components/SocialProof/style.scss +++ b/marketing/src/components/SocialProof/style.scss @@ -1,6 +1,25 @@ @import "../../scss/configuration"; section#social-proof { + .proof-metrics { + .proof-metric { + background-color: tint-color($secondary, 20%); + border-radius: $border-radius; + padding: 1rem; + height: 100%; + + strong, + span { + display: block; + } + + strong { + font-size: 1.5rem; + color: $light; + } + } + } + .testimonials { columns: 375px 3; column-gap: $spacer; @@ -16,6 +35,17 @@ section#social-proof { background-color: tint-color($secondary, 20%); border-radius: $border-radius; position: relative; + break-inside: avoid; + + blockquote { + margin-bottom: 0.75rem; + } + + figcaption { + font-size: 0.95rem; + color: tint-color($secondary, 80%); + font-style: normal; + } &::before, &::after { @@ -39,4 +69,4 @@ section#social-proof { } } } -} \ No newline at end of file +} diff --git a/marketing/src/pages/baby-monitor-without-wifi/index.tsx b/marketing/src/pages/baby-monitor-without-wifi/index.tsx index 9fbc809..67d3ba6 100644 --- a/marketing/src/pages/baby-monitor-without-wifi/index.tsx +++ b/marketing/src/pages/baby-monitor-without-wifi/index.tsx @@ -26,8 +26,8 @@ const PrivateBabyMonitorPage: React.FunctionComponent = () => ( Baby monitors can be private and convenient.

- BeddyBytes doesn't send a single frame over the internet. - Video is streamed directly between your smartphone and laptop. + BeddyBytes uses the internet for signalling, but your video and audio + stay local between your devices on your home Wi-Fi.

( We stream nap time directly between your smartphone and laptop using your home WiFi.

- An internet connection is required to establish the connection between devices. But no video is sent over the internet. + An internet connection is required for account authentication and signalling so your devices can find each other. + Once connected, no video or audio is sent through our servers.

Features

diff --git a/marketing/src/pages/index.tsx b/marketing/src/pages/index.tsx index 281c721..d7d42e0 100644 --- a/marketing/src/pages/index.tsx +++ b/marketing/src/pages/index.tsx @@ -28,6 +28,18 @@ const IndexPage: React.FunctionComponent = () => { minutes with no cloud video relay, no cloud recording, and no cloud storage.

+

+ Want to check your spare devices before you pay? Start with the + compatibility checker and setup video. +

+
+ + Check compatibility + + + Watch setup video + +
= () => { transformOptions={{ fit: "contain" }} /> +
+
+
+
+

Reduce the obvious buyer risk before purchase

+

+ Check whether your phones, tablets, and laptops support the browser features BeddyBytes + needs, then compare that against the 5-minute setup video before you head to pricing. +

+
+
+ + Check compatibility + + + See it in action + +
+
+
+

Key features for private baby monitoring

diff --git a/marketing/src/pages/pricing.tsx b/marketing/src/pages/pricing.tsx index 73a9acd..b2fa6ff 100644 --- a/marketing/src/pages/pricing.tsx +++ b/marketing/src/pages/pricing.tsx @@ -1,12 +1,75 @@ import React from "react" -import { type HeadFC, type PageProps } from "gatsby" +import { Link, type HeadFC, type PageProps } from "gatsby" +import { StaticImage } from "gatsby-plugin-image" import SEOHead from "../components/SEOHead" import DefaultPageWrapper from "../components/DefaultPageWrapper" import Pricing from "../components/Pricing" import SocialProofSection from "../components/SocialProof/Section" import AllPlansInclude from "../components/Pricing/AllPlansInclude" import { OnePurchase, RedirectToPaymentProcessor } from "../components/Pricing/Messages" -import FAQSection from "../components/LandingPage/FAQSection" +import FAQSection, { FAQItem, faqLibrary } from "../components/LandingPage/FAQSection" + +const pricingFAQItems: FAQItem[] = [ + { + question: "Will this work on the devices I already own?", + answer: ( + +

+ Usually yes if your devices support a modern browser with WebRTC and WebSockets. + The fastest way to know is to run the compatibility checker + on the devices you plan to use before you buy. +

+

+ Baby Station devices need a camera and microphone. Parent Station devices only need + browser support for WebRTC and WebSockets. +

+
+ ), + }, + { + question: "How hard is setup?", + answer: ( + +

+ Setup is designed to take a few minutes: sign in, open Baby Station on one device, + open Parent Station on another, and allow camera and microphone access. +

+

+ Watch the setup video if you want to see the flow before purchasing. +

+
+ ), + }, + { + question: "What happens after I buy?", + answer: ( + +

+ Checkout is handled on a secure Stripe-hosted payment page. After purchase, your account + can be used across your compatible devices without paying per device. +

+

+ The product is browser-based, so there is no app-store install step to discover after payment. +

+
+ ), + }, + { + question: "What if it is not a fit for our setup?", + answer: ( + +

+ Every plan includes a 30-day refund guarantee. +

+

+ The safest path is still to check compatibility first so you know your intended devices + support the required browser features. +

+
+ ), + }, + faqLibrary.internetConnection, +] const PricingPage: React.FunctionComponent = () => { return ( @@ -19,6 +82,61 @@ const PricingPage: React.FunctionComponent = () => { Choose a one-time purchase plan with no subscription and access BeddyBytes across all your devices.

+
+
+
+

Check compatibility before you buy

+

+ Most purchase hesitation comes down to setup confidence and device compatibility. + Run the browser-based compatibility check, watch the setup flow, then come back to buy. +

+
+ + Check compatibility + + + Watch setup video + +
+
+
+
    +
  • Uses your existing phones, tablets, and laptops.
  • +
  • Internet is used for signalling. Media stays local between your devices.
  • +
  • 30-day refund guarantee if it is not the right fit.
  • +
+
+
+
+
+
+
+ +
+

What the Baby Station looks like

+

Use a phone or tablet near the cot and keep it plugged in for longer sessions.

+
+
+
+
+
+ +
+

What the Parent Station looks like

+

Monitor from the device you are already using, whether that is a phone, tablet, or laptop.

+
+
+
+
@@ -28,7 +146,7 @@ const PricingPage: React.FunctionComponent = () => {
- + ) }