Tailwind Plugins

Digitl-Alchemyst · Digitl-Alchemyst · commit 9594739520d2 · 2024-08-08T22:35:55.000-05:00
diff --git a/Twitter.md b/Twitter.md
@@ -0,0 +1,5 @@
+Twitter https://x.com/DocuBotAI Facebook https://www.facebook.com/DocuBotAI/ Youtube https://www.youtube.com/@DocuBot Discord https://www.docubot.app/sign-up TikTok https://www.tiktok.com/@docubot LinkedIn https://www.linkedin.com/company/docubot/
+
+Smart Notes
+
+Learning flashcards quizzes
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
     <html lang='en'>
       <ClerkProvider>
         <body
-          className={`${inter.className} flex h-screen min-h-screen flex-col overflow-hidden bg-light-500 dark:bg-dark-600`}
+          className={`${inter.className} flex h-screen min-h-screen flex-col overflow-hidden bg-light-500 dark:bg-dark-500`}
         >
           {/* <Header /> */}
           <ErrorBoundary>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,68 +1,35 @@
 import Image from 'next/image';
 
-import { FilePlus2, TextSearch, Binary, DatabaseZap, FileOutput, Eye } from 'lucide-react';
 import Footer from '@/components/Global/Footer';
-import featuresData from '@/l/util/constants.json';
-import HeroSection from '@/components/Home/HeroSection';
 
