Skip to content

Commit

Permalink
Merge pull request #1 from petercsiba/revamp-landing-page-gpt-like-bo…
Browse files Browse the repository at this point in the history 
…omer

[frontend] Revamp landing page to Audio To Email with GPT Like Boomer attitude
  • Loading branch information
@petercsiba
petercsiba authored Sep 11, 2024
2 parents c51f607 + ab7fd9f commit f145743
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 101 deletions.
4 changes: 2 additions & 2 deletions backend/common/config.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@

# EMAIL Stuff
NO_REPLY_EMAIL = "No Reply <[email protected]>"
SENDER_EMAIL = "Dumpsheet Workers Union<[email protected]>" # From:
SENDER_EMAIL = "GPT Workers Union<[email protected]>" # From:
SENDER_EMAIL_ALERTS = "Poor Mans Opsgenie <[email protected]>" # From:
SUPPORT_EMAIL = "Dumpsheet Support <[email protected]>"
SUPPORT_EMAIL = "Audio To Email Support <[email protected]>"
DEBUG_RECIPIENTS = [] # used to be a google group
RESPONSE_EMAILS_WAIT_BETWEEN_EMAILS_SECONDS = int(
os.environ.get("RESPONSE_EMAILS_WAIT_BETWEEN_EMAILS_SECONDS", 30)
Expand Down
25 changes: 0 additions & 25 deletions backend/database/account.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,31 +94,6 @@ def get_phone(self) -> Optional[str]:

return None

# @staticmethod
# # TODO(P2): This feels like a too dangerous function to have around
# def merge_in(new_account_id, old_account_id):
# new_account = BaseAccount.get_or_none(BaseAccount.id == new_account_id)
# if new_account is None:
# raise ValueError(f"new_account_id {new_account_id} must exist")
#
# old_account = BaseAccount.get_or_none(BaseAccount.id == old_account_id)
# if old_account is None:
# raise ValueError(f"old_account_id {old_account_id} must exist")
#
# with database_proxy.transaction() as tx:
# print(f"merging {old_account_id} into {new_account_id}")
# num_onb = BaseOnboarding.update(account_id=new_account_id).where(
# BaseOnboarding.account_id == old_account_id).execute()
# num_de = BaseDataEntry.update(account_id=new_account_id).where(
# BaseDataEntry.account_id == old_account_id).execute()
# num_el = BaseEmailLog.update(account_id=new_account_id).where(
# BaseEmailLog.account_id == old_account_id).execute()
# tx.commit()
#
# assert BaseOnboarding.get_or_none(BaseOnboarding.account_id == old_account_id) is None
# # old_account.delete_instance()
# print(f"Account.merge_in updated {num_onb} onboardings, {num_de} data entries and {num_el} email logs")

@staticmethod
def get_by_email_or_none(email_raw: str) -> Optional["Account"]:
email = email_raw.lower()
Expand Down
140 changes: 93 additions & 47 deletions webapp/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import Link from "next/link";
import { redirect } from "next/navigation";

import hero from "/public/dumpsheet-agent.webp";
// import hero from "/public/dumpsheet-agent.webp";
import hero from "/public/images/evolution-trend-reverted-home-erectus-is-back.jpg"

import { Button } from "@/components/ui/button";
import ExplainerSection from "@/components/ExplainerSection";
Expand All @@ -14,54 +12,102 @@ export const dynamic = "force-dynamic";
export default async function Index() {
return (
<div className="flex flex-col items-center pt-16">
<div className="flex flex-col lg:flex-row items-center gap-8 p-8 max-w-6xl w-full">
<div className="flex flex-col space-y-4 lg:w-1/2 w-full">
<h1 className="text-5xl font-bold">
Email, Effortlessly with Your Voice.
</h1>
<p className="text-gray-600 text-lg">
Transform your spoken words into written emails instantly with <b>Audio To Email</b>.
Perfect for professionals on the go, accessibility needs, or anyone looking to streamline their workflow.
</p>
<div className="flex flex-row items-center">
<div>
<Link href="/record" className="flex-grow-0">
<Button className="px-4 py-2 whitespace-nowrap">Start Dictating Now</Button>
</Link>
<div className="flex flex-col lg:flex-row items-center gap-8 p-8 max-w-6xl w-full">
<div className="flex flex-col space-y-4 lg:w-1/2 w-full">
<h1 className="text-5xl font-bold">
GPT like it's the 90s.
</h1>
<p className="text-gray-600 text-lg">
No apps, just email. <br/>
No scam subscriptions, just invoices. <br/>
This is <b>Audio To Email</b>. <br/>
</p>
<div className="flex flex-row items-center">
<div>
<Link href="/upload" className="flex-grow-0">
<Button className="px-4 py-2 whitespace-nowrap">Upload Voice Memo's You Always Wanted to
Revisit But Were Too Busy</Button>
</Link>
</div>
</div>
<div className="flex flex-row items-center">
<div className="text-sm text-gray-500 italic flex-grow ml-2">
Join hundreds who are redefining email productivity.

Just like in the good old days of calling your assistant
to transcribe your brain farts of gold for you.
</div>
</div>
<div className="mt-4 text-gray-500">
<span>Already a user? </span>
<Link className="text-blue-600 hover:underline" href="/login">
Sign In
</Link>
</div>
</div>
<div className="text-sm text-gray-500 italic flex-grow ml-2">
Join thousands who are redefining email productivity. Fast, accurate, and secure.
<div className="lg:w-1/2 w-full mt-8 lg:mt-0">
<img
src={hero.src}
alt="Voice to Email Conversion Illustration"
className="rounded-lg object-cover w-full h-full"
/>
</div>
</div>
<div className="mt-4 text-gray-500">
<span>Already a user? </span>
<Link className="text-blue-600 hover:underline" href="/login">
Sign In
</Link>
</div>

</div>
<div className="lg:w-1/2 w-full mt-8 lg:mt-0">
<img
src={hero.src}
alt="Voice to Email Conversion Illustration"
className="rounded-lg object-cover w-full h-full"
/>
<ExplainerSection/>
<PricingSection/>

<div className="w-full max-w-6xl mt-6 mb-2 p-8 rounded-lg space-y-8">
<h2 className="text-3xl font-bold text-center mb-8">Still not convinced?</h2>
<p className="text-gray-600 text-lg text-center">
<a href="https://www.loom.com/share/1614e907aeea4312bb53affd99677593" target="_blank"
rel="noopener noreferrer">

<Button>Let People From Ivy League Sell It To You</Button>
</a>
</p>
<p className="text-sm text-gray-600 text-center">
{/*TODO(P1, ux): Figure out how to start the voice recorder in the Demo mode */}
<Link href="/record/demo" className="flex-grow-0">
<Button className="px-4 py-2 whitespace-nowrap">Go Through Interactive Demo</Button>
</Link>
</p>
</div>

</div>
<ExplainerSection/>
<PricingSection/>
<div className="w-full max-w-6xl mt-6 mb-6 p-8 rounded-lg space-y-8">
<h2 className="text-3xl font-bold text-center mb-8">You In A Good Club</h2>

<div className="w-full max-w-6xl mt-16 mb-16 p-8 rounded-lg space-y-8">
<h2 className="text-3xl font-bold text-center mb-8">Still not convinced?</h2>
<p className="text-gray-600 text-lg text-center">
<a href="https://www.loom.com/share/1614e907aeea4312bb53affd99677593" target="_blank"
rel="noopener noreferrer">
<p className="text-sm text-gray-600 text-center">
Join Professionals from these companies who are already using Audio To Email:
</p>

<Button>Watch Demo</Button>
</a>
</p>
</div>
<div className="flex justify-center items-center space-x-8">
<img src="/images/logos/experience-robinhood.png" alt="Robinhood" className="h-16"/>
<img src="/images/logos/experience-columbia-university.png" alt="Columbia University"
className="h-16"/>
<img src="/images/logos/experience-google.png" alt="Google" className="h-16"/>
<img src="/images/logos/experience-ibm.png" alt="IBM" className="h-16"/>
<img src="/images/logos/experience-mckinsey-and-company.png" alt="McKinsey and Company"
className="h-16"/>
<img src="/images/logos/experience-siemens.png" alt="Siemens" className="h-16"/>
</div>
</div>


<div className="w-full max-w-6xl mt-6 mb-6 p-8 rounded-lg space-y-8">
<h2 className="text-3xl font-bold text-center mb-8">We Are Here To Support You</h2>

<div className="text-sm text-gray-600 text-center">
<div className="flex justify-center items-center space-x-4">
<Link href="mailto:[email protected]">
<Button className="px-4 py-2 whitespace-nowrap">Email Peter</Button>
</Link>
<Link href="tel:+16502106516">
<Button className="px-4 py-2 whitespace-nowrap">Call Peter</Button>
</Link>
</div>
</div>
</div>
</div>
);
}
);
}
14 changes: 4 additions & 10 deletions webapp/components/ExplainerSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export default function ExplainerSection() {
className="text-3xl font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-full w-10 h-10 flex items-center justify-center">
1
</div>
<h3 className="text-2xl font-semibold">Upload or Record your Audio</h3>
<h3 className="text-2xl font-semibold">Upload your Audio/Video</h3>
</div>
<p className="text-sm text-gray-600 text-center">
Any audio file would do, or you can <Link href="/record">record one </Link> right here!.
Any audio like a voice memo would do, or you can <Link href="/record">record one </Link> right here!.
</p>
{/*
TODO(P0, ux): Explain the "just send an email" upload version
Expand All @@ -30,12 +30,6 @@ export default function ExplainerSection() {
alt="Audio file upload example"
className="rounded-lg object-cover w-3/4 md:w-1/2 lg:w-1/3 mx-auto"
/>
<p className="text-sm text-gray-600 text-center">
{/*TODO(P1, ux): Figure out how to start the voice recorder in the Demo mode */}
<Link href="/record/demo" className="flex-grow-0">
<Button className="px-4 py-2 whitespace-nowrap">Interactive Demo</Button>
</Link>
</p>
</div>

{/* Step 2: Backend Work */}
Expand All @@ -48,7 +42,7 @@ export default function ExplainerSection() {
<h3 className="text-2xl font-semibold">Our Agents get to Work</h3>
</div>
<p className="text-sm text-gray-600 text-center">
Only takes a few minutes as you grab your drink of choice on your way to your desk.
And forget about it, while we transcribe and post-process your audio.
</p>
<img
src={blur.src}
Expand All @@ -66,7 +60,7 @@ export default function ExplainerSection() {
<h3 className="text-2xl font-semibold">Your Voice Memo in your Mailbox</h3>
</div>
<p className="text-sm text-gray-600 text-center">
Audio text ready for its next destination when you ready to do so!
Oh look, what is in your inbox? Waiting for you when you are ready to "do your emails".
</p>
<img
src={result.src}
Expand Down
42 changes: 34 additions & 8 deletions webapp/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@ const stripeIsConfigured = process.env.NEXT_PUBLIC_STRIPE_IS_ENABLED === "true";

export const revalidate = 0;

const SoonBadge = () => {
return (
<span className="relative -top-2 -left-3 bg-gray-500 text-white text-xs font-bold px-2 py-1 rounded-full">
Soon
</span>
);
};


export default async function Navbar() {
const supabase = createServerComponentClient<Database>({ cookies });

Expand All @@ -36,21 +45,38 @@ export default async function Navbar() {
<div className="flex w-full px-4 lg:px-40 py-4 items-center border-b text-center gap-8 justify-between">
<div className="flex gap-2 h-full">
<Link href="/">
<h2 className="font-bold pt-1.5 pr-4">Audio To Email</h2>
<h2 className="font-bold pt-1.5 pr-2">GPT Like a Boomer</h2>
</Link>
<Link href="mailto:[email protected]?subject=Attached%20Are%20My%20Audio%20Files">
<Button variant={"ghost"} className="px-2">Attach Audio via Email</Button>
</Link>
<Link href="/record">
<Button variant={"ghost"} className="px-4">Record Audio</Button>
<Button variant={"ghost"} className="px-2">Record Voice Mail</Button>
</Link>
<Link href="/upload">
<Button variant={"ghost"} className="px-4">Upload Audio</Button>
<Button variant={"ghost"} className="px-2">Upload from your PC</Button>
</Link>
<Link href="/upload">
<Button variant={"ghost"} className="px-4">Upload Video</Button>
{/*<Link href="/upload">*/}
{/* <Button variant={"ghost"} className="px-2">Send us Direct Mail</Button>*/}
{/*</Link>*/}
<Link href="tel:+18554137047">
<Button variant={"ghost"} className="px-2">Dial Up GPT <br />+1 (855) 413-7047</Button>
</Link>
{/*<Link href="mailto:[email protected]?subject=Support%20Request">*/}
{/* <Button variant={"ghost"} className="px-2" style={{ fontFamily: 'Courier, monospace'}}>Send a Fax</Button>*/}
{/*</Link>*/}
<Link href="/fax">
<Button variant={"ghost"} className="px-4">Fax</Button>
<SoonBadge />
</Link>
<Link href="/direct-mail">
<Button variant={"ghost"} className="px-2">Direct Mail</Button>
<SoonBadge />
</Link>
</div>
{user && (
<div className="hidden lg:flex flex-row gap-2">
{stripeIsConfigured && (
<div className="hidden lg:flex flex-row gap-2">
{stripeIsConfigured && (
<Link href="/get-credits">
<Button variant={"ghost"}>Get Credits</Button>
</Link>
Expand All @@ -60,7 +86,7 @@ export default async function Navbar() {
<div className="flex gap-4 lg:ml-auto">
{!user && (
<Link href="/login">
<Button variant={"ghost"}>Login / Signup</Button>
<Button>Login / Signup</Button>
</Link>
)}
{user && (
Expand Down
10 changes: 5 additions & 5 deletions webapp/components/PricingSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";

export default function PricingSection() {
return (
<div className="w-full max-w-6xl mt-16 mb-16 p-8 rounded-lg space-y-8">
<div className="w-full max-w-6xl mt-16 mb-6 p-8 rounded-lg space-y-8">
<h2 className="text-3xl font-bold text-center mb-8">Pricing</h2>
<div className="flex flex-wrap justify-center lg:space-x-4 space-y-4 lg:space-y-0 items-stretch">
{pricingOptions.map((option, index) => (
Expand Down Expand Up @@ -48,7 +48,7 @@ const pricingOptions = [
title: "Goodwill",
price: "Free",
description:
"I am busy lets do it",
"I am busy just give me your free sample",
features: [
"~15min of audio per day",
"No Account Needed",
Expand All @@ -60,8 +60,8 @@ const pricingOptions = [
bgColor: "bg-white",
},
{
title: "Pay as you go",
price: "3x of our compute cost",
title: "Invoice",
price: "2x of our compute cost",
description:
"This is how much $1 gets you:",
features: [
Expand All @@ -76,7 +76,7 @@ const pricingOptions = [
{
title: "Enterprise",
price: "Lets Negotiate",
description: "The best value for \"high volumes\" (pun intended).",
description: "The best value for \"high volumes\" (pun intended - we can handle your yelling!).",
features: [
"Lower cost for bulk purchases",
],
Expand Down
Binary file added webapp/public/images/evolution-trend-reverted-home-erectus-is-back.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit f145743

Please sign in to comment.