feat: Add Glassy Divider component and details page

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jaishree2310 and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/App.tsx

@@ -50,6 +50,8 @@ import AdaptiveBackgroundIntelligenceDemo from './components/AdaptiveBackgroundI
 import { TermsOfUse } from './components/TermsOfUse';
 import AnimatedCursorPage from './components/AnimatedCursorPage';
 import AnimatedCursor from './components/AnimatedCursor';
+import FileUploadDetailsPage from './components/GlassyFileUpload';
+import DividerDetailsPage from './components/DividerDetailsPage';
 
 import Stories from './components/Stories';
 // import Register from './login/SignUp';
@@ -148,6 +150,7 @@ const App: React.FC = () => {
               <Route path='/animated-cursor' element={<AnimatedCursorPage />} />
               <Route path='/' element={<GlassyUILandingPage />} />
               <Route path='/components' element={<GlassyUIComponentsPage />} />
+              <Route path='/divider-details' element={<DividerDetailsPage />} />
               <Route path='/toast-page' element={<ToastPage />} />
               <Route path='/button-details' element={<ButtonDetailsPage />} />
               <Route path='/card-details' element={<CardDetailsPage />} />
@@ -219,6 +222,10 @@ const App: React.FC = () => {
               />
               <Route path='/termsOfUse' element={<TermsOfUse />} />
 
+              <Route
+                path='/file-upload-details'
+                element={<FileUploadDetailsPage />}
+              />
               <Route path='/stories' element={<Stories />} />
 
               {/* <Route path='/signup' element={<Register />} /> */}

src/components/DividerDetailsPage.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Copy, Check } from 'lucide-react';
+import PageShell from './PageShell';
+import GlassDivider from './GlassDivider';
+
+const DividerDetailsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>(
+    {},
+  );
+
+  const getGlassyClasses = (opacity = 10) => {
+    return `backdrop-filter backdrop-blur-lg bg-white bg-opacity-${opacity} 
+  border border-white border-opacity-20 rounded-lg shadow-lg transition-all duration-300`;
+  };
+
+  const copyToClipboard = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedStates(prev => ({ ...prev, [key]: true }));
+      setTimeout(
+        () => setCopiedStates(prev => ({ ...prev, [key]: false })),
+        2000,
+      );
+    });
+  };
+
+  const CopyButton: React.FC<{ text: string; codeKey: string }> = ({
+    text,
+    codeKey,
+  }) => (
+    <button
+      onClick={() => copyToClipboard(text, codeKey)}
+      className={`absolute top-4 right-4 ${getGlassyClasses()} p-2 hover:bg-opacity-20 text-white`}
+      title='Copy to clipboard'
+    >
+      {copiedStates[codeKey] ? <Check size={20} /> : <Copy size={20} />}
+    </button>
+  );
+
+  const handleBackToComponents = () => {
+    navigate('/components');
+  };
+
+  const basicUsageCode = `<GlassDivider />`;
+
+  const labelUsageCode = `<GlassDivider label="OR" />`;
+
+  const verticalUsageCode = `<div className="flex h-32 items-center">
+  <div className="text-white">Left Side</div>
+  <GlassDivider orientation="vertical" />
+  <div className="text-white">Right Side</div>
+</div>`;
+
+  const customStyleCode = `<GlassDivider 
+  className="border-dashed" 
+  style={{ margin: '3rem 0', opacity: 0.8 }} 
+/>`;
+
+  return (
+    <PageShell>
+      <nav className='mb-8 flex items-center justify-between relative z-10'>
+        <button
+          onClick={handleBackToComponents}
+          className={`flex items-center ${getGlassyClasses()} px-4 py-2 hover:bg-opacity-20 text-white`}
+        >
+          <ArrowLeft size={20} className='mr-2' />
+          Back to Components
+        </button>
+      </nav>
+
+      <h1 className='text-6xl font-bold mb-8 text-white relative z-10'>
+        Glassmorphic Divider Component
+      </h1>
+      <p className='text-xl mb-8 text-gray-100'>
+        A glassmorphism-styled separator component to visually divide content
+        sections.
+      </p>
+
+      {/* Horizontal Divider Section */}
+      <section
+        className={`${getGlassyClasses(20)} p-6 mb-14 text-white relative z-10`}
+      >
+        <h2 className='text-3xl font-bold mb-4'>
+          Horizontal Divider (Default)
+        </h2>
+        <div
+          className={`${getGlassyClasses(5)} p-8 mb-4 flex flex-col justify-center min-h-[100px]`}
+        >
+          <div className='text-sm text-white/50 mb-2'>Above section</div>
+          <GlassDivider />
+          <div className='text-sm text-white/50 mt-2'>Below section</div>
+        </div>
+        <div className='relative'>
+          <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:p-2 max-sm:text-[0.55rem]'>
+            {basicUsageCode}
+          </pre>
+          <CopyButton text={basicUsageCode} codeKey='basicUsage' />
+        </div>
+      </section>
+
+      {/* Divider with Label Section */}
+      <section
+        className={`${getGlassyClasses(20)} p-6 mb-14 text-white relative z-10`}
+      >
+        <h2 className='text-3xl font-bold mb-4'>Divider with Label</h2>
+        <div
+          className={`${getGlassyClasses(5)} p-8 mb-4 flex flex-col justify-center min-h-[100px]`}
+        >
+          <div className='text-sm text-white/50 mb-2'>Section 1</div>
+          <GlassDivider label='OR' />
+          <div className='text-sm text-white/50 mt-2'>Section 2</div>
+        </div>
+        <div className='relative'>
+          <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:p-2 max-sm:text-[0.55rem]'>
+            {labelUsageCode}
+          </pre>
+          <CopyButton text={labelUsageCode} codeKey='labelUsage' />
+        </div>
+      </section>
+
+      {/* Vertical Divider Section */}
+      <section
+        className={`${getGlassyClasses(20)} p-6 mb-14 text-white relative z-10`}
+      >
+        <h2 className='text-3xl font-bold mb-4'>Vertical Divider</h2>
+        <div
+          className={`${getGlassyClasses(5)} p-8 mb-4 flex justify-center items-center h-40`}
+        >
+          <div className='text-sm text-white/70'>Feature A</div>
+          <GlassDivider orientation='vertical' />
+          <div className='text-sm text-white/70'>Feature B</div>
+          <GlassDivider orientation='vertical' />
+          <div className='text-sm text-white/70'>Feature C</div>
+        </div>
+        <div className='relative'>
+          <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:p-2 max-sm:text-[0.55rem]'>
+            {verticalUsageCode}
+          </pre>
+          <CopyButton text={verticalUsageCode} codeKey='verticalUsage' />
+        </div>
+      </section>
+
+      {/* Custom Styles Section */}
+      <section
+        className={`${getGlassyClasses(20)} p-6 mb-14 text-white relative z-10`}
+      >
+        <h2 className='text-3xl font-bold mb-4'>Custom Margin & Style</h2>
+        <div
+          className={`${getGlassyClasses(5)} p-8 mb-4 flex flex-col justify-center min-h-[100px]`}
+        >
+          <div className='text-sm text-white/50'>Custom space spacer</div>
+          <GlassDivider
+            className='border-dashed opacity-50'
+            style={{ margin: '2rem 0' }}
+          />
+          <div className='text-sm text-white/50'>End of content</div>
+        </div>
+        <div className='relative'>
+          <pre className='bg-gray-800 text-white p-6 rounded-lg overflow-x-auto whitespace-pre-wrap max-sm:p-2 max-sm:text-[0.55rem]'>
+            {customStyleCode}
+          </pre>
+          <CopyButton text={customStyleCode} codeKey='customStyle' />
+        </div>
+      </section>
+    </PageShell>
+  );
+};
+
+export default DividerDetailsPage;