-const iconMap = {
-  FilePlus2,
-  TextSearch,
-  Binary,
-  DatabaseZap,
-  FileOutput,
-  Eye,
-};
+import HeroSection from '@/components/Home/HeroSection';
+import FeatureCards from '@/components/Cards/FeatureCards';
 
 export default function Home() {
-  const features = featuresData.features.map((feature) => ({
-    ...feature,
-    icon: iconMap[feature.icon as keyof typeof iconMap],
-  }));
-
   return (
     <>
-      <main className='flex flex-col items-center overflow-scroll overflow-x-hidden bg-gradient-to-bl from-accent3/40 to-accent2/40'>
-        <div className='flex flex-col items-center justify-center p-2 lg:p-5 xl:p-12'>
+      <main className='flex flex-col items-center overflow-scroll overflow-x-hidden bg-gradient-to-br from-accent2/40 to-accent/40 dark:from-accent3/30 dark:to-accent4/30'>
+        <div className='flex flex-col items-center justify-center space-y-15 p-2 lg:p-5 xl:p-12'>
           <HeroSection />
 
-          <div className='relavtive mb-8 overflow-hidden pt-16 md:mb-12 lg:mb-16'>
-            <div className='mx-auto max-w-7xl px-6 lg:px-8'>
+          <div className='relavtive overflow-hidden rounded-xl p-[1px] shadow-2xl'>
+            <div className='mx-auto max-w-[1500px]'>
               <Image
                 src='/screencap.webp'
                 alt='illustration'
-                width={2432}
-                height={1442}
-                className='mb-[-0%] rounded-xl shadow-2xl ring-1 ring-accent2'
+                width={1906}
+                height={910}
+                className='rounded-xl ring ring-accent2 dark:ring-accent4/60'
               />
               <div aria-hidden='true' className='relative'>
-                <div className='-x-inset-32 absolute bottom-0 w-full rounded-xl bg-gradient-to-t from-white/95 pt-[5%]' />
+                <div className='-x-inset-32 absolute bottom-0 mb-[-0%] w-full rounded-xl bg-gradient-to-t from-light-200/85 pt-[5%] dark:from-dark-700/90' />
               </div>
             </div>
           </div>
 
           {/* map thru features  */}
 
-          <div className='mb-3 md:mb-6 lg:mb-10'>
-            <dl className='gapy-y-10 mx-auto grid max-w-2xl grid-cols-1 gap-x-6 px-6 text-base text-dark-700 dark:text-light-700 sm:grid-cols-2 lg:mx-0 lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16 lg:px-8'>
-              {features.map((feature, i) => (
-                <div
-                  key={i}
-                  className='relative rounded-lg border border-accent/80 bg-light-500/30 px-2 py-4 shadow-lg shadow-dark-900/30 drop-shadow-md dark:border-accent2/80 dark:bg-dark-700/50'
-                >
-                  <dt className='inline font-semibold text-dark-800 dark:text-light-600'>
-                    <feature.icon
-                      className='absolute left-3 top-5 h-10 w-10 text-accent2 dark:text-accent'
-                      aria-hidden='true'
-                    />
-
-                    <p className='ml-16 text-lg font-medium leading-6'>{feature.title}</p>
-                  </dt>
-                  <dd className='ml-16 mt-2 text-base'>{feature.description}</dd>
-                </div>
-              ))}
-            </dl>
-          </div>
+          <FeatureCards />
         </div>
         <Footer />
       </main>
diff --git a/src/components/Cards/FeatureCards.tsx b/src/components/Cards/FeatureCards.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import featuresData from '@/l/util/constants.json';
+import { FilePlus2, TextSearch, Binary, DatabaseZap, FileOutput, Eye } from 'lucide-react';
+const iconMap = {
+  FilePlus2,
+  TextSearch,
+  Binary,
+  DatabaseZap,
+  FileOutput,
+  Eye,
+};
+
+const FeatureCards = () => {
+  const features = featuresData.features.map((feature) => ({
+    ...feature,
+    icon: iconMap[feature.icon as keyof typeof iconMap],
+  }));
+  return (
+    <div className='mb-3 md:mb-6 lg:mb-10'>
+      <dl className='mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 px-6 text-base text-dark-700 dark:text-light-700 sm:grid-cols-2 lg:mx-0 lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16 lg:px-8'>
+        {features.map((feature, i) => (
+          <div
+            key={i}
+            className='relative rounded-lg border border-accent2/80 bg-light-500/30 px-2 py-4 shadow-lg shadow-dark-900/30 drop-shadow-md dark:border-accent/80 dark:bg-dark-700/50'
+          >
+            <dt className='inline font-semibold text-dark-800 dark:text-light-600'>
+              <feature.icon
+                className='absolute left-3 top-5 h-10 w-10 text-accent4 dark:text-accent2'
+                aria-hidden='true'
+              />
+
+              <p className='ml-16 text-lg font-medium leading-6'>{feature.title}</p>
+            </dt>
+            <dd className='ml-16 mt-2 text-base'>{feature.description}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+export default FeatureCards;
diff --git a/src/components/Global/Footer.tsx b/src/components/Global/Footer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Footer = () => {
   return (
-    <footer className='dark:text-cslight-600 text-csdark-700 bottom-0 w-full bg-light-500/30 py-6 dark:bg-dark-800/40'>
+    <footer className='bottom-0 w-full bg-light-500/30 py-6 text-dark-700 shadow-black inner-glow-light-60 dark:bg-dark-700/50 dark:text-light-600 dark:inner-glow-dark-70'>
       <div className='container mx-auto flex flex-wrap justify-between'>
         <div className='mb-4 w-full sm:w-1/2 md:w-1/4 lg:w-1/6'>
           <h3 className='mb-2 text-lg font-bold'>DocuBot</h3>
diff --git a/src/components/Home/HeroSection.tsx b/src/components/Home/HeroSection.tsx
@@ -4,12 +4,16 @@ import { Button } from '@/components/ui/button';
 
 function HeroSection() {
   return (
-    <div className='mx-auto flex max-w-7xl flex-col items-center justify-center rounded-md bg-light-400 px-6 py-16 drop-shadow-xl dark:bg-dark-700 sm:py-8 lg:px-8'>
+    <div className='mx-auto flex max-w-7xl flex-col items-center justify-center rounded-xl border border-accent2/60 bg-light-500/70 px-6 py-16 shadow-xl shadow-dark-800/30 drop-shadow-xl dark:border-accent/40 dark:bg-dark-700/85 sm:py-8 lg:px-8'>
       <div className='mx-auto flex max-w-2xl flex-col items-center justify-center sm:text-center'>
-        <h4 className='text-base font-semibold leading-7 text-accent'>
-          <span className='text-xl text-accent2'>DocuBot</span> Interactive Document Companion
+        <h4 className='text-base font-semibold leading-7 text-accent2 dark:text-accent'>
+          <span className='text-2xl font-extrabold text-accent text-stroke-2 text-stroke-accent2 dark:text-accent2 dark:text-stroke-accent'>
+            DocuBot
+          </span>
+          {' - '}
+          Your Interactive Document Companion
         </h4>
-        <h1 className='my-2 text-3xl font-bold tracking-tight text-dark-800 dark:text-light-500 sm:text-4xl'>
+        <h1 className='my-2 text-3xl font-bold tracking-tight text-gradient-lime-violet sm:text-4xl'>
           Transform Your PDFs into Interactive Conversations
         </h1>
         <Image src='/logo.png' alt='logo' width={124} height={124} />
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -20,6 +20,12 @@ const config: Config = {
       flex: {
         full: '0 0 100%',
       },
+      strokeWidth: {
+        DEFAULT: '1',
+        '0': '0',
+        '1': '1',
+        '2': '2',
+      },
       screens: {
         xs: '420px',
         sm: '640px',
@@ -42,6 +48,11 @@ const config: Config = {
         '14': '14',
         '15': '15',
       },
+      gradients: {
+        'lime-violet': 'linear-gradient(to right, #5029a6 0%, #8db600 100%)',
+        'red-yellow': 'linear-gradient(to right, #f83600 0%, #f9d423 100%)',
+        // Add more gradients as needed
+      },
       colors: {
         accent: '#8db600',
         accent2: '#5029a6',
@@ -599,6 +610,115 @@ const config: Config = {
       }
       addUtilities(neonUtilities);
     }),
+    plugin(({ theme, addUtilities }: { theme: any; addUtilities: (arg0: any) => void }) => {
+      const innerGlowUtilities: Record<string, any> = {};
+      const colors = theme('colors');
+      const opacities = theme('opacity', {});
+
+      for (const colorName in colors) {
+        if (typeof colors[colorName] === 'object') {
+          const color1 = colors[colorName][600];
+          const color2 = colors[colorName][900];
+
+          // Add the regular glow without opacity
+          innerGlowUtilities[`.inner-glow-${colorName}`] = {
+            boxShadow: `inset 0 0 10px ${color1}, inset 10px 10px 40px ${color2}`,
+          };
+
+          // Add versions with opacity
+          for (const opacityName in opacities) {
+            const opacityValue = opacities[opacityName];
+
+            innerGlowUtilities[`.inner-glow-${colorName}-${opacityName}`] = {
+              boxShadow: `inset 0 0 10px ${color1}${Math.round(opacityValue * 255)
+                .toString(16)
+                .padStart(2, '0')}, inset 10px 10px 40px ${color2}${Math.round(opacityValue * 255)
+                .toString(16)
+                .padStart(2, '0')}`,
+            };
+          }
+        }
+      }
+
+      addUtilities(innerGlowUtilities);
+    }),
+
+    plugin(function ({ addUtilities, theme }) {
+      const gradients = theme('gradients', {});
+      const newUtilities: Record<string, any> = Object.keys(gradients).reduce(
+        (acc, key) => {
+          acc[`.text-gradient-${key}`] = {
+            'background-image': gradients[key as keyof typeof gradients],
+            'background-clip': 'text',
+            '-webkit-background-clip': 'text',
+            color: 'transparent',
+          };
+          return acc;
+        },
+        {} as Record<string, any>
+      );
+      addUtilities(newUtilities);
+    }),
+    plugin(function ({ addUtilities }) {
+      const newUtilities = {
+        '.frosted-glass': {
+          background: 'rgba(255, 255, 255, 0.25)',
+          'backdrop-filter': 'blur(10px)',
+          border: '1px solid rgba(255, 255, 255, 0.18)',
+          'box-shadow': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
+        },
+        '.frosted-glass-dark': {
+          background: 'rgba(0, 0, 0, 0.25)',
+          'backdrop-filter': 'blur(10px)',
+          border: '1px solid rgba(0, 0, 0, 0.18)',
+          'box-shadow': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
+        },
+      };
+
+      addUtilities(newUtilities);
+    }),
+    plugin(function ({ addUtilities, theme }) {
+      const strokeWidths = theme('strokeWidth', {
+        DEFAULT: '1',
+        '0': '0.5',
+        '1': '1',
+        '2': '2',
+      });
+
+      const colors = theme('colors', {});
+
+      // Define the type of utilities object
+      const utilities: Record<string, Record<string, string>> = {};
+
+      // Generate stroke width utilities
+      Object.entries(strokeWidths).forEach(([key, value]) => {
+        utilities[`.text-stroke${key === 'DEFAULT' ? '' : `-${key}`}`] = {
+          '-webkit-text-stroke-width': `${value}px`,
+          'paint-order': 'stroke fill',
+        };
+      });
+
+      // Generate stroke color utilities
+      Object.entries(colors as Record<string, string | Record<string, string>>).forEach(
+        ([colorName, color]) => {
+          if (typeof color === 'string') {
+            utilities[`.text-stroke-${colorName}`] = {
+              '-webkit-text-stroke-color': color,
+              'paint-order': 'stroke fill',
+            };
+          } else if (typeof color === 'object' && color !== null) {
+            Object.entries(color).forEach(([shade, shadeColor]) => {
+              utilities[`.text-stroke-${colorName}-${shade}`] = {
+                '-webkit-text-stroke-color': shadeColor,
+                'paint-order': 'stroke fill',
+              };
+            });
+          }
+        }
+      );
+
+      addUtilities(utilities);
+    }),
   ],
 };
 export default config;

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export default function RootLayout({`
`25`	`25`	`<html lang='en'>`
`26`	`26`	`<ClerkProvider>`
`27`	`27`	`<body`
`28`		- className={`${inter.className} flex h-screen min-h-screen flex-col overflow-hidden bg-light-500 dark:bg-dark-600`}
	`28`	+ className={`${inter.className} flex h-screen min-h-screen flex-col overflow-hidden bg-light-500 dark:bg-dark-500`}
`29`	`29`	`>`
`30`	`30`	`{/* <Header /> */}`
`31`	`31`	`<ErrorBoundary>`