Improved Input + Feature Section click + Twitter link + Footer link arrow

10 files changed, 193 insertions, 93 deletions

diff --git a/apps/web-v2/src/app/(landing)/Cta.tsx b/apps/web-v2/src/app/(landing)/Cta.tsx
index ec726634..be99bf99 100644
--- a/apps/web-v2/src/app/(landing)/Cta.tsx
+++ b/apps/web-v2/src/app/(landing)/Cta.tsx
@@ -6,7 +6,7 @@ function Cta() {
   return (
     <section
       id="try"
-      className="relative mb-32 mt-40  flex w-full flex-col items-center justify-center gap-8"
+      className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8"
     >
       <div className="absolute left-0 z-[-1] h-full w-full">
         {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
diff --git a/apps/web-v2/src/app/(landing)/EmailInput.tsx b/apps/web-v2/src/app/(landing)/EmailInput.tsx
index 2adfa922..3e4f44a0 100644
--- a/apps/web-v2/src/app/(landing)/EmailInput.tsx
+++ b/apps/web-v2/src/app/(landing)/EmailInput.tsx
@@ -39,7 +39,7 @@ function EmailInput() {
         <input
           type="email"
           name="email"
-          className={`transition-width flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 duration-300 focus:outline-none`}
+          className={`transition-width flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 duration-300 focus:outline-none outline-none`}
           placeholder="Enter your email"
           value={email}
           required
diff --git a/apps/web-v2/src/app/(landing)/FeatureContent.tsx b/apps/web-v2/src/app/(landing)/FeatureContent.tsx
new file mode 100644
index 00000000..ff9f5f55
--- /dev/null
+++ b/apps/web-v2/src/app/(landing)/FeatureContent.tsx
@@ -0,0 +1,59 @@
+export const features = [
+  {
+    title: "For Researchers",
+    description:
+      "Add content to collections and use it as a knowledge base for your research, link multiple sources together to get a better understanding of the topic.",
+    svg: <ResearchSvg />
+  },
+  {
+    title: "For Content writers",
+    description:
+      "Save time and use the writing assistant to generate content based on your own saved collections and sources.",
+      svg: <ContentSvg />
+  },
+  {
+    title: "For Developers",
+    description:
+      "Talk to documentation websites, code snippets, etc. so you never have to google the same thing a hundred times.",
+    svg: <DeveloperSvg />
+  },
+];
+
+function ResearchSvg() {
+  return (
+    <svg
+      className="mr-3 shrink-0 fill-zinc-400"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+    >
+      <path d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z" />
+    </svg>
+  );
+}
+
+function ContentSvg() {
+  return (
+    <svg
+      className="mr-3 shrink-0 fill-zinc-400"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+    >
+      <path d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z" />
+    </svg>
+  );
+}
+
+function DeveloperSvg() {
+  return (
+    <svg
+      className="mr-3 shrink-0 fill-zinc-400"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+    >
+      <path d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z" />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/apps/web-v2/src/app/(landing)/Features.tsx b/apps/web-v2/src/app/(landing)/Features.tsx
index 675ea515..c79f282f 100644
--- a/apps/web-v2/src/app/(landing)/Features.tsx
+++ b/apps/web-v2/src/app/(landing)/Features.tsx
@@ -6,8 +6,11 @@ import Image from "next/image";
 import CarouselIllustration from "@/../public/images/carousel-illustration-01.png";
 import { X } from "@/utils/icons";
 
+import { features } from "./FeatureContent";
+import { CardClick } from "@/components/ui/cardClick";
+
 export default function Features() {
-  const [tab, setTab] = useState<number>(1);
+  const [tab, setTab] = useState<number>(0);
 
   const tabs = useRef<HTMLDivElement>(null);
 
@@ -16,6 +19,10 @@ export default function Features() {
       tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`;
   };
 
+  function handleClickIndex(tab:number){
+    setTab(tab);
+  }
+
   useEffect(() => {
     heightFix();
   }, []);
@@ -46,82 +53,7 @@ export default function Features() {
               </div>
               {/* Tabs buttons */}
               <div className="mb-8 space-y-2 md:mb-0">
-                <button
-                  className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 1 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setTab(1);
-                  }}
-                >
-                  <svg
-                    className="mr-3 shrink-0 fill-zinc-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                  >
-                    <path d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z" />
-                  </svg>
-                  <div>
-                    <div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
-                      For Researchers
-                    </div>
-                    <div className="text-zinc-500">
-                      Add content to collections and use it as a knowledge base
-                      for your research, link multiple sources together to get a
-                      better understanding of the topic.
-                    </div>
-                  </div>
-                </button>
-                <button
-                  className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 2 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setTab(2);
-                  }}
-                >
-                  <svg
-                    className="mr-3 shrink-0 fill-zinc-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                  >
-                    <path d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z" />
-                  </svg>
-                  <div>
-                    <div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
-                      For Content writers
-                    </div>
-                    <div className="text-zinc-500">
-                      Save time and use the writing assistant to generate
-                      content based on your own saved collections and sources.
-                    </div>
-                  </div>
-                </button>
-                <button
-                  className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 3 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setTab(3);
-                  }}
-                >
-                  <svg
-                    className="mr-3 shrink-0 fill-zinc-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                  >
-                    <path d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z" />
-                  </svg>
-                  <div>
-                    <div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
-                      For Developers
-                    </div>
-                    <div className="text-zinc-500">
-                      Talk to documentation websites, code snippets, etc. so you
-                      never have to google the same thing a hundred times.
-                    </div>
-                  </div>
-                </button>
+                <CardClick tab={tab}  items={features} handleClickIndex={handleClickIndex} />
               </div>
             </div>
 
@@ -130,7 +62,7 @@ export default function Features() {
               <div className="relative flex flex-col" ref={tabs}>
                 {/* Item 1 */}
                 <Transition
-                  show={tab === 1}
+                  show={tab === 0}
                   enter="transition ease-in-out duration-700 transform order-first"
                   enterFrom="opacity-0 -translate-y-4"
                   enterTo="opacity-100 translate-y-0"
@@ -152,7 +84,7 @@ export default function Features() {
                 </Transition>
                 {/* Item 2 */}
                 <Transition
-                  show={tab === 2}
+                  show={tab === 1}
                   enter="transition ease-in-out duration-700 transform order-first"
                   enterFrom="opacity-0 -translate-y-4"
                   enterTo="opacity-100 translate-y-0"
@@ -174,7 +106,7 @@ export default function Features() {
                 </Transition>
                 {/* Item 3 */}
                 <Transition
-                  show={tab === 3}
+                  show={tab === 2}
                   enter="transition ease-in-out duration-700 transform order-first"
                   enterFrom="opacity-0 -translate-y-4"
                   enterTo="opacity-100 translate-y-0"
@@ -320,7 +252,7 @@ export default function Features() {
             </div>
           </div>
         </div>
-        
+
       </div>
     </section>
   );
diff --git a/apps/web-v2/src/app/(landing)/Hero.tsx b/apps/web-v2/src/app/(landing)/Hero.tsx
index a1840fe5..ceb5f545 100644
--- a/apps/web-v2/src/app/(landing)/Hero.tsx
+++ b/apps/web-v2/src/app/(landing)/Hero.tsx
@@ -23,11 +23,11 @@ function Hero() {
     <>
       <section className="mt-24 flex max-w-xl flex-col items-center justify-center gap-10 md:mt-56">
         <a
-          className="group/anchor flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/10 px-4 py-2 text-sm"
+          className="group/anchor pl-10 pr-6 flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/10 py-2 text-sm"
           href="https://twitter.com/supermemoryai"
           target="_blank"
         >
-          <Twitter className="h-4 w-4" /><div className="flex"> Follow us on Twitter <LinkArrow classname=" scale-y-0 group-hover/anchor:scale-y-100 origin-bottom-left transition" stroke="#ffffff" /></div>
+          <Twitter className="h-4 w-4" /><div className="flex"> Follow us on Twitter <LinkArrow classname="group-hover/anchor:opacity-100 opacity-0 transition" stroke="#ffffff" /></div>
         </a>
         <motion.h1
           {...{
diff --git a/apps/web-v2/src/app/(landing)/footer.tsx b/apps/web-v2/src/app/(landing)/footer.tsx
new file mode 100644
index 00000000..3367e483
--- /dev/null
+++ b/apps/web-v2/src/app/(landing)/footer.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import LinkArrow from './linkArrow'
+
+function Footer() {
+  return (
+    <footer className="mt-20 flex w-full items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500">
+    <p>© 2024 Supermemory.ai</p>
+    <div className="flex gap-5">
+      <a className='flex group/mail' target='_blank' href="mailto:[email protected]">Contact<LinkArrow classname='group-hover/mail:opacity-100 opacity-0 transition' stroke='#ffffff' /></a>
+      <a className='flex group/twit' target='_blank' href="https://twitter.com/supermemoryai">Twitter <LinkArrow classname='group-hover/twit:opacity-100 opacity-0 transition' stroke='#ffffff' /></a>
+      <a className='flex group/git' target='_blank' href="https://github.com/dhravya/supermemory">Github <LinkArrow stroke='#ffffff' classname='group-hover/git:opacity-100 opacity-0 transition' /></a>
+    </div>
+  </footer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/apps/web-v2/src/app/(landing)/linkArrow.tsx b/apps/web-v2/src/app/(landing)/linkArrow.tsx
new file mode 100644
index 00000000..d015c9c2
--- /dev/null
+++ b/apps/web-v2/src/app/(landing)/linkArrow.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function LinkArrow({stroke, classname}: {stroke: string, classname?: string}) {
+  return (
+    <svg className={classname} width="24px" height="24px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke={stroke} stroke-width="0.792" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+  )
+}
+
+export default LinkArrow
\ No newline at end of file
diff --git a/apps/web-v2/src/app/(landing)/page.tsx b/apps/web-v2/src/app/(landing)/page.tsx
index 32c47ce3..5f0787b4 100644
--- a/apps/web-v2/src/app/(landing)/page.tsx
+++ b/apps/web-v2/src/app/(landing)/page.tsx
@@ -4,6 +4,7 @@ import Navbar from "./Navbar";
 import Cta from "./Cta";
 import { Toaster } from "@/components/ui/toaster";
 import Features from "./Features";
+import Footer from "./footer";
 
 export const runtime = "edge";
 
@@ -50,14 +51,9 @@ export default function Home() {
 
       <Toaster />
 
-      <footer className="mt-16 flex w-full items-center justify-between gap-4 border-t border-zinc-200/50 px-8 py-8 text-sm text-zinc-500">
-        <p>© 2024 Supermemory.ai</p>
-        <div className="flex gap-4">
-          <a href="mailto:[email protected]">Contact</a>
-          <a href="https://twitter.com/supermemoryai">Twitter</a>
-          <a href="https://github.com/dhravya/supermemory">Github</a>
-        </div>
-      </footer>
+      <Footer />
+
+
     </main>
   );
 }
diff --git a/apps/web-v2/src/components/ui/cardClick.tsx b/apps/web-v2/src/components/ui/cardClick.tsx
new file mode 100644
index 00000000..6c2cc364
--- /dev/null
+++ b/apps/web-v2/src/components/ui/cardClick.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+
+export const CardClick = ({
+  tab,
+  handleClickIndex,
+  items,
+}: {
+  tab: number,
+  handleClickIndex: (tab: number)=>void,
+  items: {
+    title: string;
+    description: string;
+    svg: React.ReactNode
+  }[];
+}) => {
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+      )}
+    >
+      {items.map((item, idx) => (
+        <div
+          key={idx}
+          className="group relative  block h-full w-full p-2"
+          onMouseDown={() => handleClickIndex(idx)}
+        >
+          <AnimatePresence>
+            {tab === idx && (
+              <motion.span
+                className="absolute -z-[1] inset-0 block h-full w-full rounded-3xl [background:linear-gradient(#2E2E32,#2E2E32),linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))]"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.15 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <Card title={item.title} description={item.description} svg={item.svg} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Card = ({
+  title,
+  description,
+  svg
+}: {
+  title: string;
+  description: string;
+  svg: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left`}
+    >
+      {svg}
+      <div>
+        <div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
+          {title}
+        </div>
+        <div className="text-zinc-500">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web-v2/src/utils/cn.ts b/apps/web-v2/src/utils/cn.ts
new file mode 100644
index 00000000..df73a557
--- /dev/null
+++ b/apps/web-v2/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}