bender/b4d3937e-1de7-44e0-9db8-f1dc56eecc9c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-07 07:39:45 +00:00
parent 2b0875ba6f
commit bab78b2e85
1 changed files with 51 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/app/page.tsx
View File

@@ -32,90 +32,33 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Features",
id: "features",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="ResponsiveCo"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "sparkles-gradient",
}}
background={{ variant: "sparkles-gradient" }}
title="Responsive Excellence for Every Screen"
description="We build websites that adapt seamlessly, ensuring your users enjoy a perfect experience whether they are on mobile, tablet, or desktop."
buttons={[
{
text: "Get Started",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/responsive-design-layout-software-concept_53876-124325.jpg?_wi=1"
buttons={[{ text: "Get Started", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/responsive-design-layout-software-concept_53876-124325.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/responsive-design-layout-internet-concept_53876-124371.jpg",
alt: "Responsive Design Layout Internet Concept",
},
{
src: "http://img.b2bpic.net/free-photo/top-view-hands-holding-tablet_23-2150162740.jpg",
alt: "Top view hands holding tablet",
},
{
src: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg",
alt: "Homepage seen on computer screen",
},
{
src: "http://img.b2bpic.net/free-photo/remote-control-digital-devices_23-2147929629.jpg",
alt: "Remote control of digital devices",
},
{
src: "http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173721.jpg",
alt: "Lifestyle of people in the office",
},
]}
marqueeItems={[
{
type: "text",
text: "Mobile-First",
},
{
type: "text",
text: "Adaptive",
},
{
type: "text",
text: "Fluid",
},
{
type: "text",
text: "Modern",
},
{
type: "text",
text: "Scalable",
},
{ src: "http://img.b2bpic.net/free-photo/responsive-design-layout-internet-concept_53876-124371.jpg", alt: "Responsive Design Layout Internet Concept" },
{ src: "http://img.b2bpic.net/free-photo/top-view-hands-holding-tablet_23-2150162740.jpg", alt: "Top view hands holding tablet" },
{ src: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg", alt: "Homepage seen on computer screen" },
{ src: "http://img.b2bpic.net/free-photo/remote-control-digital-devices_23-2147929629.jpg", alt: "Remote control of digital devices" },
{ src: "http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173721.jpg", alt: "Lifestyle of people in the office" }
]}
marqueeItems={[{ type: "text", text: "Mobile-First" }, { type: "text", text: "Adaptive" }, { type: "text", text: "Fluid" }, { type: "text", text: "Modern" }, { type: "text", text: "Scalable" }]}
/>
</div>
@@ -125,20 +68,11 @@ export default function LandingPage() {
title="Built for the Modern Web"
description="Our architecture prioritizes performance and fluid responsiveness, giving your brand the foundation it needs to thrive in a multi-device world."
metrics={[
{
value: "99.9%",
title: "Uptime",
},
{
value: "100ms",
title: "Load Time",
},
{
value: "500+",
title: "Responsive Sites",
},
{ value: "99.9%", title: "Uptime" },
{ value: "100ms", title: "Load Time" },
{ value: "500+", title: "Responsive Sites" }
]}
imageSrc="http://img.b2bpic.net/free-photo/man-listens-black-woman-with-clipboard_482257-120085.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/man-listens-black-woman-with-clipboard_482257-120085.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
@@ -151,50 +85,17 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Fluid Grids",
description: "Layouts that resize proportionally.",
icon: Layout,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160270.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149203473.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/responsive-design-layout-software-concept_53876-124325.jpg?_wi=2",
imageAlt: "tech data connection abstract",
title: "Fluid Grids", description: "Layouts that resize proportionally.", icon: Layout,
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160270.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149203473.jpg" }]
},
{
title: "Flexible Media",
description: "Images that scale to fit any container.",
icon: Image,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/gradient-3d-fluid-background_23-2150499029.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/man-listens-black-woman-with-clipboard_482257-120085.jpg?_wi=2",
imageAlt: "tech data connection abstract",
title: "Flexible Media", description: "Images that scale to fit any container.", icon: Image,
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/gradient-3d-fluid-background_23-2150499029.jpg" }]
},
{
title: "Adaptive Modules",
description: "Components that change based on context.",
icon: Layers,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/interconnected-screens-collage-showing-modern-social-media-feed-clips_482257-129691.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg?_wi=1",
imageAlt: "tech data connection abstract",
},
title: "Adaptive Modules", description: "Components that change based on context.", icon: Layers,
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/interconnected-screens-collage-showing-modern-social-media-feed-clips_482257-129691.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg" }]
}
]}
title="Engineered for Flexibility"
description="Advanced technical features that make your content work beautifully everywhere."
@@ -208,48 +109,12 @@ export default function LandingPage() {
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Base Framework",
price: "$99",
variant: "Basic",
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg?_wi=2",
},
{
id: "p2",
name: "Pro Kit",
price: "$199",
variant: "Advanced",
imageSrc: "http://img.b2bpic.net/free-photo/mockup-tablet-servers-monitoring_482257-89019.jpg",
},
{
id: "p3",
name: "Enterprise Shell",
price: "$499",
variant: "Corporate",
imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg",
},
{
id: "p4",
name: "Mobile Suite",
price: "$149",
variant: "Mobile",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg",
},
{
id: "p5",
name: "Desktop Optimizer",
price: "$249",
variant: "Desktop",
imageSrc: "http://img.b2bpic.net/free-photo/glowing-finger-controls-modern-nightlife-technology-table-generated-by-ai_188544-27026.jpg",
},
{
id: "p6",
name: "Cloud Sync",
price: "$299",
variant: "Cloud",
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg",
},
{ id: "p1", name: "Base Framework", price: "$99", variant: "Basic", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg" },
{ id: "p2", name: "Pro Kit", price: "$199", variant: "Advanced", imageSrc: "http://img.b2bpic.net/free-photo/mockup-tablet-servers-monitoring_482257-89019.jpg" },
{ id: "p3", name: "Enterprise Shell", price: "$499", variant: "Corporate", imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg" },
{ id: "p4", name: "Mobile Suite", price: "$149", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg" },
{ id: "p5", name: "Desktop Optimizer", price: "$249", variant: "Desktop", imageSrc: "http://img.b2bpic.net/free-photo/glowing-finger-controls-modern-nightlife-technology-table-generated-by-ai_188544-27026.jpg" },
{ id: "p6", name: "Cloud Sync", price: "$299", variant: "Cloud", imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg" }
]}
title="Our Solutions"
description="Explore our suite of responsive web tools."
@@ -263,53 +128,17 @@ export default function LandingPage() {
useInvertedBackground={true}
plans={[
{
id: "basic",
tag: "Essential",
price: "$49",
period: "/mo",
description: "Perfect for individuals and small sites.",
button: {
text: "Choose Basic",
},
featuresTitle: "Included",
features: [
"Responsive Layouts",
"Basic Optimization",
"Email Support",
],
id: "basic", tag: "Essential", price: "$49", period: "/mo", description: "Perfect for individuals and small sites.", button: { text: "Choose Basic" },
featuresTitle: "Included", features: ["Responsive Layouts", "Basic Optimization", "Email Support"]
},
{
id: "pro",
tag: "Professional",
price: "$99",
period: "/mo",
description: "Best for growing businesses.",
button: {
text: "Choose Pro",
},
featuresTitle: "Included",
features: [
"Everything in Basic",
"Advanced Analytics",
"Priority Support",
],
id: "pro", tag: "Professional", price: "$99", period: "/mo", description: "Best for growing businesses.", button: { text: "Choose Pro" },
featuresTitle: "Included", features: ["Everything in Basic", "Advanced Analytics", "Priority Support"]
},
{
id: "ent",
tag: "Enterprise",
price: "$299",
period: "/mo",
description: "Customized for global teams.",
button: {
text: "Contact Us",
},
featuresTitle: "Included",
features: [
"Everything in Pro",
"Custom Development",
"24/7 Dedicated Support",
],
},
id: "ent", tag: "Enterprise", price: "$299", period: "/mo", description: "Customized for global teams.", button: { text: "Contact Us" },
featuresTitle: "Included", features: ["Everything in Pro", "Custom Development", "24/7 Dedicated Support"]
}
]}
title="Flexible Pricing Plans"
description="Transparent pricing for all project scales."
@@ -322,46 +151,11 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah J.",
handle: "@sarahj",
testimonial: "The responsiveness is flawless on every single device.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
},
{
id: "2",
name: "Mike T.",
handle: "@miket",
testimonial: "Finally, a site that looks good on my phone and my laptop.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg",
},
{
id: "3",
name: "Emily R.",
handle: "@emilyr",
testimonial: "Fast, clean, and truly responsive development.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",
},
{
id: "4",
name: "David K.",
handle: "@davidk",
testimonial: "Exceeded all our expectations regarding user experience.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-standing-office_23-2147899580.jpg",
},
{
id: "5",
name: "Lisa B.",
handle: "@lisab",
testimonial: "Excellent service and top-tier responsive design.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/attractive-legs-fashion-models-tulle-skirts-sneakers_197531-590.jpg",
},
{ id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "The responsiveness is flawless on every single device.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg" },
{ id: "2", name: "Mike T.", handle: "@miket", testimonial: "Finally, a site that looks good on my phone and my laptop.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg" },
{ id: "3", name: "Emily R.", handle: "@emilyr", testimonial: "Fast, clean, and truly responsive development.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg" },
{ id: "4", name: "David K.", handle: "@davidk", testimonial: "Exceeded all our expectations regarding user experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-standing-office_23-2147899580.jpg" },
{ id: "5", name: "Lisa B.", handle: "@lisab", testimonial: "Excellent service and top-tier responsive design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-legs-fashion-models-tulle-skirts-sneakers_197531-590.jpg" }
]}
showRating={true}
title="Trusted by Leaders"
@@ -374,21 +168,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "What does responsive mean?",
content: "It means your site adapts to every screen size automatically.",
},
{
id: "q2",
title: "Is SEO better?",
content: "Yes, search engines prefer responsive sites significantly.",
},
{
id: "q3",
title: "How long does it take?",
content: "We can get your responsive site ready within weeks.",
},
{ id: "q1", title: "What does responsive mean?", content: "It means your site adapts to every screen size automatically." },
{ id: "q2", title: "Is SEO better?", content: "Yes, search engines prefer responsive sites significantly." },
{ id: "q3", title: "How long does it take?", content: "We can get your responsive site ready within weeks." }
]}
title="Frequently Asked Questions"
description="Quick answers to common questions about responsive design."
@@ -399,18 +181,11 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
background={{ variant: "sparkles-gradient" }}
tag="Contact Us"
title="Ready to build your responsive site?"
description="Reach out and let's start creating a superior experience for your users today."
buttons={[
{
text: "Send a Message",
href: "#",
},
]}
buttons={[{ text: "Send a Message", href: "#" }]}
/>
</div>
@@ -419,32 +194,8 @@ export default function LandingPage() {
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-pattern-with-different-shades-colors_23-2148263956.jpg"
logoText="ResponsiveCo"
columns={[
{
title: "Product",
items: [
{
label: "Features",
href: "#",
},
{
label: "Pricing",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] },
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }
]}
/>
</div>