Merge version_1_1776936454778 into main #2
436
src/App.tsx
436
src/App.tsx
@@ -9,324 +9,160 @@ import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
|
||||
import TeamDetailedCards from '@/components/sections/team/TeamDetailedCards';
|
||||
import TestimonialAvatarCard from '@/components/sections/testimonial/TestimonialAvatarCard';
|
||||
import { CheckCircle, Github, Linkedin, Server, Shield, Twitter, Zap } from "lucide-react";
|
||||
import { CheckCircle, Linkedin, Server, Twitter, Github, Zap, Shield } from "lucide-react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Retro IT"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Retro IT"
|
||||
navItems={[
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Services", href: "#features" },
|
||||
{ name: "Pricing", href: "#pricing" },
|
||||
{ name: "Team", href: "#team" }
|
||||
]}
|
||||
ctaButton={{ text: "Contact Us", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
tag="Future of IT"
|
||||
title="Retro IT: Your Partner in Modern Solutions"
|
||||
description="We build scalable, secure, and future-proof technology solutions to accelerate your growth."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Our Services",
|
||||
href: "#features",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/boardroom-office-space-with-desks-stationary-tools-used-everyday-executive-tasks-company-department-place-empty-startup-coworking-space-small-business-decorations_482257-70394.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
tag="Future of IT"
|
||||
title="Retro IT: Your Partner in Modern Solutions"
|
||||
description="We build scalable, secure, and future-proof technology solutions to accelerate your growth."
|
||||
primaryButton={{ text: "Get Started", href: "#contact" }}
|
||||
secondaryButton={{ text: "Our Services", href: "#features" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/boardroom-office-space-with-desks-stationary-tools-used-everyday-executive-tasks-company-department-place-empty-startup-coworking-space-small-business-decorations_482257-70394.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Story"
|
||||
quote="Retro IT transformed our infrastructure, making our systems resilient and more efficient than ever before."
|
||||
author="Mark Sterling"
|
||||
role="Chief Operations Officer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/corporate-leaders-demonstrating-powerful-collaboration-strategic-thinking_482257-123995.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Story"
|
||||
quote="Retro IT transformed our infrastructure, making our systems resilient and more efficient than ever before."
|
||||
author="Mark Sterling"
|
||||
role="Chief Operations Officer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/corporate-leaders-demonstrating-powerful-collaboration-strategic-thinking_482257-123995.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="Our Core Services"
|
||||
title="Scalable IT Solutions"
|
||||
description="Comprehensive technology services to streamline your operations."
|
||||
items={[
|
||||
{
|
||||
icon: Server,
|
||||
title: "Managed Cloud",
|
||||
description: "Seamless cloud migrations and managed infrastructure.",
|
||||
mediaItems: [
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="Our Core Services"
|
||||
title="Scalable IT Solutions"
|
||||
description="Comprehensive technology services to streamline your operations."
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/saas-concept-collage_23-2149399281.jpg",
|
||||
icon: "Server", title: "Managed Cloud", description: "Seamless cloud migrations and managed infrastructure.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/saas-concept-collage_23-2149399281.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boardroom-office-space-with-desks-stationary-tools-used-everyday-executive-tasks-company-department-place-empty-startup-coworking-space-small-business-decorations_482257-70394.jpg?_wi=2",
|
||||
imageAlt: "server room abstract",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Cybersecurity",
|
||||
description: "Proactive protection for your critical data.",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elderly-it-programmer-using-tablet-assess-server-cybersecurity-dangers-arising-due-unsecured-network-connections-supervisor-ensuring-high-tech-facility-is-impenetrable-by-ddos-attacks_482257-68190.jpg",
|
||||
icon: "Shield", title: "Cybersecurity", description: "Proactive protection for your critical data.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/elderly-it-programmer-using-tablet-assess-server-cybersecurity-dangers-arising-due-unsecured-network-connections-supervisor-ensuring-high-tech-facility-is-impenetrable-by-ddos-attacks_482257-68190.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cloud-computing-electronic-chip-board-cloud-computer-is-system-transfer-data-information-upload-download-application-technology-transformation-concept_616485-59.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-computing-electronic-chip-board-cloud-computer-is-system-transfer-data-information-upload-download-application-technology-transformation-concept_616485-59.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/corporate-leaders-demonstrating-powerful-collaboration-strategic-thinking_482257-123995.jpg?_wi=2",
|
||||
imageAlt: "server room abstract",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Data Analytics",
|
||||
description: "Actionable insights from your complex data.",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-digital-age-futuristic-lock-illustration_23-2151998475.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-senior-call-center-agent-helping-customers-regain-access-accounts_482257-126661.jpg?_wi=1",
|
||||
imageAlt: "server room abstract",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
icon: "Zap", title: "Data Analytics", description: "Actionable insights from your complex data.", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-digital-age-futuristic-lock-illustration_23-2151998475.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSimpleCards
|
||||
tag="Flexible Plans"
|
||||
title="Transparent Pricing"
|
||||
description="Choose a plan that fits your business needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$499/mo",
|
||||
description: "Essential support for small teams.",
|
||||
features: [
|
||||
"24/7 Monitoring",
|
||||
"Cloud Setup",
|
||||
"Basic Security",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$999/mo",
|
||||
description: "Full-scale management for enterprises.",
|
||||
features: [
|
||||
"Everything in Starter",
|
||||
"Managed Security",
|
||||
"Dedicated Architect",
|
||||
"Priority Support",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Elite",
|
||||
price: "$1,999/mo",
|
||||
description: "Enterprise-grade IT strategy.",
|
||||
features: [
|
||||
"Everything in Pro",
|
||||
"Custom Software",
|
||||
"Cloud Consulting",
|
||||
"Full IT Team",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSimpleCards
|
||||
tag="Flexible Plans"
|
||||
title="Transparent Pricing"
|
||||
description="Choose a plan that fits your business needs."
|
||||
plans={[
|
||||
{ tag: "Starter", price: "$499/mo", description: "Essential support for small teams.", features: ["24/7 Monitoring", "Cloud Setup", "Basic Security"] },
|
||||
{ tag: "Pro", price: "$999/mo", description: "Full-scale management for enterprises.", features: ["Everything in Starter", "Managed Security", "Dedicated Architect", "Priority Support"] },
|
||||
{ tag: "Elite", price: "$1,999/mo", description: "Enterprise-grade IT strategy.", features: ["Everything in Pro", "Custom Software", "Cloud Consulting", "Full IT Team"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsGradientCards
|
||||
tag="Our Impact"
|
||||
title="Proven Results"
|
||||
description="Quantifiable success for our partners."
|
||||
metrics={[
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Guaranteed system availability.",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
value: "150+",
|
||||
title: "Projects",
|
||||
description: "Completed successfully.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
value: "500ms",
|
||||
title: "Latency",
|
||||
description: "Average response time.",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsGradientCards
|
||||
tag="Our Impact"
|
||||
title="Proven Results"
|
||||
description="Quantifiable success for our partners."
|
||||
metrics={[
|
||||
{ value: "99.9%", title: "Uptime", description: "Guaranteed system availability.", icon: "Server" },
|
||||
{ value: "150+", title: "Projects", description: "Completed successfully.", icon: "CheckCircle" },
|
||||
{ value: "500ms", title: "Latency", description: "Average response time.", icon: "Zap" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamDetailedCards
|
||||
tag="Our Experts"
|
||||
title="Meet the Team"
|
||||
description="Dedicated professionals behind your IT success."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Smith",
|
||||
role: "Lead Architect",
|
||||
description: "Expert in cloud architecture.",
|
||||
socialLinks: [
|
||||
{
|
||||
icon: Linkedin,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-programmer-walking-through-apartment-thinking-how-solve-coding-issues_482257-104090.jpg",
|
||||
},
|
||||
{
|
||||
name: "Maria Garcia",
|
||||
role: "Senior Consultant",
|
||||
description: "Focused on digital transformation.",
|
||||
socialLinks: [
|
||||
{
|
||||
icon: Linkedin,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-brunette-woman-with-laptop_273609-14320.jpg",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Data Scientist",
|
||||
description: "Analytics expert.",
|
||||
socialLinks: [
|
||||
{
|
||||
icon: Linkedin,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-engineer-manages-data-from-solar-machinery-desktop-working-solar-panel_482257-132203.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamDetailedCards
|
||||
tag="Our Experts"
|
||||
title="Meet the Team"
|
||||
description="Dedicated professionals behind your IT success."
|
||||
members={[
|
||||
{ name: "Alex Smith", role: "Lead Architect", description: "Expert in cloud architecture.", socialLinks: [{ icon: "Linkedin", url: "#" }], imageSrc: "http://img.b2bpic.net/free-photo/pensive-programmer-walking-through-apartment-thinking-how-solve-coding-issues_482257-104090.jpg" },
|
||||
{ name: "Maria Garcia", role: "Senior Consultant", description: "Focused on digital transformation.", socialLinks: [{ icon: "Linkedin", url: "#" }], imageSrc: "http://img.b2bpic.net/free-photo/young-brunette-woman-with-laptop_273609-14320.jpg" },
|
||||
{ name: "John Doe", role: "Data Scientist", description: "Analytics expert.", socialLinks: [{ icon: "Linkedin", url: "#" }], imageSrc: "http://img.b2bpic.net/free-photo/african-american-engineer-manages-data-from-solar-machinery-desktop-working-solar-panel_482257-132203.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialAvatarCard
|
||||
tag="Testimonials"
|
||||
title="What Clients Say"
|
||||
avatars={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael C.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lady-grey-suit-smiling-camera-background-stylish-cafe-with-lights_291650-637.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-works-computer-coworking-space-remote-work-workspace_1321-3093.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg",
|
||||
},
|
||||
{
|
||||
name: "Lisa B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialAvatarCard
|
||||
tag="Testimonials"
|
||||
title="What Clients Say"
|
||||
avatars={[
|
||||
{ name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg" },
|
||||
{ name: "Michael C.", imageSrc: "http://img.b2bpic.net/free-photo/lady-grey-suit-smiling-camera-background-stylish-cafe-with-lights_291650-637.jpg" },
|
||||
{ name: "Elena R.", imageSrc: "http://img.b2bpic.net/free-photo/man-works-computer-coworking-space-remote-work-workspace_1321-3093.jpg" },
|
||||
{ name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg" },
|
||||
{ name: "Lisa B.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="Quick answers to common IT infrastructure concerns."
|
||||
items={[
|
||||
{
|
||||
question: "What is the setup time?",
|
||||
answer: "Typical setups take 48-72 hours.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer migration support?",
|
||||
answer: "Yes, we handle end-to-end migration.",
|
||||
},
|
||||
{
|
||||
question: "Is security guaranteed?",
|
||||
answer: "Yes, we implement industry-standard protocols.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-senior-call-center-agent-helping-customers-regain-access-accounts_482257-126661.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Support"
|
||||
title="Common Questions"
|
||||
description="Quick answers to common IT infrastructure concerns."
|
||||
items={[
|
||||
{ question: "What is the setup time?", answer: "Typical setups take 48-72 hours." },
|
||||
{ question: "Do you offer migration support?", answer: "Yes, we handle end-to-end migration." },
|
||||
{ question: "Is security guaranteed?", answer: "Yes, we implement industry-standard protocols." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-senior-call-center-agent-helping-customers-regain-access-accounts_482257-126661.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Let's Connect"
|
||||
text="Ready to modernize your infrastructure? Start your journey today."
|
||||
primaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Let's Connect"
|
||||
text="Ready to modernize your infrastructure? Start your journey today."
|
||||
primaryButton={{ text: "Contact Us", href: "#" }}
|
||||
secondaryButton={{ text: "Learn More", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMinimal
|
||||
brand="Retro IT"
|
||||
copyright="© 2024 Retro IT. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMinimal
|
||||
brand="Retro IT"
|
||||
copyright="© 2024 Retro IT. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: "Twitter", href: "#" },
|
||||
{ icon: "Linkedin", href: "#" },
|
||||
{ icon: "Github", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user