feat: Add shine-pulse keyframe animation to tailwind.config.ts

src/components/features.tsx

@@ -16,6 +16,7 @@ import {
 } from './ui/table';
 import { CheckIcon, XIcon } from "lucide-react";
 import { QuestionMarkIcon } from "@radix-ui/react-icons";
+import ShineBorder from "./ui/shine-border";
 
 function Checkmark() {
   return <CheckIcon className="mx-auto text-black mx-auto rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
@@ -33,18 +34,33 @@ export default function Features() {
   return (
     <div>
       {/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
-      <div className="flex flex-col lg:flex-row w-full p-5 lg:p-0">
+      <div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
-        <div className="w-full ml-4">
+        <div className="w-full flex flex-col lg:mb-24 lg:ml-4 lg:mt-24">
-          <div className="bg-pink-300 p-5 border-2 rounded-lg mb-2"></div>
+          <div className="bg-background relative flex flex-col max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
-          <div className="bg-blue-300 p-5 border-2 rounded-lg mb-2"></div>
+            <h1 className="text-5xl font-bold">Split views</h1>
+            <p className="text-muted-foreground mt-3">Split your browser into multiple views to browse multiple websites at once.</p>
+            <img src="/split-view.png" className="mt-8 w-full h-full" />
           </div>
-        <div className="w-full mr-4 mt-4">
+          <div className="bg-background relative flex flex-col mt-8 max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
-          <div className="bg-yellow-300 border-2 p-5 rounded-lg mb-2"></div>
+            <h1 className="text-5xl font-bold">Workspaces</h1>
-          <div className="bg-green-300 border-2 p-5 rounded-lg mb-2"></div>
+            <p className="text-muted-foreground mt-3">Create workspaces to keep your tabs organized and your browsing experience clutter-free.</p>
+            <img src="/workspaces.png" className="mt-8 w-full h-full" />
           </div>
         </div>
-      <div className="flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg border-2 md:shadow-xl">
+        <div className="w-full lg:mr-4 flex flex-col">
-        <h3 className="text-lg font-bold text-center">Packed with features</h3>
+          <div className="bg-background relative mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+            <h1 className="text-5xl font-bold">Profile switching</h1>
+            <p className="text-muted-foreground mt-3">Switch between profiles to keep your work and personal browsing separate.</p>
+            <img src="/profiles.png" className="mt-8 w-full h-full" />
+          </div>
+          <div className="bg-background relative mt-8 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+            <h1 className="text-5xl font-bold">Side web panels</h1>
+            <p className="text-muted-foreground mt-3">Access your favorite websites and services without leaving the page you're on.</p>
+            <img src="/sidebar.png" className="mt-8 w-full h-full" />
+          </div>
+        </div>
+      </div>
+      <ShineBorder borderWidth={2} borderRadius={12} color={['#A07CFE', '#FE8FB5', '#FFBE7B']} className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl">
         <div className="w-full p-16">
           <Table>
             <TableHeader>
@@ -68,34 +84,22 @@ export default function Features() {
                 <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
                 <TableCell className="py-3"><Cross /></TableCell>
               </TableRow>
+              <TableRow>
+                <TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell>
+                <TableCell className="py-3"><Checkmark /></TableCell>
+                <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
+                <TableCell className="py-3"><Checkmark /></TableCell>
+              </TableRow>
               <TableRow>
                 <TableCell className="py-3 font-medium">Customizable with cutting-edge features</TableCell>
                 <TableCell className="py-3"><Checkmark /></TableCell>
                 <TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
                 <TableCell className="py-3"><Cross /></TableCell>
               </TableRow>
-            <TableRow>
-              <TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell>
-              <TableCell className="py-3"><Checkmark /></TableCell>
-              <TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
-              <TableCell className="py-3"><Cross /></TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="py-3 font-medium">Updated regularly with new features and latest security patches</TableCell>
-              <TableCell className="py-3"><Checkmark /></TableCell>
-              <TableCell className="py-3 pl-4 pr-0"><Question /></TableCell>
-              <TableCell className="py-3"><Cross /></TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="py-3 font-medium">Open-source</TableCell>
-              <TableCell className="py-3"><Checkmark /></TableCell>
-              <TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
-              <TableCell className="py-3"><Checkmark /></TableCell>
-            </TableRow>
             </TableBody>
           </Table>
         </div>
-      </div>
+      </ShineBorder>
       <div className="my-40 w-full flex items-center justify-center flex-col">
         <h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
         <p className="text-muted-foreground text-center mt-3 w-1/2">Zen Browser is packed with features that will change the way you browse the web. Download it today and experience a new way to browse the web.</p>

tailwind.config.ts

@@ -63,6 +63,17 @@ const config = {
          sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
+         "shine-pulse": {
+            "0%": {
+               "background-position": "0% 0%",
+            },
+            "50%": {
+               "background-position": "100% 100%",
+            },
+            to: {
+               "background-position": "0% 0%",
+            },
+         },
          'accordion-down': {
             from: { height: '0' },
             to: { height: 'var(--radix-accordion-content-height)' },