@@ -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+ "{ quote } "
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"
0 commit comments