Skip to content

Commit b50c9e7

Browse files
hoangsonwwhoangsonww
committed
fix: escape quotes in quote display for proper rendering
1 parent d409c88 commit b50c9e7

File tree

2 files changed

+108
-88
lines changed

2 files changed

+108
-88
lines changed

‎web/pages/index.tsx‎

Lines changed: 105 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,8 @@ export default function Home() {
412412
413413
.landing-hero {
414414
position: relative;
415-
background: radial-gradient(
415+
background:
416+
radial-gradient(
416417
1200px circle at 10% 10%,
417418
rgba(56, 189, 248, 0.35),
418419
transparent 55%
@@ -443,10 +444,8 @@ export default function Home() {
443444
.landing-grid {
444445
position: absolute;
445446
inset: 0;
446-
background-image: linear-gradient(
447-
rgba(148, 163, 184, 0.2) 1px,
448-
transparent 1px
449-
),
447+
background-image:
448+
linear-gradient(rgba(148, 163, 184, 0.2) 1px, transparent 1px),
450449
linear-gradient(
451450
90deg,
452451
rgba(148, 163, 184, 0.2) 1px,
@@ -536,7 +535,8 @@ export default function Home() {
536535
537536
.landing-dark {
538537
position: relative;
539-
background: radial-gradient(
538+
background:
539+
radial-gradient(
540540
1000px circle at 90% 0%,
541541
rgba(14, 116, 144, 0.45),
542542
transparent 55%
@@ -673,21 +673,28 @@ export default function Home() {
673673
</AnimatedInView>
674674
<AnimatedInView delay={0.2}>
675675
<p className="mt-6 text-lg text-white/70 md:text-xl">
676-
SymptomSync unifies symptom tracking, reminders, AI analysis,
677-
and secure reporting in one platform. Deploy confidently with
678-
AWS, Terraform, and enterprise-ready observability.
676+
SymptomSync unifies symptom tracking, reminders, AI
677+
analysis, and secure reporting in one platform. Deploy
678+
confidently with AWS, Terraform, and enterprise-ready
679+
observability.
679680
</p>
680681
</AnimatedInView>
681682
<AnimatedInView delay={0.3}>
682683
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
683-
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
684+
<motion.div
685+
whileHover={{ scale: 1.03 }}
686+
whileTap={{ scale: 0.98 }}
687+
>
684688
<Link href={user ? "/home" : "/auth/signUp"}>
685689
<Button className="h-11 rounded-full bg-white text-slate-900 hover:bg-white/90">
686690
{user ? "Continue your journey" : "Get started"}
687691
</Button>
688692
</Link>
689693
</motion.div>
690-
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
694+
<motion.div
695+
whileHover={{ scale: 1.03 }}
696+
whileTap={{ scale: 0.98 }}
697+
>
691698
<Link href="#modules">
692699
<Button
693700
variant="outline"
@@ -844,25 +851,27 @@ export default function Home() {
844851
</div>
845852
</AnimatedInView>
846853
<div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
847-
{moduleHighlights.map(({ title, description, icon: Icon }, idx) => (
848-
<AnimatedInView key={title} delay={0.05 * idx}>
849-
<Card className="group h-full border-slate-200/70 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
850-
<CardHeader className="flex flex-row items-start gap-4">
851-
<div className="rounded-2xl bg-slate-900 p-3 text-white shadow">
852-
<Icon className="h-5 w-5" />
853-
</div>
854-
<div>
855-
<CardTitle className="text-xl text-slate-900">
856-
{title}
857-
</CardTitle>
858-
</div>
859-
</CardHeader>
860-
<CardContent className="text-sm text-slate-600">
861-
{description}
862-
</CardContent>
863-
</Card>
864-
</AnimatedInView>
865-
))}
854+
{moduleHighlights.map(
855+
({ title, description, icon: Icon }, idx) => (
856+
<AnimatedInView key={title} delay={0.05 * idx}>
857+
<Card className="group h-full border-slate-200/70 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
858+
<CardHeader className="flex flex-row items-start gap-4">
859+
<div className="rounded-2xl bg-slate-900 p-3 text-white shadow">
860+
<Icon className="h-5 w-5" />
861+
</div>
862+
<div>
863+
<CardTitle className="text-xl text-slate-900">
864+
{title}
865+
</CardTitle>
866+
</div>
867+
</CardHeader>
868+
<CardContent className="text-sm text-slate-600">
869+
{description}
870+
</CardContent>
871+
</Card>
872+
</AnimatedInView>
873+
),
874+
)}
866875
</div>
867876
</div>
868877
</section>
@@ -971,38 +980,47 @@ export default function Home() {
971980
</AnimatedInView>
972981

973982
<div className="mt-12 grid gap-6 md:grid-cols-2">
974-
{infraHighlights.map(({ title, description, icon: Icon }, idx) => (
975-
<AnimatedInView key={title} delay={0.08 * idx}>
976-
<div className="flex h-full items-start gap-4 rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur">
977-
<div className="rounded-xl bg-white/10 p-3">
978-
<Icon className="h-5 w-5 text-white" />
979-
</div>
980-
<div>
981-
<h3 className="text-lg font-semibold text-white">
982-
{title}
983-
</h3>
984-
<p className="mt-2 text-sm text-white/70">
985-
{description}
986-
</p>
983+
{infraHighlights.map(
984+
({ title, description, icon: Icon }, idx) => (
985+
<AnimatedInView key={title} delay={0.08 * idx}>
986+
<div className="flex h-full items-start gap-4 rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur">
987+
<div className="rounded-xl bg-white/10 p-3">
988+
<Icon className="h-5 w-5 text-white" />
989+
</div>
990+
<div>
991+
<h3 className="text-lg font-semibold text-white">
992+
{title}
993+
</h3>
994+
<p className="mt-2 text-sm text-white/70">
995+
{description}
996+
</p>
997+
</div>
987998
</div>
988-
</div>
989-
</AnimatedInView>
990-
))}
999+
</AnimatedInView>
1000+
),
1001+
)}
9911002
</div>
9921003

9931004
<AnimatedInView delay={0.2}>
9941005
<div className="mt-10 flex flex-wrap gap-3">
995-
{["AWS", "Terraform", "Docker", "ECS", "RDS", "S3", "Ansible", "Jenkins"].map(
996-
(item) => (
997-
<Badge
998-
key={item}
999-
variant="outline"
1000-
className="border-white/20 bg-white/5 text-white"
1001-
>
1002-
{item}
1003-
</Badge>
1004-
),
1005-
)}
1006+
{[
1007+
"AWS",
1008+
"Terraform",
1009+
"Docker",
1010+
"ECS",
1011+
"RDS",
1012+
"S3",
1013+
"Ansible",
1014+
"Jenkins",
1015+
].map((item) => (
1016+
<Badge
1017+
key={item}
1018+
variant="outline"
1019+
className="border-white/20 bg-white/5 text-white"
1020+
>
1021+
{item}
1022+
</Badge>
1023+
))}
10061024
</div>
10071025
</AnimatedInView>
10081026
</div>
@@ -1042,23 +1060,25 @@ export default function Home() {
10421060
</div>
10431061
</AnimatedInView>
10441062
<div className="grid gap-5">
1045-
{securityHighlights.map(({ title, description, icon: Icon }, idx) => (
1046-
<AnimatedInView key={title} delay={0.1 * idx}>
1047-
<Card className="border-slate-200/70 bg-white/80 shadow-sm backdrop-blur">
1048-
<CardHeader className="flex flex-row items-center gap-4">
1049-
<div className="rounded-2xl bg-slate-900 p-3 text-white">
1050-
<Icon className="h-5 w-5" />
1051-
</div>
1052-
<CardTitle className="text-xl text-slate-900">
1053-
{title}
1054-
</CardTitle>
1055-
</CardHeader>
1056-
<CardContent className="text-sm text-slate-600">
1057-
{description}
1058-
</CardContent>
1059-
</Card>
1060-
</AnimatedInView>
1061-
))}
1063+
{securityHighlights.map(
1064+
({ title, description, icon: Icon }, idx) => (
1065+
<AnimatedInView key={title} delay={0.1 * idx}>
1066+
<Card className="border-slate-200/70 bg-white/80 shadow-sm backdrop-blur">
1067+
<CardHeader className="flex flex-row items-center gap-4">
1068+
<div className="rounded-2xl bg-slate-900 p-3 text-white">
1069+
<Icon className="h-5 w-5" />
1070+
</div>
1071+
<CardTitle className="text-xl text-slate-900">
1072+
{title}
1073+
</CardTitle>
1074+
</CardHeader>
1075+
<CardContent className="text-sm text-slate-600">
1076+
{description}
1077+
</CardContent>
1078+
</Card>
1079+
</AnimatedInView>
1080+
),
1081+
)}
10621082
</div>
10631083
</div>
10641084
</section>
@@ -1082,7 +1102,9 @@ export default function Home() {
10821102
<div key={name} className="px-4">
10831103
<Card className="h-full border-slate-200/70 bg-slate-50 shadow-sm">
10841104
<CardContent className="flex h-full flex-col justify-between p-6">
1085-
<p className="text-sm text-slate-600">"{quote}"</p>
1105+
<p className="text-sm text-slate-600">
1106+
&quot;{quote}&quot;
1107+
</p>
10861108
<div className="mt-6 flex items-center gap-3">
10871109
<div className="rounded-full bg-slate-900 p-2 text-white">
10881110
<Icon className="h-4 w-4" />
@@ -1141,14 +1163,20 @@ export default function Home() {
11411163
deployment tooling, and a delightful patient experience.
11421164
</p>
11431165
<div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
1144-
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
1166+
<motion.div
1167+
whileHover={{ scale: 1.03 }}
1168+
whileTap={{ scale: 0.98 }}
1169+
>
11451170
<Link href={user ? "/home" : "/auth/signUp"}>
11461171
<Button className="h-11 rounded-full bg-white text-slate-900 hover:bg-white/90">
11471172
{user ? "Open your dashboard" : "Sign up for free"}
11481173
</Button>
11491174
</Link>
11501175
</motion.div>
1151-
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
1176+
<motion.div
1177+
whileHover={{ scale: 1.03 }}
1178+
whileTap={{ scale: 0.98 }}
1179+
>
11521180
<Link href="#ai-engine">
11531181
<Button
11541182
variant="outline"

‎web/tsconfig.json‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
{
22
"compilerOptions": {
33
"target": "ES2017",
4-
"lib": [
5-
"dom",
6-
"dom.iterable",
7-
"esnext"
8-
],
4+
"lib": ["dom", "dom.iterable", "esnext"],
95
"allowJs": true,
106
"skipLibCheck": true,
117
"strict": true,
@@ -18,9 +14,7 @@
1814
"jsx": "react-jsx",
1915
"incremental": true,
2016
"paths": {
21-
"@/*": [
22-
"./*"
23-
]
17+
"@/*": ["./*"]
2418
}
2519
},
2620
"include": [
@@ -29,7 +23,5 @@
2923
"**/*.tsx",
3024
"__tests__/HomePage.test.jsx"
3125
],
32-
"exclude": [
33-
"node_modules"
34-
]
26+
"exclude": ["node_modules"]
3527
}

0 commit comments

Comments
 (0)