diff --git a/landing-page/src/app/layout.tsx b/landing-page/src/app/layout.tsx index 00101506..241bc2ea 100644 --- a/landing-page/src/app/layout.tsx +++ b/landing-page/src/app/layout.tsx @@ -104,21 +104,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - {/* Three-column layout */} -
- {/* Left fixed panel */} -
-
-
- - {/* Main content */} -
{children}
- - {/* Right fixed panel */} -
-
-
-
+
{children}
diff --git a/landing-page/src/components/EverywhereFeatures.tsx b/landing-page/src/components/EverywhereFeatures.tsx index 4bc6c8c0..1e6b2067 100644 --- a/landing-page/src/components/EverywhereFeatures.tsx +++ b/landing-page/src/components/EverywhereFeatures.tsx @@ -56,61 +56,80 @@ export function EverywhereFeatures() { HOW IT WORKS

- Wherever content
gets shared. + Wherever content +
+ gets{" "} + + shared. +

-
- {track.map((card, i) => ( -
setHoveredCard(i)} - onMouseLeave={() => setHoveredCard(null)} - className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square +
+ {track.map((card, i) => ( +
setHoveredCard(i)} + onMouseLeave={() => setHoveredCard(null)} + className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square hover:-translate-y-4 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)] hover:rotate-[360deg] hover:scale-110 - ${hoveredCard === i ? 'z-10' : 'z-0'} + ${hoveredCard === i ? "z-10" : "z-0"} animate-float`} + style={{ + transformStyle: "preserve-3d", + perspective: "1000px", + animation: hoveredCard === i ? "none" : `float 3s ease-in-out ${i * 0.2}s infinite`, + }} + > + {/* Glow effect */} +
+ + {/* Shine effect */} +
- {/* Glow effect */} -
- - {/* Shine effect */} -
-
-
- - - {card.num} - - -
-

{card.title}

-

- {card.desc} -

+
-
- - Learn more - -
+ + {card.num} + + +
+

+ {card.title} +

+

+ {card.desc} +

+ +
+ + Learn more +
- ))} -
+
+ ))}
+
); -} \ No newline at end of file +} diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx index 2e0c9d63..d7b92ab3 100644 --- a/landing-page/src/components/Features.tsx +++ b/landing-page/src/components/Features.tsx @@ -18,24 +18,31 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square cursor-pointer hover:-translate-y-4 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)] hover:rotate-3 - ${rotatedCard === index ? 'rotate-[360deg] scale-110 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] dark:shadow-[16px_16px_0px_0px_rgba(255,255,255,1)]' : ''}`} + ${rotatedCard === index ? "rotate-[360deg] scale-110 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] dark:shadow-[16px_16px_0px_0px_rgba(255,255,255,1)]" : ""}`} style={{ - transformStyle: 'preserve-3d', - perspective: '1000px', + transformStyle: "preserve-3d", + perspective: "1000px", }} > - + {card.num}

{card.title}

-

+

{card.desc}

- + Learn more
@@ -47,34 +54,35 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP export function Features() { const [rotatedCard, setRotatedCard] = useState(null); - const cards = [{ - num: "01", - title: "Lightweight & Fast", - desc: "Under 10KB gzipped. Zero external dependencies. Won't slow down your website's load time or affect Core Web Vitals.", - color: "bg-[#FFCC00]", - textColor: "text-black", - }, - { - num: "02", - title: "Fully Customizable", - desc: "Every button comes with a clean default design, but can be easily themed using CSS variables to match your brand.", - color: "bg-[#00C853]", - textColor: "text-black", - }, - { - num: "03", - title: "Framework Agnostic", - desc: "Use it with Vanilla JS, React, Vue, Angular, or any modern framework. It just works.", - color: "bg-white dark:bg-neutral-900", - textColor: "text-black dark:text-white", - }, - { - num: "04", - title: "Privacy Respected", - desc: "No tracking scripts. No analytics bloat. We don't collect any data about you or your users. Ever.", - color: "bg-[#00C853]", - textColor: "text-black", - }, + const cards = [ + { + num: "01", + title: "Lightweight & Fast", + desc: "Under 10KB gzipped. Zero external dependencies. Won't slow down your website's load time or affect Core Web Vitals.", + color: "bg-[#FFCC00]", + textColor: "text-black", + }, + { + num: "02", + title: "Fully Customizable", + desc: "Every button comes with a clean default design, but can be easily themed using CSS variables to match your brand.", + color: "bg-[#00C853]", + textColor: "text-black", + }, + { + num: "03", + title: "Framework Agnostic", + desc: "Use it with Vanilla JS, React, Vue, Angular, or any modern framework. It just works.", + color: "bg-white dark:bg-neutral-900", + textColor: "text-black dark:text-white", + }, + { + num: "04", + title: "Privacy Respected", + desc: "No tracking scripts. No analytics bloat. We don't collect any data about you or your users. Ever.", + color: "bg-[#00C853]", + textColor: "text-black", + }, ]; const timeoutRef = useRef(null); @@ -101,29 +109,44 @@ export function Features() { return (
-
Core Features

- Everything you need.
Nothing you don't. + Everything you need. +
+ Nothing you don't.

+
-
-
- {cards.map((card, i) => ( - - ))} -
- +
+
+ {cards.map((card, i) => ( + + ))} +
+ -
); diff --git a/landing-page/src/components/Playground.tsx b/landing-page/src/components/Playground.tsx index d7708be8..990ad659 100644 --- a/landing-page/src/components/Playground.tsx +++ b/landing-page/src/components/Playground.tsx @@ -10,14 +10,7 @@ const BUTTON_STYLES: { key: ButtonStyleKey; label: string }[] = [ { key: "icon-only", label: "icon-only" }, ]; -const COLORS = [ - "#FFCC00", - "#00C853", - "#229ED9", - "#FF4500", - "#a855f7", - "#ffffff", -]; +const COLORS = ["#FFCC00", "#00C853", "#229ED9", "#FF4500", "#a855f7", "#ffffff"]; const INITIAL_PLATFORMS = [ { name: "WhatsApp", icon: "W", active: true, color: "#25D366" }, @@ -49,9 +42,7 @@ export function Playground() { const activePlatforms = platforms.filter((p) => p.active); const togglePlatform = (name: string) => { - setPlatforms((prev) => - prev.map((p) => (p.name === name ? { ...p, active: !p.active } : p)) - ); + setPlatforms((prev) => prev.map((p) => (p.name === name ? { ...p, active: !p.active } : p))); }; const isDark = theme === "dark"; @@ -67,28 +58,32 @@ export function Playground() { return (
- -
- +
+
INTERACTIVE DEMO -

- Configure it live.
See it instantly. +

+ Configure it live. +
+ See it{" "} + + instantly. +

-

+

Tweak theme, style, platforms and color — the preview updates in real time.

-
- +
{/* Left Column: Preview / Code */}
-
| - +
{/* The Output Mockup */} @@ -114,14 +109,20 @@ export function Playground() {
{!isIconOnly && ( -

+

Share this page to your social networks:

)} -
+
{activePlatforms.length === 0 && ( -

No platforms selected — turn one on in the panel →

+

+ No platforms selected — turn one on in the panel → +

)} {activePlatforms.map((network, i) => (
@@ -132,7 +133,9 @@ export function Playground() { {network.icon}
{!isIconOnly && ( - + {network.name} )} @@ -146,14 +149,20 @@ export function Playground() { isDark ? "border-neutral-600" : "border-neutral-300" }`} > - + https://socialsharebutton.com
- - {/* Right Column: Configuration Panel */}
- {/* Panel Header */}
-
+
- Configuration panel + + Configuration panel +
- {/* Theme Config */}
-

Theme

-
- - -
+

+ Theme +

+
+ + +
{/* Button Style Config */}
-

Button Style

-
- {BUTTON_STYLES.map((s) => ( - - ))} -
+

+ Button Style +

+
+ {BUTTON_STYLES.map((s) => ( + + ))} +
{/* Platforms Config */}
-

Platforms

-
+

+ Platforms +

+
{platforms.map((platform, i) => ( ))}
@@ -299,28 +299,28 @@ export function Playground() { {/* Button Color Config */}
-

Button Color

-
- {COLORS.map((c) => ( -
+

+ Button Color +

+
+ {COLORS.map((c) => ( +
-
-
); -} \ No newline at end of file +}