Merge version_1 into main #2
290
src/app/page.tsx
290
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Portfolio", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="OpalFlow"
|
||||
/>
|
||||
@@ -48,63 +43,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Turn Your Website Into a Sales Machine."
|
||||
description="Premium, conversion-focused websites starting at ₹4,999. Fast, mobile-friendly, and built to grow your business."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-blue-geometric-background-with-copy-space_24972-1815.jpg?_wi=1"
|
||||
buttons={[{ text: "Get Your Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-blue-geometric-background-with-copy-space_24972-1815.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-black-regular-spaghetti-with-copy-space_23-2148461646.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/gradient-blue-abstract-background-smooth-dark-blue-with-black-vignette-studio_1258-52532.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/luxurious-blue-geometric-background-with-copyspace_24972-1792.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blue-gradient-abstract-background-empty-room-with-space-your-text-picture_1258-82820.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/school-supplies-stationery-blue-background-copy-space_169016-21510.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-black-regular-spaghetti-with-copy-space_23-2148461646.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/gradient-blue-abstract-background-smooth-dark-blue-with-black-vignette-studio_1258-52532.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/luxurious-blue-geometric-background-with-copyspace_24972-1792.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blue-gradient-abstract-background-empty-room-with-space-your-text-picture_1258-82820.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/school-supplies-stationery-blue-background-copy-space_169016-21510.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Trusted by 100+ businesses"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Ultra-Fast Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Mobile Responsive Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Conversion-Optimized UX",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "SEO Friendly",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "WhatsApp Integration",
|
||||
},
|
||||
{ type: "text", text: "Ultra-Fast Performance" },
|
||||
{ type: "text", text: "Mobile Responsive Design" },
|
||||
{ type: "text", text: "Conversion-Optimized UX" },
|
||||
{ type: "text", text: "SEO Friendly" },
|
||||
{ type: "text", text: "WhatsApp Integration" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -124,21 +82,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Ultra-Fast Performance",
|
||||
description: "Optimized code for lightning-fast loading speeds to keep customers engaged.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038841.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mobile Responsive",
|
||||
description: "Seamless experience on any device, ensuring you never miss a customer on mobile.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-computer-desk_23-2151004330.jpg",
|
||||
},
|
||||
{
|
||||
title: "Conversion UX",
|
||||
description: "Strategic layouts built to maximize your ROI and simplify the customer journey.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-device-with-blank-white-screen-display_9975-133589.jpg",
|
||||
},
|
||||
{ title: "Ultra-Fast Performance", description: "Optimized code for lightning-fast loading speeds to keep customers engaged.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038841.jpg" },
|
||||
{ title: "Mobile Responsive", description: "Seamless experience on any device, ensuring you never miss a customer on mobile.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-computer-desk_23-2151004330.jpg" },
|
||||
{ title: "Conversion UX", description: "Strategic layouts built to maximize your ROI and simplify the customer journey.", imageSrc: "http://img.b2bpic.net/free-photo/modern-tablet-device-with-blank-white-screen-display_9975-133589.jpg" },
|
||||
]}
|
||||
title="Built for Results"
|
||||
description="Comprehensive design solutions tailored to your unique business needs."
|
||||
@@ -150,49 +96,14 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mehrbyd Boutique",
|
||||
price: "Custom",
|
||||
variant: "eCommerce",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/reflection-from-laptop-glasses-dark-background_169016-63557.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sheqe Apparels",
|
||||
price: "Custom",
|
||||
variant: "eCommerce",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-working-with-tablet_23-2149930989.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "BlingVerse",
|
||||
price: "Custom",
|
||||
variant: "Jewelry",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workspace-with-laptop-mouse-coffee_23-2152003802.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "PKR Events",
|
||||
price: "Custom",
|
||||
variant: "Corporate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-general-manager-using-green-screen-evaluating-performance-metrics_482257-124506.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Canvaso Studio",
|
||||
price: "Custom",
|
||||
variant: "Portfolio",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-business-with-image_52683-26507.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Arova Design",
|
||||
price: "Custom",
|
||||
variant: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-business-man-holding-tablet_23-2150103591.jpg",
|
||||
},
|
||||
{ id: "1", name: "Mehrbyd Boutique", price: "Custom", variant: "eCommerce", imageSrc: "http://img.b2bpic.net/free-photo/reflection-from-laptop-glasses-dark-background_169016-63557.jpg" },
|
||||
{ id: "2", name: "Sheqe Apparels", price: "Custom", variant: "eCommerce", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-working-with-tablet_23-2149930989.jpg" },
|
||||
{ id: "3", name: "BlingVerse", price: "Custom", variant: "Jewelry", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workspace-with-laptop-mouse-coffee_23-2152003802.jpg" },
|
||||
{ id: "4", name: "PKR Events", price: "Custom", variant: "Corporate", imageSrc: "http://img.b2bpic.net/free-photo/young-general-manager-using-green-screen-evaluating-performance-metrics_482257-124506.jpg" },
|
||||
{ id: "5", name: "Canvaso Studio", price: "Custom", variant: "Portfolio", imageSrc: "http://img.b2bpic.net/free-vector/landing-page-business-with-image_52683-26507.jpg" },
|
||||
{ id: "6", name: "Arova Design", price: "Custom", variant: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-business-man-holding-tablet_23-2150103591.jpg" },
|
||||
]}
|
||||
title="Our Digital Portfolio"
|
||||
description="Explore the standard of design we bring to every single project."
|
||||
@@ -205,40 +116,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Starter Site",
|
||||
price: "₹4,999",
|
||||
period: "once",
|
||||
features: [
|
||||
"Mobile Responsive",
|
||||
"Fast Loading",
|
||||
"WhatsApp Integration",
|
||||
],
|
||||
button: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg",
|
||||
imageAlt: "Professional studio setup for AI generated content and photography editing",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Professional",
|
||||
price: "Custom",
|
||||
period: "quoted",
|
||||
features: [
|
||||
"eCommerce Ready",
|
||||
"Premium UX Design",
|
||||
"Priority Support",
|
||||
],
|
||||
button: {
|
||||
text: "Enquire Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-geometric-background-with-copy-space_24972-1815.jpg?_wi=2",
|
||||
imageAlt: "Professional studio setup for AI generated content and photography editing",
|
||||
},
|
||||
{ id: "p1", title: "Starter Site", price: "₹4,999", period: "once", features: ["Mobile Responsive", "Fast Loading", "WhatsApp Integration"], button: { text: "Get Started", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/professional-studio-setup-ai-generated-content-photography-editing_482257-126882.jpg" },
|
||||
{ id: "p2", title: "Professional", price: "Custom", period: "quoted", features: ["eCommerce Ready", "Premium UX Design", "Priority Support"], button: { text: "Enquire Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-geometric-background-with-copy-space_24972-1815.jpg" },
|
||||
]}
|
||||
title="Straightforward Pricing"
|
||||
description="Unlock premium web design for your brand starting at an unbeatable entry price."
|
||||
@@ -251,21 +130,9 @@ export default function LandingPage() {
|
||||
title="Growth by the Numbers"
|
||||
tag="Impact"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100+",
|
||||
description: "Projects Delivered",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24h",
|
||||
description: "Response Time",
|
||||
},
|
||||
{ id: "m1", value: "100+", description: "Projects Delivered" },
|
||||
{ id: "m2", value: "99%", description: "Client Satisfaction" },
|
||||
{ id: "m3", value: "24h", description: "Response Time" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -277,41 +144,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ananya P.",
|
||||
handle: "@business-owner",
|
||||
testimonial: "OpalFlow transformed our messy online store into a sleek, profitable machine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Rahul K.",
|
||||
handle: "@startup-founder",
|
||||
testimonial: "The speed and mobile responsiveness are unmatched. Our sales jumped 40%.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-confident-young-businesswoman-keeping-arms-crossed-looking-camera-w_1258-104422.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sana M.",
|
||||
handle: "@boutique-owner",
|
||||
testimonial: "Professional, fast, and exactly what we needed to scale. Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Vikram S.",
|
||||
handle: "@agency-lead",
|
||||
testimonial: "Premium service without the premium price tag. OpalFlow is a game changer.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1664.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Divya R.",
|
||||
handle: "@entrepreneur",
|
||||
testimonial: "Integrated WhatsApp perfectly. My customers love how easy it is to reach me now.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-taking-selfie_23-2148142674.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Ananya P.", handle: "@business-owner", testimonial: "OpalFlow transformed our messy online store into a sleek, profitable machine.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg" },
|
||||
{ id: "t2", name: "Rahul K.", handle: "@startup-founder", testimonial: "The speed and mobile responsiveness are unmatched. Our sales jumped 40%.", imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-confident-young-businesswoman-keeping-arms-crossed-looking-camera-w_1258-104422.jpg" },
|
||||
{ id: "t3", name: "Sana M.", handle: "@boutique-owner", testimonial: "Professional, fast, and exactly what we needed to scale. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg" },
|
||||
{ id: "t4", name: "Vikram S.", handle: "@agency-lead", testimonial: "Premium service without the premium price tag. OpalFlow is a game changer.", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1664.jpg" },
|
||||
{ id: "t5", name: "Divya R.", handle: "@entrepreneur", testimonial: "Integrated WhatsApp perfectly. My customers love how easy it is to reach me now.", imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-taking-selfie_23-2148142674.jpg" },
|
||||
]}
|
||||
title="Client Success Stories"
|
||||
description="See why businesses trust OpalFlow for their digital presence."
|
||||
@@ -323,21 +160,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long does a website take?",
|
||||
content: "Most projects are completed within 5-7 business days.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer eCommerce?",
|
||||
content: "Yes, we specialize in full-featured, secure eCommerce platforms.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is WhatsApp integration included?",
|
||||
content: "Absolutely. We set it up for direct communication.",
|
||||
},
|
||||
{ id: "f1", title: "How long does a website take?", content: "Most projects are completed within 5-7 business days." },
|
||||
{ id: "f2", title: "Do you offer eCommerce?", content: "Yes, we specialize in full-featured, secure eCommerce platforms." },
|
||||
{ id: "f3", title: "Is WhatsApp integration included?", content: "Absolutely. We set it up for direct communication." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here is what you need to know about our design process."
|
||||
@@ -348,32 +173,19 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Ready to Scale Your Brand?"
|
||||
description="Tell us what type of website you need, and let's turn it into a sales machine together."
|
||||
buttons={[
|
||||
{
|
||||
text: "Message Us on WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Message Us on WhatsApp", href: "https://wa.me/yournumber" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="OpalFlow"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Instagram",
|
||||
href: "https://instagram.com/opalflow.digital",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Instagram", href: "https://instagram.com/opalflow.digital" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user