Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-23 15:06:48 +00:00

View File

@@ -16,412 +16,162 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="noise"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="noise"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Work",
id: "work",
},
{
name: "Services",
id: "services",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="QARAR · قرار"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
brandName="QARAR · قرار"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "gradient-bars",
}}
title="EVERY GREAT BUSINESS IS A CHESS MATCH."
description="ARE YOU PLAYING TO WIN? STRATEGY IS THE ONLY MOVE."
testimonials={[
{
name: "Grandmaster Strategy",
handle: "@QARAR",
testimonial: "Every decision is a calculated move toward total market dominance.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476088.jpg?_wi=1",
},
{
name: "The Architect",
handle: "@QARAR",
testimonial: "We build machines that scale your vision with absolute precision.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-figure_23-2150844793.jpg?_wi=1",
},
{
name: "Performance Lead",
handle: "@QARAR",
testimonial: "Precision media buying for those who don't accept second place.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476091.jpg?_wi=1",
},
{
name: "Visual Artist",
handle: "@QARAR",
testimonial: "AI-driven visuals that define the new standard of luxury.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/abstract-chess-pieces-digital-art-style_23-2151476115.jpg?_wi=1",
},
{
name: "UX Engineer",
handle: "@QARAR",
testimonial: "Designing experiences that convert dreams into reality.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844669.jpg",
},
]}
buttons={[
{
text: "Begin Your Strategy →",
},
]}
mediaAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844663.jpg?_wi=1"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/people-with-medical-masks-coronavirus-pandemic_23-2148748974.jpg",
alt: "Strategist",
},
{
src: "http://img.b2bpic.net/free-photo/ropejumper-girl_1385-615.jpg",
alt: "Founder",
},
{
src: "http://img.b2bpic.net/free-photo/kaleidoscope-magnetic-metallic-shaving-design-isolated-white-backdrop_23-2148263559.jpg",
alt: "Designer",
},
{
src: "http://img.b2bpic.net/free-photo/abstract-cover-art-illustration_23-2151904510.jpg",
alt: "Analyst",
},
{
src: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499384.jpg",
alt: "Partner",
},
]}
marqueeItems={[
{
type: "text",
text: "STRATEGIC DOMINANCE",
},
{
type: "text",
text: "CALCULATED GROWTH",
},
{
type: "text",
text: "PRECISE EXECUTION",
},
{
type: "text",
text: "MARKET LEADERSHIP",
},
{
type: "text",
text: "UNCOMPROMISING LUXURY",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "gradient-bars" }}
title="EVERY GREAT BUSINESS IS A CHESS MATCH."
description="ARE YOU PLAYING TO WIN? STRATEGY IS THE ONLY MOVE."
testimonials={[
{ name: "Grandmaster Strategy", handle: "@QARAR", testimonial: "Every decision is a calculated move toward total market dominance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476088.jpg" },
{ name: "The Architect", handle: "@QARAR", testimonial: "We build machines that scale your vision with absolute precision.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-figure_23-2150844793.jpg" },
{ name: "Performance Lead", handle: "@QARAR", testimonial: "Precision media buying for those who don't accept second place.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476091.jpg" },
{ name: "Visual Artist", handle: "@QARAR", testimonial: "AI-driven visuals that define the new standard of luxury.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-chess-pieces-digital-art-style_23-2151476115.jpg" },
{ name: "UX Engineer", handle: "@QARAR", testimonial: "Designing experiences that convert dreams into reality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844669.jpg" },
]}
buttons={[{ text: "Begin Your Strategy →" }]}
mediaAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844663.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/people-with-medical-masks-coronavirus-pandemic_23-2148748974.jpg", alt: "Strategist" },
{ src: "http://img.b2bpic.net/free-photo/ropejumper-girl_1385-615.jpg", alt: "Founder" },
{ src: "http://img.b2bpic.net/free-photo/kaleidoscope-magnetic-metallic-shaving-design-isolated-white-backdrop_23-2148263559.jpg", alt: "Designer" },
{ src: "http://img.b2bpic.net/free-photo/abstract-cover-art-illustration_23-2151904510.jpg", alt: "Analyst" },
{ src: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499384.jpg", alt: "Partner" },
]}
marqueeItems={[
{ type: "text", text: "STRATEGIC DOMINANCE" },
{ type: "text", text: "CALCULATED GROWTH" },
{ type: "text", text: "PRECISE EXECUTION" },
{ type: "text", text: "MARKET LEADERSHIP" },
{ type: "text", text: "UNCOMPROMISING LUXURY" },
]}
/>
</div>
<div id="manifesto" data-section="manifesto">
<TextSplitAbout
useInvertedBackground={true}
title="Most businesses don't fail. They simply never decide."
description={[
"True business growth isn't about working harder; it's about eliminating the fog.",
"We stop the cycle of running in circles and bring clarity to the chaos.",
]}
/>
</div>
<div id="manifesto" data-section="manifesto">
<TextSplitAbout
useInvertedBackground={true}
title="Most businesses don't fail. They simply never decide."
description={[
"True business growth isn't about working harder; it's about eliminating the fog.", "We stop the cycle of running in circles and bring clarity to the chaos."]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Brand & Identity",
description: "Defining your core existence.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844663.jpg?_wi=2",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/view-chess-pieces-with-dramatic-mystical-background_23-2150844723.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/human-code-glitch-concept-with-copy-space_1194-639018.jpg",
imageAlt: "dark anime chess aesthetic",
},
{
title: "Media Buying",
description: "High-performance acquisition strategy.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844845.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-optical-illusion_23-2150853496.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-climber-red-wall_23-2151982347.jpg",
imageAlt: "dark anime chess aesthetic",
},
{
title: "Content Strategy",
description: "Social dominance through editorial craft.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-vector/abstract-symmetric-bactround-design_1040-1211.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-vector/symmetry-background-design_1040-1117.jpg",
},
imageSrc: "http://img.b2bpic.net/free-vector/pink-beige-gradient-background-with-futuristic-design_1040-1190.jpg",
imageAlt: "dark anime chess aesthetic",
},
{
title: "AI Visuals",
description: "Hyper-realistic asset production.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476082.jpg",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-psd/artificial-intelligence-template-design_23-2151651513.jpg",
},
imageSrc: "http://img.b2bpic.net/free-psd/halloween-template-design_23-2151783191.jpg",
imageAlt: "dark anime chess aesthetic",
},
{
title: "UI/UX Design",
description: "Conversion-centric digital interfaces.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/green-pink-pieces-chess-with-game-board_23-2150378674.jpg?_wi=1",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499410.jpg?_wi=1",
},
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476088.jpg?_wi=2",
imageAlt: "dark anime chess aesthetic",
},
{
title: "Business Solutions",
description: "Scaling your operational machine.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-figure_23-2150844793.jpg?_wi=2",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476091.jpg?_wi=2",
},
imageSrc: "http://img.b2bpic.net/free-photo/abstract-chess-pieces-digital-art-style_23-2151476115.jpg?_wi=2",
imageAlt: "dark anime chess aesthetic",
},
]}
showStepNumbers={true}
title="THE GRANDMASTER SERVICES"
description="Calculated solutions designed to scale your operations."
/>
</div>
<div id="services" data-section="services">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Brand & Identity", description: "Defining your core existence.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844663.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/view-chess-pieces-with-dramatic-mystical-background_23-2150844723.jpg", imageAlt: "dark anime chess aesthetic" } },
{ title: "Media Buying", description: "High-performance acquisition strategy.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-mystical-ambiance_23-2150844845.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-optical-illusion_23-2150853496.jpg", imageAlt: "dark anime chess aesthetic" } },
{ title: "Content Strategy", description: "Social dominance through editorial craft.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/abstract-symmetric-bactround-design_1040-1211.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/symmetry-background-design_1040-1117.jpg", imageAlt: "dark anime chess aesthetic" } },
{ title: "AI Visuals", description: "Hyper-realistic asset production.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476082.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-psd/artificial-intelligence-template-design_23-2151651513.jpg", imageAlt: "dark anime chess aesthetic" } },
{ title: "UI/UX Design", description: "Conversion-centric digital interfaces.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/green-pink-pieces-chess-with-game-board_23-2150378674.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499410.jpg", imageAlt: "dark anime chess aesthetic" } },
{ title: "Business Solutions", description: "Scaling your operational machine.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/view-dramatic-chess-pieces-with-mysterious-figure_23-2150844793.jpg", imageAlt: "dark anime chess aesthetic" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-abstract-chess-pieces_23-2151476091.jpg", imageAlt: "dark anime chess aesthetic" } },
]}
showStepNumbers={true}
title="THE GRANDMASTER SERVICES"
description="Calculated solutions designed to scale your operations."
/>
</div>
<div id="targeting" data-section="targeting">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "1",
value: "Founders",
title: "Business Owners",
description: "People who own their path.",
imageSrc: "http://img.b2bpic.net/free-photo/green-pink-pieces-chess-with-game-board_23-2150378674.jpg?_wi=2",
},
{
id: "2",
value: "Visionaries",
title: "Startups & Scaleups",
description: "Teams built for rapid expansion.",
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499410.jpg?_wi=2",
},
]}
title="FOR THOSE WHO DARE TO DREAM"
description="Serving ambitious founders and startups globally."
/>
</div>
<div id="targeting" data-section="targeting">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "1", value: "Founders", title: "Business Owners", description: "People who own their path.", imageSrc: "http://img.b2bpic.net/free-photo/green-pink-pieces-chess-with-game-board_23-2150378674.jpg" },
{ id: "2", value: "Visionaries", title: "Startups & Scaleups", description: "Teams built for rapid expansion.", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-scene-with-people-playing-chess_23-2151499410.jpg" },
]}
title="FOR THOSE WHO DARE TO DREAM"
description="Serving ambitious founders and startups globally."
/>
</div>
<div id="market" data-section="market">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"CAIRO",
"RIYADH",
"DUBAI",
"AMMAN",
"MUSCAT",
"MANAMA",
"DOHA",
]}
title="GLOBAL IMPACT"
description="Operating across major MENA markets."
/>
</div>
<div id="market" data-section="market">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["CAIRO", "RIYADH", "DUBAI", "AMMAN", "MUSCAT", "MANAMA", "DOHA"]}
title="GLOBAL IMPACT"
description="Operating across major MENA markets."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "c1",
tag: "CHAPTER 01",
price: "$1,200",
period: "foundation",
description: "Brand Foundation",
button: {
text: "Begin",
},
featuresTitle: "Included",
features: [
"Identity",
"Visuals",
],
},
{
id: "c2",
tag: "CHAPTER 02",
price: "$3,500",
period: "monthly",
description: "Growth Retainer",
button: {
text: "Begin",
},
featuresTitle: "Included",
features: [
"Retainer",
"Growth",
],
},
{
id: "c3",
tag: "CHAPTER 03",
price: "Custom",
period: "Partnership",
description: "Performance Model",
button: {
text: "Begin",
},
featuresTitle: "Included",
features: [
"Revenue Share",
"Scaling",
],
},
]}
title="THE CHAPTERS"
description="Select your trajectory."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "c1", tag: "CHAPTER 01", price: "$1,200", period: "foundation", description: "Brand Foundation", button: { text: "Begin" }, featuresTitle: "Included", features: ["Identity", "Visuals"] },
{ id: "c2", tag: "CHAPTER 02", price: "$3,500", period: "monthly", description: "Growth Retainer", button: { text: "Begin" }, featuresTitle: "Included", features: ["Retainer", "Growth"] },
{ id: "c3", tag: "CHAPTER 03", price: "Custom", period: "Partnership", description: "Performance Model", button: { text: "Begin" }, featuresTitle: "Included", features: ["Revenue Share", "Scaling"] },
]}
title="THE CHAPTERS"
description="Select your trajectory."
/>
</div>
<div id="roadmap" data-section="roadmap">
<FaqBase
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "m1",
title: "MOVE 01 · Month 1",
content: "Machine Built: Infrastructure setup and core strategy formulation.",
},
{
id: "m2",
title: "MOVE 02 · Month 3",
content: "Proof of Concept: Validating models and initial growth signals.",
},
{
id: "m3",
title: "MOVE 03 · Month 6",
content: "Break Even: Establishing sustainable financial stability.",
},
{
id: "m4",
title: "MOVE 04 · Month 12",
content: "Scale Mode: Accelerated scaling and dominance.",
},
]}
title="THE STRATEGIC ROADMAP"
description="A calculated move every step of the way."
faqsAnimation="slide-up"
/>
</div>
<div id="roadmap" data-section="roadmap">
<FaqBase
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "m1", title: "MOVE 01 · Month 1", content: "Machine Built: Infrastructure setup and core strategy formulation." },
{ id: "m2", title: "MOVE 02 · Month 3", content: "Proof of Concept: Validating models and initial growth signals." },
{ id: "m3", title: "MOVE 03 · Month 6", content: "Break Even: Establishing sustainable financial stability." },
{ id: "m4", title: "MOVE 04 · Month 12", content: "Scale Mode: Accelerated scaling and dominance." },
]}
title="THE STRATEGIC ROADMAP"
description="A calculated move every step of the way."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "plain",
}}
text="The board is set. The pieces are ready. One move remains. YOUR QARAR."
buttons={[
{
text: "See Our Work →",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{ variant: "plain" }}
text="The board is set. The pieces are ready. One move remains. YOUR QARAR."
buttons={[{ text: "See Our Work →" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Navigation",
items: [
{
label: "Work",
href: "#work",
},
{
label: "Services",
href: "#services",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
logoText="QARAR · قرار"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Navigation", items: [{ label: "Work", href: "#work" }, { label: "Services", href: "#services" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
]}
logoText="QARAR · قرار"
/>
</div>
</ReactLenis>
</ThemeProvider>
);