Skip to content

Add how-it-works in landing page #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yujonglee merged 1 commit into from
Dec 18, 2024
Merged

Add how-it-works in landing page #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 117 additions & 36 deletions apps/web/src/components/hero/Demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,125 @@
"use client";

import { useState } from "react";
import {
RiPencilFill,
RiArrowRightSLine,
RiFlashlightFill,
} from "@remixicon/react";

export default function Demo() {
const [isRecording, setIsRecording] = useState(true);
const rawNote =
"Meeting with Design Team\n\nDiscussed new feature implementation\nNeed to follow up with John re: UI specs\n\nDeadline set for next Friday\n\nAction items:\n- Create wireframes\n- Schedule follow-up";

return (
<div className="overflow-hidden rounded-lg shadow-lg flex relative flex-col flex-1 h-full backdrop-blur-lg font-basic bg-white border-0.5 @container w-full">
<div className="flex relative flex-none gap-4 items-center pr-1 pl-2 py-[3%] md:h-8">
<div className="flex items-center w-full space-x-[3%] md:space-x-2">
<div className="rounded-full aspect-square bg-red-400 border-red-500 w-[3%] md:w-2.5 md:h-2.5"></div>
<div className="rounded-full aspect-square bg-yellow-300 border-yellow-400 w-[3%] md:w-2.5 md:h-2.5"></div>
<div className="rounded-full aspect-square bg-green-400 border-green-500 w-[3%] md:w-2.5 md:h-2.5"></div>
<div className="flex gap-8 items-center justify-center w-full mt-20">
{/* Before - Raw Note Taking */}
<div className="w-[400px] bg-white rounded-xl shadow-2xl overflow-hidden">
{/* Window Controls */}
<div className="bg-gray-100 px-4 py-2 border-b flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
</div>

{/* Editor Title */}
<div className="border-b px-6 py-3 bg-gray-50/50">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-800">
Meeting with Design Team
</span>
<span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded flex items-center gap-1">
<RiPencilFill className="w-3 h-3" />
Draft
</span>
</div>
</div>

{/* Note Content */}
<div className="p-6 relative bg-white h-[400px]">
<div className="text-sm whitespace-pre-wrap text-left h-full overflow-y-auto">
{rawNote}
<span className="inline-block w-0.5 h-5 bg-black animate-[blink_1s_steps(1)_infinite] ml-0.5" />
</div>

{/* Recording Indicator */}
<div className="absolute top-4 right-4 flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-red-500 animate-record-blink" />
<span className="text-xs text-red-500">Recording</span>
</div>
</div>
</div>
<div className="relative flex-1 bg-white px-[5%] md:px-8 pt-4 aspect-[4/4.9] opacity-70 md:opacity-100">
<div
className="relative w-full"
style={{ aspectRatio: "300 / 240" }}
></div>
<div className="flex absolute bottom-4 left-1/2 z-10 gap-3 items-center p-2.5 bg-white rounded-full border shadow-lg transition-all transform -translate-x-1/2 origin-bottom scale-75 md:scale-100">
<div className="flex justify-center items-center w-6 h-6 gap-[3px]">
<div
className="bg-green-500 rounded-full transition-all duration-300 ease-in-out w-[3px]"
style={{ height: "51%" }}
></div>
<div
className="bg-green-500 rounded-full transition-all duration-300 ease-in-out w-[3px]"
style={{ height: "70%" }}
></div>
<div
className="bg-green-500 rounded-full transition-all duration-300 ease-in-out w-[3px]"
style={{ height: "51%" }}
></div>

<RiArrowRightSLine className="w-8 h-8 text-gray-500" />

{/* After - Enhanced Note */}
<div className="w-[400px] bg-white rounded-xl shadow-2xl overflow-hidden">
{/* Window Controls */}
<div className="bg-gray-100 px-4 py-2 border-b flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
</div>

{/* Editor Title */}
<div className="border-b px-6 py-3 bg-gray-50/50">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-800">
Meeting with Design Team
</span>
<span className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded flex items-center gap-1">
<RiFlashlightFill className="w-3 h-3" />
Hypercharged
</span>
</div>
<div className="opacity-100 transform-none">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
className="mr-1 w-5 h-5 text-tertiary"
>
<path d="M5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.5A2.25 2.25 0 0 0 17 14.75v-9.5A2.25 2.25 0 0 0 14.75 3h-9.5Z"></path>
</svg>
</div>

{/* Enhanced Note Content */}
<div className="p-6 bg-white h-[400px]">
<div className="prose prose-sm max-w-none text-left h-full overflow-y-auto">
<h1 className="text-xl font-semibold mb-4">
Meeting with Design Team
</h1>
<div className="space-y-4">
<p className="text-gray-700">
Discussed new feature implementation for the upcoming product
release. The team expressed enthusiasm about the innovative
approach. Need to follow up with John regarding UI
specifications and design system integration.
</p>

<div className="bg-yellow-50 p-3 rounded-lg space-y-2">
<p className="font-medium text-yellow-800">
Deadline: Next Friday
</p>
<p className="text-sm text-yellow-700">
Team agreed to prioritize this feature for Q1 roadmap
</p>
</div>

<div className="bg-blue-50 p-3 rounded-lg">
<p className="text-sm text-blue-700">
<span className="font-medium">Key Points:</span> Design system
consistency, accessibility requirements, mobile-first approach
</p>
</div>

<div>
<h2 className="font-medium mb-2">Action Items:</h2>
<ul className="list-disc list-inside space-y-1 text-gray-700">
<li>Create wireframes with focus on responsive layouts</li>
<li>Schedule follow-up meeting with design system team</li>
<li>Review accessibility guidelines</li>
<li>Prepare prototype for stakeholder review</li>
</ul>
</div>

<div className="text-sm text-gray-500">
<span className="font-medium">Attendees:</span> Design Team
(Sarah, Mike, Jennifer), Product (John), Engineering Lead
</div>
</div>
</div>
</div>
</div>
Expand Down
20 changes: 16 additions & 4 deletions apps/web/src/components/sections/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,24 @@ export default function Hero() {
<strong className="text-black font-bold font-racing-sans">
HYPRNOTE
</strong>{" "}
is a smart notepad 🗒️
is a{" "}
<span className="relative whitespace-nowrap text-amber-500 font-bold">
<svg
aria-hidden="true"
viewBox="0 0 418 42"
className="absolute left-0 top-2/3 h-[0.58em] w-full fill-amber-300/70"
preserveAspectRatio="none"
>
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
</svg>
<span className="relative">smart notepad</span>
</span>
<br className="hidden sm:block" />
<span className="inline-flex mt-2 items-center">
that combines notes with
that combines <span className="font-medium mx-1.5">notes 🗒️</span>
with
<span className="inline-flex ml-2 justify-center items-center gap-2 bg-red-50/80 rounded-full px-3 py-1">
<span className="size-2 rounded-full bg-red-500 animate-pulse"></span>
<span className="size-2 rounded-full bg-red-500 animate-record-blink"></span>
<span className="font-medium text-gray-900 text-xl">
voice recordings
</span>
Expand All @@ -31,7 +43,7 @@ export default function Hero() {
to create{" "}
<SparklesText
text="powerful summaries"
className="text-2xl inline font-medium"
className="text-2xl inline font-medium text-blue-600"
colors={{ first: "#FFD700", second: "#1E90FF" }}
/>
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/ui/sparkles-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ const SparklesText: React.FC<SparklesTextProps> = ({
} else {
return { ...star, lifespan: star.lifespan - 0.1 };
}
}),
})
);
};

