init

web/components/homepage/HomePage.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+import { AuroraBackground } from "../ui/aurora-background";
+
+import icon from "../../public/SurfSense.png"
+import Image from "next/image";
+import Link from "next/link";
+
+export function HomePage() {
+    return (
+        <AuroraBackground>
+            <motion.div
+                initial={{ opacity: 0.0, y: 40 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{
+                    delay: 0.3,
+                    duration: 0.8,
+                    ease: "easeInOut",
+                }}
+                className="relative flex flex-col gap-4 items-center justify-center px-4"
+            >
+                <div className="flex items-center mb-4 text-5xl font-semibold text-gray-900 dark:text-white">
+                    <Image className="w-64 h-64 rounded-full" src={icon} alt="logo" />
+                </div>
+                <div className="text-3xl md:text-7xl font-bold dark:text-white text-center">
+                    SurfSense 
+                </div>
+                {/* <div className="text-lg font-semibold dark:text-neutral-200">Beta v0.0.1</div> */}
+                <div className="font-extralight text-base md:text-4xl dark:text-neutral-200 py-4">
+                    A Knowledge Graph 🧠 Brain 🧠 for World Wide Web Surfers.
+                </div>
+                <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+                    <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+                    <Link href={'/signup'} className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-8 py-4 text-2xl font-medium text-white backdrop-blur-3xl">
+                        Sign Up
+                    </Link>
+                </button>
+            </motion.div>
+        </AuroraBackground>
+    );
+}