Compare commits

..
10 Commits
Author SHA1 Message Date
Gitead 02925092c5 Approve esbuild build script in pnpm workspace config 2026-07-31 16:50:18 -04:00
Replit Agent e7a5f32c77 Remove unused code from Hero component
Replit-Commit-Author: Agent
2026-07-31 19:53:07 +00:00
Replit Agent e773537ec7 Update HowItWorks component content
Replit-Commit-Author: Agent
2026-07-31 19:52:05 +00:00
Replit Agent 3b376babdc Remove unused code from HowItWorks component
Replit-Commit-Author: Agent
2026-07-31 19:51:30 +00:00
Replit Agent 5d5c2ec577 Update HowItWorks component content
Replit-Commit-Author: Agent
2026-07-31 19:51:02 +00:00
Replit Agent 43ff22687d Update HowItWorks component text
Replit-Commit-Author: Agent
2026-07-31 19:50:14 +00:00
Replit Agent 20d035d0dc Update HowItWorks component content
Replit-Commit-Author: Agent
2026-07-31 19:49:50 +00:00
Replit Agent 50ed3a6891 Update App component source file
Replit-Commit-Author: Agent
2026-07-31 19:48:33 +00:00
Replit Agent 8335a1da0e Update the navigation bar component
Replit-Commit-Author: Agent
2026-07-31 18:53:51 +00:00
Replit Agent e2a8390ae4 Refactor the features component in the dental app
Replit-Commit-Author: Agent
2026-07-31 18:51:25 +00:00
6 changed files with 63 additions and 107 deletions
+1 -1
View File
@@ -18,8 +18,8 @@ function LandingPage() {
<Navbar /> <Navbar />
<main> <main>
<Hero /> <Hero />
<Features />
<HowItWorks /> <HowItWorks />
<Features />
<StatsBar /> <StatsBar />
<FinalCTA /> <FinalCTA />
</main> </main>
@@ -64,60 +64,59 @@ export function Features() {
</div> </div>
</motion.div> </motion.div>
{/* Features 2 & 3 — two columns below, each with image */} {/* Feature 2 — full-width, image on the left, text on the right */}
<div className="grid md:grid-cols-2 gap-8"> <motion.div
<motion.div variants={itemVariants}
variants={itemVariants} className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col md:flex-row"
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col" data-testid="feature-card-2"
data-testid="feature-card-2" >
> <div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
<div className="h-52 overflow-hidden"> <img
<img src={patientSrc}
src={patientSrc} alt="Dental receptionist managing after-hours patient communication"
alt="Dental receptionist managing after-hours patient communication" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-testid="img-patient-connection"
data-testid="img-patient-connection" />
/> </div>
<div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
<div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors">
<Clock className="w-7 h-7 text-primary" />
</div> </div>
<div className="p-8 flex flex-col flex-1"> <h3 className="text-2xl font-bold text-primary mb-4">
<div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors"> 24/7 Patient Connection
<Clock className="w-7 h-7 text-primary" /> </h3>
</div> <p className="text-muted-foreground leading-relaxed">
<h3 className="text-2xl font-bold text-primary mb-4"> After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
24/7 Patient Connection </p>
</h3> </div>
<p className="text-muted-foreground leading-relaxed"> </motion.div>
After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
</p>
</div>
</motion.div>
<motion.div {/* Feature 3 — full-width, text on the left, image on the right */}
variants={itemVariants} <motion.div
className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col" variants={itemVariants}
data-testid="feature-card-3" className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col md:flex-row"
> data-testid="feature-card-3"
<div className="h-52 overflow-hidden"> >
<img <div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
src={dataSrc} <div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
alt="Secure local data storage and backup system" <Shield className="w-7 h-7 text-[#158915]" />
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
data-testid="img-data-control"
/>
</div> </div>
<div className="p-8 flex flex-col flex-1"> <h3 className="text-2xl font-bold text-primary mb-4">
<div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors"> Your Data, Your Control
<Shield className="w-7 h-7 text-[#158915]" /> </h3>
</div> <p className="text-muted-foreground leading-relaxed">
<h3 className="text-2xl font-bold text-primary mb-4"> All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
Your Data, Your Control </p>
</h3> </div>
<p className="text-muted-foreground leading-relaxed"> <div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours. <img
</p> src={dataSrc}
</div> alt="Secure local data storage and backup system"
</motion.div> className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
</div> data-testid="img-data-control"
/>
</div>
</motion.div>
</motion.div> </motion.div>
</div> </div>
</section> </section>
@@ -65,52 +65,6 @@ export function Hero() {
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Mock UI preview */}
<motion.div
className="mt-20 max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-2xl shadow-primary/10 border border-border bg-white"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
>
<div className="h-12 bg-secondary flex items-center px-4 gap-2 border-b border-border">
<div className="w-3 h-3 rounded-full bg-red-400" />
<div className="w-3 h-3 rounded-full bg-amber-400" />
<div className="w-3 h-3 rounded-full bg-green-400" />
<div className="ml-4 h-6 w-64 bg-white rounded-md opacity-50 flex items-center px-2">
<div className="text-[10px] text-muted-foreground font-mono">my-dental-software.app</div>
</div>
</div>
<div className="p-8 grid md:grid-cols-3 gap-6 bg-secondary/30">
<div className="md:col-span-2 space-y-4">
<div className="flex gap-4">
<div className="w-8 h-8 rounded-full bg-primary/10 flex-shrink-0" />
<div className="bg-white p-4 rounded-2xl rounded-tl-sm shadow-sm border border-border text-sm max-w-md">
Check if John Smith is eligible for a crown
</div>
</div>
<div className="flex gap-4 justify-end">
<div className="bg-primary text-white p-4 rounded-2xl rounded-tr-sm shadow-sm text-sm max-w-md">
<strong className="block mb-1 text-accent">Done.</strong>
John Smith is eligible for D2740 (Crown - porcelain/ceramic) through Delta Dental. Copay is 20%. Remaining annual maximum: $1,250.
</div>
<div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<div className="w-3 h-3 bg-accent rounded-sm" />
</div>
</div>
</div>
<div className="bg-primary rounded-xl shadow-sm p-5 h-full flex flex-col justify-center gap-4">
<p className="text-sm text-white">
We prefer John to come at 10am this Thursday because of a patient cancellation. Do you allow me to call John?
</p>
<button
data-testid="button-call-john"
className="self-start px-4 py-2 rounded-full bg-white text-primary text-sm font-semibold hover:opacity-90 transition-opacity"
>
Call John
</button>
</div>
</div>
</motion.div>
</div> </div>
</section> </section>
); );
@@ -64,20 +64,20 @@ export function HowItWorks() {
<div className="flex flex-col gap-6 h-[400px]"> <div className="flex flex-col gap-6 h-[400px]">
{/* Chat Mockup */} {/* Chat Mockup */}
<div className="self-end bg-secondary p-4 rounded-2xl rounded-tr-none text-sm max-w-[80%]"> <div className="self-end bg-secondary p-4 rounded-2xl rounded-tr-none text-sm max-w-[80%]">
Can you pull up today's schedule and highlight any cancellations? Check if John Smith is eligible for a crown
</div> </div>
<div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative"> <div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative">
<div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" /> <div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" />
<span className="text-accent font-medium mb-1 block">Assistant</span> <span className="text-accent font-medium mb-1 block">AI Assistant</span>
You have 12 appointments today. One cancellation at 2:00 PM (Jane Doe - Cleaning). I've already texted the waitlist. Done. John Smith is eligible for D2740 (Crown - porcelain/ceramic) through Delta Dental. Copay is 20%. Remaining annual maximum: $1,250.
</div>
<div className="self-end bg-secondary p-4 rounded-2xl rounded-tr-none text-sm max-w-[80%] mt-4">
Great, file the claim for Michael's extraction yesterday.
</div> </div>
<div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative"> <div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative">
<div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" /> <div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" />
<span className="text-accent font-medium mb-1 block">Assistant</span> <span className="text-accent font-medium mb-1 block">AI Assistant</span>
Claim filed for Michael (D7140) to MetLife. Sent at 9:14 AM. We prefer John to come at 10am this Thursday because of a patient cancellation. Do you allow me to call John?
<button className="mt-3 bg-white text-primary font-semibold text-xs px-4 py-2 rounded-full hover:bg-accent hover:text-primary transition-colors block">
Call John
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -39,7 +39,7 @@ export function Navbar() {
className="rounded-full bg-primary text-primary-foreground hover:bg-primary/90 px-6 h-10" className="rounded-full bg-primary text-primary-foreground hover:bg-primary/90 px-6 h-10"
data-testid="nav-get-started" data-testid="nav-get-started"
> >
Get Started Free Sales: 123-456-7890
</Button> </Button>
</div> </div>
</div> </div>
+3
View File
@@ -158,3 +158,6 @@ overrides:
# drizzle-kit uses esbuild internally on an older version that's vulnerable, this overrides it # drizzle-kit uses esbuild internally on an older version that's vulnerable, this overrides it
"@esbuild-kit/esm-loader": "npm:tsx@^4.21.0" "@esbuild-kit/esm-loader": "npm:tsx@^4.21.0"
esbuild: "0.27.3" esbuild: "0.27.3"
allowBuilds:
esbuild: true