Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
403
src/app/page.tsx
403
src/app/page.tsx
@@ -26,293 +26,134 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Misbaah Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Work", id: "portfolio" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Misbaah Studio"
|
||||
button={{ text: "Let's Talk", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
title="Misbaah Studio"
|
||||
description="Creating immersive 3D web experiences."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=1",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=2",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=3",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=4",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=5",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=6",
|
||||
imageAlt: "3D Hero Scene",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
title="Misbaah Studio"
|
||||
description="Creating immersive 3D web experiences."
|
||||
buttons={[
|
||||
{ text: "View Work", href: "#portfolio" },
|
||||
{ text: "Contact Me", href: "#contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="About Studio"
|
||||
description="I am a creative developer specializing in 3D websites, animations, and modern UI experiences. Blending technology with art to create digital masterpieces."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=7"
|
||||
imageAlt="Creative Developer Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="About Studio"
|
||||
description="I am a creative developer specializing in 3D websites, animations, and modern UI experiences. Blending technology with art to create digital masterpieces."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg"
|
||||
imageAlt="Creative Developer Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "3D Website Development",
|
||||
description: "Immersive environments built for performance.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=1",
|
||||
imageAlt: "3D Web Dev",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: "Three.js Performance",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
text: "Custom Shaders",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=8",
|
||||
imageAlt: "3d glowing orb dark background",
|
||||
},
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description: "High-end user interfaces that capture attention.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=1",
|
||||
imageAlt: "UI/UX Design",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Award,
|
||||
text: "Pixel Perfect",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
text: "Mobile Optimized",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=2",
|
||||
imageAlt: "abstract 3d wireframe shape",
|
||||
},
|
||||
{
|
||||
title: "Animation Design",
|
||||
description: "Bespoke animations that bring interfaces to life.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=3",
|
||||
imageAlt: "Animation Design",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Star,
|
||||
text: "GSAP Motion",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Dynamic Triggers",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=2",
|
||||
imageAlt: "ui design 3d render",
|
||||
},
|
||||
{
|
||||
title: "Portfolio Websites",
|
||||
description: "Showcase your work with style and grace.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=3",
|
||||
imageAlt: "Portfolio Sites",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Star,
|
||||
text: "Fast Loading",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
text: "SEO Optimized",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=1",
|
||||
imageAlt: "portfolio project 3d preview",
|
||||
},
|
||||
]}
|
||||
title="My Services"
|
||||
description="Premium digital solutions tailored for your unique vision."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "3D Website Development", description: "Immersive environments built for performance.", media: { imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg", imageAlt: "3D Web Dev" },
|
||||
items: [
|
||||
{ icon: Sparkles, text: "Three.js Performance" },
|
||||
{ icon: Shield, text: "Custom Shaders" },
|
||||
],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "UI/UX Design", description: "High-end user interfaces that capture attention.", media: { imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg", imageAlt: "UI/UX Design" },
|
||||
items: [
|
||||
{ icon: Award, text: "Pixel Perfect" },
|
||||
{ icon: Zap, text: "Mobile Optimized" },
|
||||
],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "Animation Design", description: "Bespoke animations that bring interfaces to life.", media: { imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg", imageAlt: "Animation Design" },
|
||||
items: [
|
||||
{ icon: Star, text: "GSAP Motion" },
|
||||
{ icon: CheckCircle, text: "Dynamic Triggers" },
|
||||
],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Portfolio Websites", description: "Showcase your work with style and grace.", media: { imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg", imageAlt: "Portfolio Sites" },
|
||||
items: [
|
||||
{ icon: Star, text: "Fast Loading" },
|
||||
{ icon: Zap, text: "SEO Optimized" },
|
||||
],
|
||||
reverse: true
|
||||
},
|
||||
]}
|
||||
title="My Services"
|
||||
description="Premium digital solutions tailored for your unique vision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Digital Aura",
|
||||
price: "Studio Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Abstract Flow",
|
||||
price: "Concept UI",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Neon Horizon",
|
||||
price: "WebGL Art",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Golden Matrix",
|
||||
price: "Experience",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=5",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Void Render",
|
||||
price: "3D Product",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=6",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Studio Case",
|
||||
price: "Interactive",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=7",
|
||||
},
|
||||
]}
|
||||
title="Selected Projects"
|
||||
description="Recent creative ventures into 3D digital reality."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Digital Aura", price: "Studio Project", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
{ id: "2", name: "Abstract Flow", price: "Concept UI", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
{ id: "3", name: "Neon Horizon", price: "WebGL Art", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
{ id: "4", name: "Golden Matrix", price: "Experience", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
{ id: "5", name: "Void Render", price: "3D Product", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
{ id: "6", name: "Studio Case", price: "Interactive", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
|
||||
]}
|
||||
title="Selected Projects"
|
||||
description="Recent creative ventures into 3D digital reality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
text="Let's build something extraordinary together. Reach out via WhatsApp +91 9479427424 or email at hello@misbaah.studio"
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp Now",
|
||||
href: "https://wa.me/919479427424",
|
||||
},
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:hello@misbaah.studio",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
text="Let's build something extraordinary together. Reach out via WhatsApp +91 9479427424 or email at hello@misbaah.studio"
|
||||
buttons={[
|
||||
{ text: "WhatsApp Now", href: "https://wa.me/919479427424" },
|
||||
{ text: "Email Me", href: "mailto:hello@misbaah.studio" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Misbaah Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© Misbaah Studio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Misbaah Studio"
|
||||
columns={[
|
||||
{ title: "Connect", items: [{ label: "LinkedIn", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
{ title: "Studio", items: [{ label: "Work", href: "#portfolio" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© Misbaah Studio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user