@windrun-huaiin/third-ui 3.2.0

package/src/main/ads-alert-dialog.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import Image from "next/image";
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+} from "@base-ui/ui/alert-dialog";
+
+interface AdsAlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  imgSrc?: string;
+  imgHref?: string;
+  onCancel?: () => void;
+  cancelText?: string;
+  confirmText?: string;
+  onConfirm?: () => void;
+}
+
+export function AdsAlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  imgSrc,
+  imgHref,
+  cancelText,
+  onCancel,
+  confirmText,
+  onConfirm,
+}: AdsAlertDialogProps) {
+  const [imgError, setImgError] = useState(false);
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent
+        className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch"
+      >
+        {/* Header: left icon + title, right X close */}
+        <div className="flex flex-row items-center justify-between mb-2">
+          <AlertDialogTitle asChild>
+            <div className="flex flex-row items-center gap-1 min-w-0 text-xl font-semibold">
+              <icons.Info className="w-5 h-5" />
+              <span className="truncate">{title}</span>
+            </div>
+          </AlertDialogTitle>
+          <button
+            className="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4"
+            onClick={() => onOpenChange(false)}
+            aria-label="Close"
+            tabIndex={0}
+          >
+            <icons.X className="w-5 h-5" />
+          </button>
+        </div>
+        
+        {/* description area */}
+        <AlertDialogDescription className="text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2">
+          {description}
+        </AlertDialogDescription>
+        {/* image area (optional) */}
+        {imgSrc && (
+          <div className="w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2">
+            {imgError ? (
+              <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm">
+                <icons.ImageOff className="w-12 h-12 mb-2" />
+                <span>Image loading failed</span>
+              </div>
+            ) : imgHref ? (
+              <a href={imgHref} target="_blank" rel="noopener noreferrer" className="block w-full h-full">
+                <Image
+                  src={imgSrc}
+                  alt="image"
+                  fill
+                  className="object-contain rounded-lg"
+                  priority={false}
+                  placeholder="empty"
+                  unoptimized
+                  onError={() => setImgError(true)}
+                  sizes="(max-width: 400px) 100vw, 400px"
+                />
+              </a>
+            ) : (
+              <Image
+                src={imgSrc}
+                alt="image"
+                fill
+                className="object-contain rounded-lg"
+                priority={false}
+                placeholder="empty"
+                unoptimized
+                onError={() => setImgError(true)}
+                sizes="(max-width: 400px) 100vw, 400px"
+              />
+            )}
+          </div>
+        )}
+        {/* button area (optional) */}
+        {(cancelText || confirmText) && (
+          <div className="flex justify-end gap-2 mt-2">
+            {cancelText && (
+              <button
+                onClick={() => {
+                  onOpenChange(false);
+                  onCancel?.();
+                }}
+                className="px-6 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-700 transition"
+              >
+                {cancelText}
+              </button>
+            )}
+            {confirmText && (
+              <AlertDialogAction
+                onClick={() => {
+                  onOpenChange(false);
+                  onConfirm?.();
+                }}
+                className="px-6 py-2 rounded-lg bg-purple-500 text-white font-semibold hover:bg-purple-600 transition"
+              >
+                {confirmText}
+              </AlertDialogAction>
+            )}
+          </div>
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+} 

package/src/main/cta.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
+import { useTranslations } from 'next-intl';
+
+export function CTA() {
+  const t = useTranslations('cta');
+  return (
+    <section className="container mx-auto px-4 py-20">
+      <div className="bg-gradient-to-r from-purple-200 to-pink-300 rounded-3xl p-12 text-center text-white bg-[length:200%_auto] animate-cta-gradient-wave">
+        <h2 className="text-3xl md:text-4xl font-bold mb-6">
+          {t('title')} <span className="text-purple-400">{t('eyesOn')}</span>?
+        </h2>
+        <p className="text-xl max-w-2xl mx-auto mb-8 text-white/80">
+          {t('description1')}
+          <br />
+          {t('description2')}
+        </p>
+        <GradientButton
+          title={t('button')}
+          href="https://preview.reve.art/"
+          align="center"
+        />
+      </div>
+    </section>
+  )
+}
+

package/src/main/faq.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { useState } from "react";
+import { useTranslations } from 'next-intl';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+
+export function FAQ() {
+  const t = useTranslations('faq');
+  const items = t.raw('items') as Array<{
+    question: string;
+    answer: string;
+  }>;
+  const [openArr, setOpenArr] = useState<boolean[]>(() => items.map(() => false));
+
+  const handleToggle = (idx: number) => {
+    setOpenArr(prev => {
+      const next = [...prev];
+      next[idx] = !next[idx];
+      return next;
+    });
+  };
+
+  return (
+    <section id="faq" className="px-16 py-10 mx-16 md:mx-32">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
+        {t('title')}
+      </h2>
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto">
+        {t('description')}
+      </p>
+      <div className="space-y-6">
+        {items.map((item, idx) => {
+          const isOpen = openArr[idx];
+          const Icon = isOpen ? icons.ChevronDown : icons.ChevronRight;
+          return (
+            <div
+              key={idx}
+              className="bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+            >
+              <button
+                className="w-full flex items-center justify-between text-left focus:outline-none"
+                onClick={() => handleToggle(idx)}
+                aria-expanded={isOpen}
+              >
+                <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">{item.question}</span>
+                <Icon className="w-6 h-6 text-gray-400 ml-2 transition-transform duration-200" />
+              </button>
+              {isOpen && (
+                <div className="mt-4 text-gray-700 dark:text-gray-300 text-base">
+                  {item.answer}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+} 

package/src/main/features.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+
+export function Features() {
+  const t = useTranslations('features');
+  
+  // 直接从翻译文件获取特性列表
+  const featureItems = t.raw('items') as Array<{
+    title: string;
+    description: string;
+    icon: string;
+  }>;
+
+  return (
+    <section id="features" className="container mx-auto px-4 py-20">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
+        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {featureItems.map((feature, index) => (
+          <div
+            key={index}
+            className="bg-gray-50 dark:bg-gray-800/50 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition"
+          >
+            <div className="text-4xl mb-4">{feature.icon}</div>
+            <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+            <p className="">{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+

package/src/main/footer.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { useLocale, useTranslations } from 'next-intl';
+import Link from "next/link";
+
+export function Footer() {
+  const tFooter = useTranslations('footer');
+  const locale = useLocale();
+
+  return (
+    <div className="mb-10 w-full mx-auto border-t-purple-700/80 border-t-1">
+      <footer>
+        <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
+          {/* 第一行：居中icon跳转链接 */}
+          <div className="flex items-center justify-center space-x-6 text-xs">
+            <Link href={`/${locale}/legal/terms`} className="flex items-center space-x-1 hover:underline">
+              <icons.ReceiptText className="h-3.5 w-3.5"/>
+              <span>{tFooter('terms', { defaultValue: 'Terms of Service' })}</span>
+            </Link>
+            <Link href={`/${locale}/legal/privacy`} className="flex items-center space-x-1 hover:underline">
+              <icons.ShieldUser className="h-3.5 w-3.5"/>
+              <span>{tFooter('privacy', { defaultValue: 'Privacy Policy' })}</span>
+            </Link>
+          </div>
+          {/* 第二行：版权声明 */}
+          <div className="text-xs text-center">
+            <span>
+              {tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })}
+            </span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+

package/src/main/gallery.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import { useTranslations } from 'next-intl'
+import Image from "next/image"
+import { GradientButton } from "@third-ui/fuma/mdx/gradient-button"
+
+export function Gallery() {
+  const t = useTranslations('gallery');
+  const galleryItems = t.raw('prompts') as string[];
+
+  const handleDownload = async (index: number) => {
+    try {
+      const response = await fetch(`/${index + 1}.webp`);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `reve-image-${index + 1}.webp`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+  };
+
+  return (
+    <section id="gallery" className="container mx-auto px-4 py-20">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-6">
+        {t('titleL')} <span className="text-purple-500">{t('eyesOn')}</span> {t('titleR')}
+      </h2>
+      <p className="text-center max-w-2xl mx-auto mb-16">
+        {t('description')}
+      </p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {galleryItems.map((prompt, index) => (
+          <div key={index} className="group relative overflow-hidden rounded-xl">
+            <Image
+              src={`/${index + 1}.webp`}
+              alt="Reve Image AI-generated artwork"
+              width={600}
+              height={600}
+              className="w-full h-80 object-cover transition duration-300 group-hover:scale-105"
+            />
+            <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
+              <button
+                onClick={() => handleDownload(index)}
+                className="bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300"
+              >
+                <icons.Download className="h-5 w-5 text-white" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="text-center mt-12">
+        <GradientButton
+          title={t('button')}
+          href="https://preview.reve.art/"
+          align="center"
+        />
+      </div>
+    </section>
+  )
+}
+

package/src/main/go-to-top.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+
+export function GoToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // listen to scroll event
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  // scroll to top
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 p-3 bg-neutral-800 text-neutral-100 hover:bg-neutral-700 dark:bg-neutral-300 dark:text-neutral-900 dark:hover:bg-neutral-400 rounded-full shadow-lg transition-all z-50"
+          aria-label="Go to top"
+        >
+          <icons.ArrowUp size={20} />
+        </button>
+      )}
+    </>
+  );
+} 

package/src/main/index.ts

@@ -0,0 +1,12 @@
+// Main application components
+export * from './gallery';
+export * from './usage';
+export * from './features';
+export * from './tips'; 
+export * from './faq';
+export * from './seo-content';
+export * from './cta';
+export * from './footer';
+export * from './go-to-top';
+export * from './loading';
+export * from './nprogress-bar';

package/src/main/loading.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+const NUM_ROWS = 15;
+const NUM_COLS = 15;
+const DOT_SIZE = 6; // px, dot diameter
+const SPACING = 12; // px, space between dot centers
+const ANIMATION_DURATION = 1.8; // seconds
+const STAGGER_DELAY_FACTOR = 0.08; // seconds, delay per unit of distance from center
+
+// Expanded palette for more "dazzling" effect
+const COLORS = [
+  '#AC62FD', // Base Purple
+  '#C364FA', 
+  '#DD59F7',
+  '#FF4FF2', // Bright Pink/Magenta
+  '#F067DD',
+  '#E26AF8',
+  '#DA70D6', // Orchid
+  '#BA55D3', // Medium Orchid
+  '#9370DB', // Medium Purple
+  '#8A2BE2'  // Blue Violet
+];
+
+export function Loading() {
+  const dots = [];
+  const centerX = (NUM_COLS - 1) / 2;
+  const centerY = (NUM_ROWS - 1) / 2;
+
+  for (let i = 0; i < NUM_ROWS; i++) {
+    for (let j = 0; j < NUM_COLS; j++) {
+      // Calculate distance from the center of the grid
+      const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
+      dots.push({
+        id: `${i}-${j}`,
+        row: i,
+        col: j,
+        // Animation delay based on distance, creating a ripple effect
+        delay: distance * STAGGER_DELAY_FACTOR,
+        // Color selection based on distance rings
+        color: COLORS[Math.floor(distance) % COLORS.length],
+      });
+    }
+  }
+
+  // Calculate the total width and height of the dot container
+  const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
+  const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-neutral-900">
+      <div
+        style={{
+          width: containerWidth,
+          height: containerHeight,
+          position: 'relative',
+          borderRadius: '50%', // Make the container circular
+          overflow: 'hidden',   // Clip dots outside the circle
+        }}
+      >
+        {dots.map(dot => (
+          <div
+            key={dot.id}
+            style={{
+              position: 'absolute',
+              left: dot.col * SPACING,
+              top: dot.row * SPACING,
+              width: DOT_SIZE,
+              height: DOT_SIZE,
+              backgroundColor: dot.color,
+              borderRadius: '50%',
+              animationName: 'loading-dot-pulse',
+              animationDuration: `${ANIMATION_DURATION}s`,
+              animationTimingFunction: 'cubic-bezier(0.45, 0, 0.55, 1)',
+              animationIterationCount: 'infinite',
+              animationDelay: `${dot.delay}s`,
+              opacity: 0,
+              transform: 'scale(0)',
+            }}
+          />
+        ))}
+        {/* Centered Loading Text */}
+        <div 
+          className="absolute inset-0 flex items-center justify-center"
+          style={{ pointerEvents: 'none' }} // So text doesn't interfere with potential mouse events on dots if any
+        >
+          <p className="text-xl font-semibold text-white">
+            Loading...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+} 

package/src/main/nprogress-bar.tsx

@@ -0,0 +1,24 @@
+'use client'
+import NProgress from 'nprogress'
+import { usePathname } from 'next/navigation'
+import { useEffect, useRef } from 'react'
+
+// remove NProgress progress bar spinner circle
+NProgress.configure({ showSpinner: false })
+
+export function NProgressBar() {
+  const pathname = usePathname()
+  const previousPath = useRef(pathname)
+
+  useEffect(() => {
+    if (previousPath.current !== pathname) {
+      NProgress.start()
+      setTimeout(() => {
+        NProgress.done()
+      }, 100)
+      previousPath.current = pathname
+    }
+  }, [pathname])
+
+  return null
+} 

package/src/main/seo-content.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-unescaped-entities */
+'use client'
+
+import { useTranslations } from 'next-intl'
+
+interface Section {
+  title: string;
+  content: string;
+}
+
+export function SeoContent() {
+  const t = useTranslations('seoContent');
+
+  return (
+    <section className="container mx-auto px-4 py-20">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
+        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+      </h2>
+      <div className="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
+        <p>{t('intro')}</p>
+
+        {t.raw('sections').map((section: Section, index: number) => (
+          <div key={index}>
+            <h3>{t(`sections.${index}.title`)}</h3>
+            <p>{t(`sections.${index}.content`)}</p>
+          </div>
+        ))}
+
+        <p>{t('conclusion')}</p>
+      </div>
+    </section>
+  )
+}
+

package/src/main/tips.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+
+interface Tip {
+  title: string;
+  description: string;
+}
+
+export function Tips() {
+  const t = useTranslations('tips');
+  const sections = t.raw('sections') as Tip[];
+  
+  const midPoint = Math.ceil(sections.length / 2);
+  const leftColumn = sections.slice(0, midPoint);
+  const rightColumn = sections.slice(midPoint);
+
+  return (
+    <section id="tips" className="container mx-auto px-4 py-20 bg-gray-50 dark:bg-gray-900/50 rounded-3xl my-20 border border-gray-200 dark:border-transparent">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">
+        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+        {[leftColumn, rightColumn].map((column: Tip[], colIndex) => (
+          <div key={colIndex} className="space-y-8">
+            {column.map((tip: Tip, tipIndex) => (
+              <div key={tipIndex} className="space-y-4">
+                <h3 className="text-2xl font-semibold">{tip.title}</h3>
+                <p className="">{tip.description}</p>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+

package/src/main/usage.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { globalLucideIcons as icons, getGlobalIcon } from '@base-ui/components/global-icon'
+
+export function Usage() {
+  const t = useTranslations('usage');
+  const steps = t.raw('steps') as Array<{
+    title: string;
+    description: string;
+    iconKey: keyof typeof icons;
+  }>;
+
+  return (
+    <section id="usage" className="px-16 py-10 mx-16 md:mx-32">
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
+        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+      </h2>
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
+        {t('description')}
+      </p>
+      <div className="bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
+          {steps.map((step, idx) => {
+            const Icon = getGlobalIcon(step.iconKey);
+            return (
+              <div key={idx} className="flex items-start">
+                <div className="flex-shrink-0 mr-4">
+                  <Icon className="w-8 h-8 text-purple-500" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center">
+                    {`${idx + 1}. ${step.title}`}
+                  </h3>
+                  <p className="text-gray-700 dark:text-gray-300">{step.description}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+

package/src/styles/cta.css

@@ -0,0 +1,16 @@
+@layer utilities {
+  /* Renamed Keyframes for CTA component */
+  @keyframes cta-gradient-wave {
+    0%, 100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  /* Renamed Utility Class for CTA component */
+  .animate-cta-gradient-wave {
+    animation: cta-gradient-wave 6s ease infinite; /* Use renamed keyframes */
+  }
+}