+
);
-};
+}
diff --git a/src/components/hero-section.tsx b/src/components/hero-section.tsx
deleted file mode 100644
index 1fa43bd..0000000
--- a/src/components/hero-section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { LandingSocialProof } from "./social-proof/landing-social-proof";
-import Link from "next/link";
-import Image from "next/image";
-import PreviewSection from "./preview-section";
-export const avatarItems = [
- {
- imageSrc: "/users/6.png",
- name: "Khang Nguyen Duy",
- },
- {
- imageSrc: "/users/3.png",
- name: "Stan Olery",
- },
- {
- imageSrc: "/users/4.jpeg",
- name: "Julio Santirachi",
- },
- {
- imageSrc: "/users/8.jpeg",
- name: "Cristian Andrei Grigore",
- },
-];
-
-export let HeroSection = () => {
- return (
-
-
-
-
-
- Reduce Mindless Browsing By 10x
-
-
- Get out of the loop and stay mindful when accessing distracting
- websites. No more wasting time for hours unconsciously.
- {/* Stop mindless browsing and take control of your time online */}
-
-
-
-
-
-
-
-
- );
-};
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
deleted file mode 100644
index 5809652..0000000
--- a/src/components/navbar.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export const Navbar = () => {
- const [isScrolled, setIsScrolled] = useState(false);
- const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
- useEffect(() => {
- const handleScroll = () => {
- setIsScrolled(window.scrollY > 10);
- };
- window.addEventListener("scroll", handleScroll);
- return () => window.removeEventListener("scroll", handleScroll);
- }, []);
-
- const navItems = [{ name: "PRO Version", href: "/pro" }];
-
- return (
-
- );
-};
diff --git a/src/components/objections.tsx b/src/components/objections.tsx
deleted file mode 100644
index d8eda2c..0000000
--- a/src/components/objections.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { FeaturesBento } from "./features-bento";
-import {
- PopiconsHomeLine,
- PopiconsUserCheckDuotone,
- PopiconsCirclePauseDuotone,
- PopiconsCalendarTimeDuotone,
-} from "@popicons/react";
-import Image from "next/image";
-
-const items = [
- {
- title: "Structured Breaks",
- description:
- "When you visit a distracting site, focusmode presents a calming intervention. Breathe, stretch, and decide mindfully how long you want to spend there.",
- header:
,
- className: "md:col-span-2",
- // icon:
,
- },
- {
- title: "Personalized Prompts",
- description:
- "Create your own intervention messages that resonate with you. Choose break durations that fit your workflow. focusmode adapts to you.",
- header:
,
- className: "md:col-span-1",
- // icon:
,
- },
- {
- title: "Automatic Scheduling",
- description:
- "Set focusmode to activate during your most productive hours, and turn off when it's time to unwind. Strike the perfect balance effortlessly.",
- header:
,
- className: "md:col-span-1",
- // icon:
,
- },
-];
-
-export let Objections = () => {
- return (
-
-
-
- {/*
*/}
-
-
- We know what you're thinking
-
-
- Another productivity tool that promises the world but doesn't
- deliver. focusmode is different.
-
-
- It's not about blocking sites entirely, but helping you be
- more intentional with your browsing. With customizable
- interventions and breaks, focusmode puts you back in the
- driver's seat.
-
-
-
-
- );
-};
diff --git a/src/components/preview-section.tsx b/src/components/preview-section.tsx
deleted file mode 100644
index 89c0b0d..0000000
--- a/src/components/preview-section.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useMemo, useState } from "react";
-import Video from "next-video";
-import slideInOut from "/videos/1 Clip 2.mp4";
-import holdToComplete from "/videos/0 Clip 1.mp4";
-import pixel from "/videos/2 Clip 3.mp4";
-
-const tabs = ["Slide In Out", "Hold to Complete", "Pixel"];
-
-interface TabProps {
- text: string;
- selected: boolean;
- setSelected: (text: string) => void;
-}
-
-const Tab = ({ text, selected, setSelected }: TabProps) => {
- return (
-
- );
-};
-
-const ButtonShapeTabs = () => {
- const [selected, setSelected] = useState
(tabs[0]);
-
- const renderVideo = useMemo(() => {
- const videoProps = {
- autoplay: true,
- controls: false,
- muted: true,
- loop: true,
- width: 529,
- height: 298,
- quality: "auto",
- preload: "none" as const,
- };
-
- let src = "";
- let id = "";
-
- if (selected === "Slide In Out") {
- src = "slide";
- id = "slide-video";
- } else if (selected === "Hold to Complete") {
- src = "hold";
- id = "hold-video";
- } else if (selected === "Pixel") {
- src = "pixel";
- id = "pixel-video";
- }
-
- return (
-
-
-
- ;
-
-
- );
- }, [selected]);
-
- return (
-
-
- {tabs.map((tab) => (
-
- ))}
-
- {renderVideo}
-
-
Access Token Test
-
Current Access Token: {accessToken}
-
-
-
-
- Don't take it from us
+
+
+
+
+ Testimonials
+
+
+ Loved by 15,000+ users
-
- See what others have to say.
+
+ See what people are saying on the Chrome Web Store.
+
+
+
+
+
+
+
);
-};
+}
diff --git a/src/components/ui/infinite-moving-cards.tsx b/src/components/ui/infinite-moving-cards.tsx
index ab26a39..de9af46 100644
--- a/src/components/ui/infinite-moving-cards.tsx
+++ b/src/components/ui/infinite-moving-cards.tsx
@@ -87,10 +87,10 @@ export const InfiniteMovingCards = ({
>
{items.map((item, idx) => (
@@ -99,12 +99,12 @@ export const InfiniteMovingCards = ({
aria-hidden="true"
className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
>
-
+
{item.quote}
-
+
{item.name}
diff --git a/src/components/v3/analytics-streaks.tsx b/src/components/v3/analytics-streaks.tsx
new file mode 100644
index 0000000..c37b424
--- /dev/null
+++ b/src/components/v3/analytics-streaks.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { BarChart3, Flame, Calendar, Shield } from "lucide-react";
+
+const stats = [
+ {
+ icon: Flame,
+ label: "Current Streak",
+ description: "Track consecutive days staying within your limits",
+ },
+ {
+ icon: Calendar,
+ label: "Growth Calendar",
+ description: "Visual 7/30/90-day calendar showing mindful vs missed days",
+ },
+ {
+ icon: BarChart3,
+ label: "Usage Charts",
+ description: "Top 10 domains by time spent with detailed breakdowns",
+ },
+ {
+ icon: Shield,
+ label: "Blocks Prevented",
+ description: "Running counter of how many times FocusMode intervened",
+ },
+];
+
+export function AnalyticsStreaks() {
+ return (
+
+
+
+
+
+
+ Analytics & Streaks
+
+
+ Track your progress, build momentum
+
+
+ A built-in screen time tracker for Chrome that gamifies your
+ focus journey. Watch your streak grow, see which sites consume
+ your time, and celebrate your consistency.
+
+
+
+
+
+
{stat.label}
+
{stat.description}
+
+
+
+ Dashboard screenshot placeholder
+
+
+
+
+ Compare
+
+ Why FocusMode?
+
+
+ The only website blocker that uses mindful interventions instead of
+ brute-force blocking.
+
+
+
+
+
+
+
+ | Feature |
+ {competitors.map((c) => (
+
+ {c.name}
+ |
+ ))}
+
+
+
+ {rows.map((row) => (
+
+ | {row.label} |
+ {competitors.map((c) => (
+
+
+ |
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start Browsing Mindfully
+
+
+ Join 15,000+ people who've reclaimed their focus. Install
+ FocusMode for free and experience the difference gentle
+ interventions make.
+
+
+
+
+
+
+
+
+
+
+ FAQ
+
+
+ Frequently asked questions
+
+
+ Everything you need to know about FocusMode.
+
+
+
+
+ {faqs.map((faq, index) => (
+
+
+
+
+ ))}
+
+
+
+ Features
+
+ Built for real focus habits
+
+
+ A digital wellness Chrome extension with the tools you need to build
+ lasting focus habits — not just block websites.
+
+
+
+
+ {features.map((feature, index) => (
+
+
+
+
+
+
+
{feature.title}
+
+
{feature.description}
+
+ {feature.highlights.map((highlight) => (
+ -
+
+ {highlight}
+
+ ))}
+
+
+
+ Screenshot placeholder
+
+
+ ))}
+
+
+
+
+
+
+ v3.0 — Complete Rewrite
+
+
+
+
+
+
+ Block Distracting Websites{" "}
+ Mindfully
+
+
+
+ The Chrome extension that helps you reduce screen time without going
+ cold turkey. Gentle interventions, not hard blocks — used by{" "}
+ 15,000+ people to browse with intention.
+
+
+
+
+
+
+
+
+
+ {["/users/6.png", "/users/3.png", "/users/4.jpeg", "/users/8.jpeg"].map((src, i) => (
+
+ ))}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ 4.7/5 from 15k+ users
+
+
+
+
+
+ How It Works
+
+
+ Mindful browsing in three steps
+
+
+ FocusMode doesn't lock you out. It creates a moment of awareness so
+ you can make intentional choices about your screen time.
+
+
+
+
+ {steps.map((step, index) => (
+
+
+
+
+
+ {index + 1}
+
{step.title}
+
+ {step.description}
+
+ ))}
+
+
+
+
+ 4 Intervention Types
+
+
+ Friction, not force
+
+
+ Each intervention uses a different psychological approach to prevent
+ habituation. Rotate between them to stay mindful.
+
+
+
+
+ {interventions.map((item) => (
+
+
+
+
+
+
+
{item.name}
+
{item.tagline}
+
+
{item.description}
+
+ ))}
+
+
+
+ Pricing
+
+ Free to start, one-time to unlock
+
+
+ No subscriptions. No recurring fees. Pay once, own it forever.
+
+
+
+
+ {/* Free tier */}
+
+
+
Free
+
+ $0
+ forever
+
+
+ {features.map((f) => (
+ -
+ {f.name}
+
+
+ ))}
+
+
+
+ {/* PRO tier */}
+
+
+
+ LIFETIME
+
+
+
+
PRO
+
+ $20.99
+ one-time
+
+
+ Not $8.99/month — pay once, own it forever
+
+
+ {features.map((f) => (
+ -
+ {f.name}
+
+
+ ))}
+
+
+
+