Completed the homepage / Release of v1.0

package-lock.json

@@ -12,7 +12,8 @@
         "animate.css": "^4.1.1",
         "next": "16.2.1",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "typed.js": "^3.0.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -6363,6 +6364,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed.js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-3.0.0.tgz",
+      "integrity": "sha512-X4pjf0E7riZBo6j3NS21/7cJJ20osSOtD1OxlRoKfFU3GsdPuSpWlFcIKWf0k8uoKwBBrPuHGx+fKeU6GzRcKg==",
+      "license": "GPL-3.0"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",

package.json

@@ -13,7 +13,8 @@
     "animate.css": "^4.1.1",
     "next": "16.2.1",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "typed.js": "^3.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/globals.css

@@ -58,3 +58,16 @@
   height:100%;
   width: 100%;
 }
+
+@keyframes ecgMove {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-ecg {
+  animation: ecgMove 6s linear infinite;
+}

src/app/layout.tsx

@@ -16,6 +16,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
+      data-theme="dark"
     >
       <body className="min-h-full flex flex-col">{children}</body>
       <Analytics/>

src/app/page.tsx

@@ -1,9 +1,108 @@
 "use client"
+import { useEffect, useRef } from "react";
+import Typed from "typed.js";
+import Link from "next/link";
 
 export default function Home(){
+    const el = useRef(null);
+    useEffect(() => {
+      const typed = new Typed(el.current, {
+        strings: ['A minimal friction', 'A zero-login'],
+        typeSpeed: 50,
+        loop:true
+      });
+      return () => {
+        typed.destroy(); // cleanup (IMPORTANT)
+      };
+    }, []);
+    
     return(
       <>
+        <div>
+          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[90vw] max-w-[500px] h-[300px] bg-red-500/20 blur-3xl"></div>
+          <div className="hero relative overflow-hidden bg-[radial-gradient(#1f2937_1px,transparent_1px)] bg-[size:20px_20px] min-h-screen">
+             <div className="absolute inset-0 opacity-20 bg-center bg-no-repeat bg-contain">
               
+             </div>
+             <svg
+    className="absolute inset-0 w-[200%] h-full scale-250 md:scale-100 opacity-30 animate-ecg"
+    viewBox="0 0 1000 100"
+    fill="none"
+    stroke="#ef4444"
+  >
+    <path
+  d="M0 50 L80 50 L100 20 L120 80 L140 50 L220 50 L240 30 L260 70 L280 50 L360 50 L380 20 L400 80 L420 50 L500 50 L580 50 L600 20 L620 80 L640 50 L720 50 L740 30 L760 70 L780 50 L860 50 L880 20 L900 80 L920 50 L1000 50"
+  stroke="#ef4444"
+  className="md:stroke-[2] stroke-[3]"
+  strokeWidth="2"
+/>
+  </svg>
+            <div className="hero-content text-center">
+              <div className="max-w-md">
+                <h1 className="text-5xl font-bold text-red-500">CalcForCardiac: <span
+  ref={el}
+  className="bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text text-transparent"
+/></h1><h1 className="text-5xl font-bold text-blue-500"> calculator</h1>
+                <p className="py-6">
+                  When every second counts, clarity matters. CalcForCardiac gives you instant, precise cardiac calculations — no clutter, no login, just what you need.
+                </p>
+                <p className="text-sm text-gray-500 mt-3">
+                  No login required • Free • Instant results
+                </p>
+                <div className="flex gap-4 justify-center mt-6 overflow-hidden">
+                    <Link href={"/calculators"}><button className="btn bg-[#ef4444] hover:bg-[#bb0707]">Get Started</button></Link>
+                    <Link href={"https://github.com/SomeTroller77/calcforcardiac"}><button className="btn bg-[#0d1117] hover:bg-[#000]">Github Repo</button></Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="max-w-6xl mx-auto px-4 mt-1">
+            <h2 className="text-2xl sm:text-3xl font-bold text-center mb-2 tracking-tight text-white">
+              Start with What You Need
+            </h2>
+            <p className="text-sm sm:text-base text-gray-400 text-center mb-10">
+              Fast and reliable medical calculators — ready when you are.
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-20">
+              <div className="card card-border bg-[#161b22] border border-gray-800 rounded-xl p-5 hover:border-red-500 hover:shadow-lg hover:shadow-red-500/10 transition">
+                <div className="card-body">
+                  <h2 className="card-title">Cockcroft Gault Equation</h2>
+                  <p>Takes age, weight, creatinine and gender as input and returns Creatinine Clearance</p>
+                  <div className="card-actions justify-end">
+                    <Link href={"/calculate/cockcroft-gault"}><button className="btn bg-[#ef4444] hover:bg-[#bb0707]">Calculate</button></Link>
+                  </div>
+                </div>
+              </div>
+              <div className="card card-border bg-[#161b22] border border-gray-800 rounded-xl p-5 hover:border-red-500 hover:shadow-lg hover:shadow-red-500/10 transition">
+                <div className="card-body">
+                  <h2 className="card-title">IMPACT Score</h2>
+                  <p>A risk assessment score used to calculate 1-year mortality prediction rate after a cardiac transplant by using 12 parameters</p>
+                  <div className="card-actions justify-end">
+                    <Link href={"/calculate/impact-score"}><button className="btn bg-[#ef4444] hover:bg-[#bb0707]">Calculate</button></Link>
+                  </div>
+                </div>
+              </div>
+              <div className="card card-border bg-[#161b22] border border-gray-800 rounded-xl p-5 hover:border-red-500 hover:shadow-lg hover:shadow-red-500/10 transition">
+                <div className="card-body">
+                  <h2 className="card-title">TIMI Score</h2>
+                  <p>a clinical risk assessment tool used to predict 14-day mortality and ischemic events in patients with UA/NSTEMI (unstable angina/non-ST-elevation myocardial infarction)</p>
+                  <div className="card-actions justify-end">
+                    <Link href={"/calculate/timi-score"}><button className="btn bg-[#ef4444] hover:bg-[#bb0707]">Calculate</button></Link>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+          <br/>
+          <br/>
+          <br/>
+          <Link href={"https://github.com/SomeTroller77"}>
+            <p className="text-xs text-gray-500 mt-16 mb-8 text-center">
+              Built with ❤️ by Saksham Vitwekar
+            </p>
+          </Link>
+        </div>
       </>
     );
 }