feat: add BD page and circling elements animation component

Author: code-env

public/pic.png

@@ -1,5 +1,5 @@
 import { Route, Routes } from "react-router";
-import { BackgroundChange, Home, NotFound, PhoneShowcase } from "./pages";
+import { BackgroundChange, Home, NotFound, PhoneShowcase, BD } from "./pages";
 import TestPage from "./pages/test";
 
 const App = () => {
@@ -9,6 +9,7 @@ const App = () => {
       <Route path="phone" element={<PhoneShowcase />} />
       <Route path="bg" element={<BackgroundChange />} />
       <Route path="test" element={<TestPage />} />
+      <Route path="bd" element={<BD />} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   );

src/App.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+
+type CirclingElementsProps = {
+  children: React.ReactNode;
+  radius?: number;
+  duration?: number;
+  className?: string;
+};
+
+const CirclingElements: React.FC<CirclingElementsProps> = ({
+  children,
+  radius = 100,
+  duration = 10,
+  className,
+}) => {
+  return (
+    <div className={`relative w-full h-full ${className}`}>
+      {React.Children.map(children, (child, index) => {
+        const offset = (index * 360) / React.Children.count(children);
+        return (
+          <motion.div
+            key={index}
+            className="transform-gpu absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-circling"
+            style={
+              {
+                "--circling-duration": duration,
+                "--circling-radius": radius,
+                "--circling-offset": offset,
+              } as React.CSSProperties
+            }
+          >
+            {child}
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default CirclingElements;