Initial commit for ant website
This commit is contained in:
codebox283
parent
a71c85aa82
commit
11fd93f196
@ -4,88 +4,107 @@ import { StoryTwo } from "./Story2";
|
|||||||
import { StoryThree } from "./Story3";
|
import { StoryThree } from "./Story3";
|
||||||
|
|
||||||
export function StorySec() {
|
export function StorySec() {
|
||||||
const [style, setStyle] = useState("1");
|
const [activeStory, setActiveStory] = useState("1");
|
||||||
|
|
||||||
const handleAddInvite = useCallback(
|
const handleStoryChange = useCallback((storyId: string) => {
|
||||||
(v: any) => {
|
setActiveStory(storyId);
|
||||||
console.log(v);
|
}, []);
|
||||||
setStyle(v);
|
|
||||||
|
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 (
|
return (
|
||||||
<>
|
<div className="w-full max-w-7xl mx-auto px-6 py-20">
|
||||||
<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">
|
{/* Navigation Pills */}
|
||||||
<div className="w-full mb-10 ">
|
<div className="flex flex-wrap gap-2 mb-12 justify-center lg:justify-start">
|
||||||
<div className="flex flex-col gap-8">
|
{stories.map((story) => (
|
||||||
<button
|
<button
|
||||||
className={
|
key={story.id}
|
||||||
"text-white rounded-lg p-10 lg:mr-20 text-start " +
|
onClick={() => handleStoryChange(story.id)}
|
||||||
(style === "1" ? "card" : "bg-black")
|
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")}
|
|
||||||
>
|
>
|
||||||
<h1 className="text-xl font-semibold">
|
{/* Active background gradient */}
|
||||||
Detailing our brand story
|
{activeStory === story.id && (
|
||||||
</h1>
|
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 opacity-90 animate-pulse" />
|
||||||
<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 />
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 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>
|
</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>
|
</div>
|
||||||
<style jsx>{`
|
|
||||||
.card {
|
{/* Story Content */}
|
||||||
background: linear-gradient(
|
<div className="relative min-h-[300px]">
|
||||||
96.36deg,
|
{/* Background decoration */}
|
||||||
#ffff00 -15.3%,
|
<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" />
|
||||||
#ffd316 -8.64%,
|
<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" />
|
||||||
#ff9c32 0.8%,
|
|
||||||
#ff6c4a 10.32%,
|
{/* Content with smooth transitions */}
|
||||||
#ff455d 19.7%,
|
<div className="relative z-10">
|
||||||
#ff276c 28.91%,
|
{stories.map((story) => (
|
||||||
#ff1177 37.92%,
|
<div
|
||||||
#ff047e 46.63%,
|
key={story.id}
|
||||||
#ff0080 54.68%,
|
className={`
|
||||||
#0026ff 131.34%
|
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'
|
||||||
}
|
}
|
||||||
`}</style>
|
`}
|
||||||
</>
|
>
|
||||||
|
{story.component}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user