Initial commit for ant website

src/components/about/StorySec.tsx

@@ -4,88 +4,107 @@ import { StoryTwo } from "./Story2";
 import { StoryThree } from "./Story3";
 
 export function StorySec() {
-  const [style, setStyle] = useState("1");
+  const [activeStory, setActiveStory] = useState("1");
 
-  const handleAddInvite = useCallback(
-    (v: any) => {
-      console.log(v);
-      setStyle(v);
+  const handleStoryChange = useCallback((storyId: string) => {
+    setActiveStory(storyId);
+  }, []);
+
+  const stories = [
+    {
+      id: "1",
+      title: "Brand Story",
+      subtitle: "What is ANTL?",
+      component: <StoryOne />
     },
-    [style]
-  );
+    {
+      id: "2", 
+      title: "Operations",
+      subtitle: "Fractal structure",
+      component: <StoryTwo />
+    },
+    {
+      id: "3",
+      title: "Organization", 
+      subtitle: "Excellence in structure",
+      component: <StoryThree />
+    }
+  ];
+
   return (
-    <>
-      <div className="grid grid-cols-1 lg:grid-cols-3 md:gap-10 w-full max-w-screen-2xl my-20 px-6 lg:px-20">
-        <div className="w-full mb-10 ">
-          <div className="flex flex-col gap-8">
-            <button
-              className={
-                "text-white rounded-lg p-10 lg:mr-20 text-start " +
-                (style === "1" ? "card" : "bg-black")
+    <div className="w-full max-w-7xl mx-auto px-6 py-20">
+      {/* Navigation Pills */}
+      <div className="flex flex-wrap gap-2 mb-12 justify-center lg:justify-start">
+        {stories.map((story) => (
+          <button
+            key={story.id}
+            onClick={() => handleStoryChange(story.id)}
+            onMouseEnter={() => handleStoryChange(story.id)}
+            className={`
+              group relative px-6 py-3 rounded-full transition-all duration-500 ease-out bg-white/10 border border-black/20
+              ${activeStory === story.id 
+                ? 'text-gray-900 shadow-2xl' 
+                : 'text-gray-700 hover:text-gray-900 hover:bg-white/5'
               }
-              // onClick={
-              //   setButton("1")
-              // }
-              onMouseEnter={() => handleAddInvite("1")}
+            `}
+          >
+            {/* Active background gradient */}
+            {activeStory === story.id && (
+              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 opacity-90 animate-pulse" />
+            )}
+            
+            {/* Content */}
+            <div className="relative z-10 flex flex-col items-center">
+              <span className="text-sm font-semibold text-gray-900">{story.title}</span>
+              <span className="text-xs opacity-80 text-gray-700">{story.subtitle}</span>
+            </div>
+            
+            {/* Hover effect */}
+            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-yellow-400/20 via-red-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          </button>
+        ))}
+      </div>
+
+      {/* Story Content */}
+      <div className="relative min-h-[300px]">
+        {/* Background decoration */}
+        <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-yellow-400/10 to-pink-500/10 rounded-full blur-3xl" />
+        <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-gradient-to-tr from-blue-500/10 to-purple-500/10 rounded-full blur-3xl" />
+        
+        {/* Content with smooth transitions */}
+        <div className="relative z-10">
+          {stories.map((story) => (
+            <div
+              key={story.id}
+              className={`
+                transition-all duration-700 ease-out
+                ${activeStory === story.id 
+                  ? 'opacity-100 translate-y-0' 
+                  : 'opacity-0 translate-y-8 absolute inset-0 pointer-events-none'
+                }
+              `}
             >
-              <h1 className="text-xl font-semibold">
-                Detailing our brand story
-              </h1>
-              <h2 className="text-lg mt-4">But what is ANTL?</h2>
-            </button>
-            <button
-              className={
-                "text-white rounded-lg p-10 lg:mr-20 text-start " +
-                (style === "2" ? "card" : "bg-black")
-              }
-              onMouseEnter={() => handleAddInvite("2")}
-            >
-              <h1 className="text-xl font-semibold">Principle of operations</h1>
-              <h2 className="text-lg mt-4">
-                The organization is fractal in structure
-              </h2>
-            </button>
-            <button
-              className={
-                "text-white rounded-lg p-10 lg:mr-20 text-start " +
-                (style === "3" ? "card" : "bg-black")
-              }
-              onMouseEnter={() => handleAddInvite("3")}
-            >
-              <h1 className="text-xl font-semibold">
-                Organizational Structure
-              </h1>
-              <h2 className="text-lg mt-4">Some headline will come here</h2>
-            </button>
-          </div>
-        </div>
-        <div className="col-span-2 h-9 w-full h-fit">
-          {style === "1" ? (
-            <StoryOne />
-          ) : style === "2" ? (
-            <StoryTwo />
-          ) : (
-            <StoryThree />
-          )}
+              {story.component}
+            </div>
+          ))}
         </div>
       </div>
-      <style jsx>{`
-        .card {
-          background: linear-gradient(
-            96.36deg,
-            #ffff00 -15.3%,
-            #ffd316 -8.64%,
-            #ff9c32 0.8%,
-            #ff6c4a 10.32%,
-            #ff455d 19.7%,
-            #ff276c 28.91%,
-            #ff1177 37.92%,
-            #ff047e 46.63%,
-            #ff0080 54.68%,
-            #0026ff 131.34%
-          );
-        }
-      `}</style>
-    </>
+
+      {/* Progress indicator */}
+      <div className="flex justify-center mt-8 space-x-2">
+        {stories.map((story) => (
+          <div
+            key={story.id}
+            className={`
+              h-1 rounded-full transition-all duration-500
+              ${activeStory === story.id 
+                ? 'w-12 bg-gradient-to-r from-yellow-400 to-pink-500' 
+                : 'w-6 bg-white/20'
+              }
+            `}
+          />
+        ))}
+      </div>
+    </div>
   );
-}
+}