Expand All @@ -105,7 +105,7 @@ const SparklesText: React.FC<SparklesTextProps> = ({
}, [colors.first, colors.second]);

return (
<div
<span
className={cn("text-6xl font-bold", className)}
{...props}
style={
Expand All @@ -121,7 +121,7 @@ const SparklesText: React.FC<SparklesTextProps> = ({
))}
<strong>{text}</strong>
</span>
</div>
</span>
);
};

Expand Down
14 changes: 5 additions & 9 deletions apps/web/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,15 @@ export default {
"racing-sans": ["var(--font-racing-sans)"],
},
animation: {
pulse: "pulse var(--duration) ease-out infinite",
rainbow: "rainbow var(--speed, 2s) infinite linear",
gradient: "gradient 8s linear infinite",
marquee: "marquee var(--duration) infinite linear",
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"record-blink": "blink 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
},
keyframes: {
pulse: {
"0%, 100%": {
boxShadow: "0 0 0 0 var(--pulse-color)",
},
"50%": {
boxShadow: "0 0 0 8px var(--pulse-color)",
},
},
rainbow: {
"0%": {
"background-position": "0%",
Expand Down Expand Up @@ -126,6 +118,10 @@ export default {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
blink: {
"0%, 100%": { opacity: "1" },
"50%": { opacity: "0" },
},
},
},
components: {
Expand Down