src/components/GlassDivider.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+interface GlassDividerProps {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const GlassDivider: React.FC<GlassDividerProps> = ({
+  orientation = 'horizontal',
+  label,
+  className = '',
+  style,
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <div
+      role='separator'
+      aria-orientation={orientation}
+      className={`flex items-center justify-center ${
+        isHorizontal ? 'w-full my-6 flex-row' : 'h-full mx-6 flex-col'
+      } ${className}`}
+      style={style}
+    >
+      {/* First segment of the line */}
+      <div
+        className={`backdrop-filter backdrop-blur-sm bg-white/10 border-white/10 ${
+          isHorizontal
+            ? 'flex-grow h-[1px] border-t'
+            : 'flex-grow w-[1px] border-l'
+        }`}
+      />
+
+      {/* Label (if present) */}
+      {label && (
+        <span
+          className={`text-xs font-semibold text-white/80 tracking-wider backdrop-filter backdrop-blur-md bg-white/10 border border-white/20 px-3 py-1 rounded-full shadow-sm select-none ${
+            isHorizontal ? 'mx-3' : 'my-3'
+          }`}
+        >
+          {label}
+        </span>
+      )}
+
+      {/* Second segment of the line */}
+      {label && (
+        <div
+          className={`backdrop-filter backdrop-blur-sm bg-white/10 border-white/10 ${
+            isHorizontal
+              ? 'flex-grow h-[1px] border-t'
+              : 'flex-grow w-[1px] border-l'
+          }`}
+        />
+      )}
+    </div>
+  );
+};
+
+export default GlassDivider;