Merge version_2_1781407843903 into main #2
@@ -67,9 +67,13 @@ export default function Layout() {
|
||||
copyright="© 2024 FabRichhhhhh. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Twitter", href: "https://twitter.com"},
|
||||
label: "YouTube", href: "https://youtube.com/@alizoyabbas?si=mj9Hd_4Ev_GJHJid"},
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com"},
|
||||
label: "Instagram", href: "https://www.instagram.com/zoyabbas.ali?igsh=dnNqNjc4Yzhva3R6"},
|
||||
{
|
||||
label: "LinkedIn", href: "https://www.linkedin.com/in/zoya-abbas-ali-1338b5214?utm_source=share_via&utm_content=profile&utm_medium=member_android"},
|
||||
{
|
||||
label: "Threads", href: "https://www.threads.com/@zoyabbas.ali"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-108120.jpg"
|
||||
/>
|
||||
|
||||
@@ -1,300 +1,36 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import SetupSection from './HomePage/sections/Setup';
|
||||
import ProductShowcaseSection from './HomePage/sections/ProductShowcase';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="AI-Powered Site Builder"
|
||||
title="Turn Instagram into a $100M Website"
|
||||
description="Stop worrying about coding. Paste one prompt into Claude Code, link your Instagram, and get a premium, high-converting website in minutes."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-background-with-sunset-projector-lamp_53876-103790.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-varicolored-soap-bubble-background_23-2148235939.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multi-colored-psychedelic-background_23-2148805242.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-3d-fluid-background_23-2150499064.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-varicolored-hued-vibrant-soap-bubble-background_23-2148235698.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-abstract-waves-black-dots_23-2148231719.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-multi-colored-watercolor-splashing-together-black-backdrop_23-2147837324.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-saturated-soap-bubble-background_23-2148235714.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-seaside-with-water-sand_23-2148231672.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-vibrant-rippled-soap-bubble-black-background_23-2148235709.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-blue-yellow-sphere_23-2148235952.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-screen-software-developer-typing-programming-language-it-startup-agency-display-concept-system-engineer-writing-source-code-scrolling-text-database-functions-script_482257-33355.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Philosophy"
|
||||
quote="The simplest way to go from a social presence to a fully-functioning premium business website. No code required, just intelligence."
|
||||
author="FabRichhhhhh"
|
||||
role="Product Designer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="setup" data-section="setup">
|
||||
<SectionErrorBoundary name="setup">
|
||||
<FeaturesRevealCards
|
||||
tag="Part 1"
|
||||
title="Getting You Ready"
|
||||
description="A quick 3-step process to prepare your local environment."
|
||||
items={[
|
||||
{
|
||||
title: "Create Folder",
|
||||
description: "Make an empty folder on your desktop for your project files.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
|
||||
},
|
||||
{
|
||||
title: "Open Claude",
|
||||
description: "Launch the Claude Desktop app and navigate to the Code section.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colon-punctuation-mark-front-side_187299-47193.jpg",
|
||||
},
|
||||
{
|
||||
title: "Configure Apify",
|
||||
description: "Obtain your Personal API token from Apify to enable data scraping.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SetupSection />
|
||||
|
||||
<div id="product-showcase" data-section="product-showcase">
|
||||
<SectionErrorBoundary name="product-showcase">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Deliverables"
|
||||
title="What You Get"
|
||||
description="Every site we build comes with a complete, modern stack."
|
||||
items={[
|
||||
{
|
||||
title: "Responsive UI",
|
||||
description: "Mobile-first design for perfect mobile performance.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design-smartphone_23-2150165982.jpg",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimized",
|
||||
description: "Built-in search engine optimization.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-clean-phone-right-side-white-background_187299-36611.jpg",
|
||||
},
|
||||
{
|
||||
title: "Analytics Integration",
|
||||
description: "Track your visitors effortlessly.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg",
|
||||
},
|
||||
{
|
||||
title: "Secure Hosting",
|
||||
description: "Deploy to Vercel in seconds.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fast Loading",
|
||||
description: "Optimized images and clean code.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-with-gradient-style_23-2147887302.jpg",
|
||||
},
|
||||
{
|
||||
title: "Custom Branding",
|
||||
description: "Styled to match your Instagram.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalistic-technology-landing-page_23-2149107139.jpg",
|
||||
},
|
||||
{
|
||||
title: "Easy Updates",
|
||||
description: "Easily manage your content.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/orange-white-stock-trading-infographic-template-design_53876-100720.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductShowcaseSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Performance"
|
||||
title="Real World Results"
|
||||
description="Built for speed and conversion."
|
||||
metrics={[
|
||||
{
|
||||
value: "99+",
|
||||
title: "Page Speed Score",
|
||||
features: [
|
||||
"Optimized images",
|
||||
"Efficient loading",
|
||||
"Clean code",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "2x",
|
||||
title: "Conversion Lift",
|
||||
features: [
|
||||
"Optimized CTAs",
|
||||
"Clear hierarchy",
|
||||
"Mobile first",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "10m",
|
||||
title: "Avg Setup Time",
|
||||
features: [
|
||||
"One prompt",
|
||||
"Easy configuration",
|
||||
"Automated flow",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Community"
|
||||
title="Built for Founders"
|
||||
description="See what others have created."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah",
|
||||
role: "Shop Owner",
|
||||
quote: "I never thought I could have a pro site. Claude built it for me in minutes.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-student-smiling-confident-standing-library-university_839833-29769.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike",
|
||||
role: "Designer",
|
||||
quote: "The setup was seamless and the results are incredibly polished.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-office_23-2148452664.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena",
|
||||
role: "Creative",
|
||||
quote: "This changed how I view web development. Absolute game changer.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg",
|
||||
},
|
||||
{
|
||||
name: "David",
|
||||
role: "Developer",
|
||||
quote: "Perfect for small businesses wanting a fast, clean professional site.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/developer-drinking-coffee-updating-artificial-intelligence-machine-learning_482257-104327.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica",
|
||||
role: "Founder",
|
||||
quote: "Highly recommended for any Instagram-first business.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
|
||||
},
|
||||
{
|
||||
name: "Tom",
|
||||
role: "Innovator",
|
||||
quote: "Fast, reliable, and looks fantastic on mobile.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bike-shop-with-shop-assistant_23-2148138822.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Questions"
|
||||
title="Common Questions"
|
||||
description="Get the answers you need."
|
||||
items={[
|
||||
{
|
||||
question: "Do I need coding skills?",
|
||||
answer: "Absolutely not. Claude handles all the code generation.",
|
||||
},
|
||||
{
|
||||
question: "What is an Apify key?",
|
||||
answer: "An Apify key is a simple token that lets Claude scrape your Instagram data.",
|
||||
},
|
||||
{
|
||||
question: "Can I deploy the site myself?",
|
||||
answer: "Yes, Claude will guide you through the hosting process.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Launch"
|
||||
text="Ready to build your new premium business website? Get started today."
|
||||
primaryButton={{
|
||||
text: "Get the Prompt",
|
||||
href: "#prompt",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Me",
|
||||
href: "#footer",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Philosophy"
|
||||
quote="The simplest way to go from a social presence to a fully-functioning premium business website. No code required, just intelligence."
|
||||
author="FabRichhhhhh"
|
||||
role="Product Designer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Launch"
|
||||
text="Ready to build your new premium business website? Get started today."
|
||||
primaryButton={{
|
||||
text: "Get the Prompt",
|
||||
href: "#prompt",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Me",
|
||||
href: "#footer",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Faq.tsx
Normal file
34
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Questions"
|
||||
title="Common Questions"
|
||||
description="Get the answers you need."
|
||||
items={[
|
||||
{
|
||||
question: "Do I need coding skills?",
|
||||
answer: "Absolutely not. Claude handles all the code generation.",
|
||||
},
|
||||
{
|
||||
question: "What is an Apify key?",
|
||||
answer: "An Apify key is a simple token that lets Claude scrape your Instagram data.",
|
||||
},
|
||||
{
|
||||
question: "Can I deploy the site myself?",
|
||||
answer: "Yes, Claude will guide you through the hosting process.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
src/pages/HomePage/sections/Hero.tsx
Normal file
68
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="AI-Powered Site Builder"
|
||||
title="Turn Instagram into a $100M Website"
|
||||
description="Stop worrying about coding. Paste one prompt into Claude Code, link your Instagram, and get a premium, high-converting website in minutes."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-background-with-sunset-projector-lamp_53876-103790.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-varicolored-soap-bubble-background_23-2148235939.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multi-colored-psychedelic-background_23-2148805242.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-3d-fluid-background_23-2150499064.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-varicolored-hued-vibrant-soap-bubble-background_23-2148235698.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-abstract-waves-black-dots_23-2148231719.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-multi-colored-watercolor-splashing-together-black-backdrop_23-2147837324.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-saturated-soap-bubble-background_23-2148235714.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-seaside-with-water-sand_23-2148231672.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-vibrant-rippled-soap-bubble-black-background_23-2148235709.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-blue-yellow-sphere_23-2148235952.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-screen-software-developer-typing-programming-language-it-startup-agency-display-concept-system-engineer-writing-source-code-scrolling-text-database-functions-script_482257-33355.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Performance"
|
||||
title="Real World Results"
|
||||
description="Built for speed and conversion."
|
||||
metrics={[
|
||||
{
|
||||
value: "99+",
|
||||
title: "Page Speed Score",
|
||||
features: [
|
||||
"Optimized images",
|
||||
"Efficient loading",
|
||||
"Clean code",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "2x",
|
||||
title: "Conversion Lift",
|
||||
features: [
|
||||
"Optimized CTAs",
|
||||
"Clear hierarchy",
|
||||
"Mobile first",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "10m",
|
||||
title: "Avg Setup Time",
|
||||
features: [
|
||||
"One prompt",
|
||||
"Easy configuration",
|
||||
"Automated flow",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/ProductShowcase.tsx
Normal file
64
src/pages/HomePage/sections/ProductShowcase.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "product-showcase" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductShowcaseSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="product-showcase" data-section="product-showcase">
|
||||
<SectionErrorBoundary name="product-showcase">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Deliverables"
|
||||
title="What You Get"
|
||||
description="Every site we build comes with a complete, modern stack."
|
||||
items={[
|
||||
{
|
||||
title: "Responsive UI",
|
||||
description: "Mobile-first design for perfect mobile performance.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design-smartphone_23-2150165982.jpg",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimized",
|
||||
description: "Built-in search engine optimization.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-clean-phone-right-side-white-background_187299-36611.jpg",
|
||||
},
|
||||
{
|
||||
title: "Analytics Integration",
|
||||
description: "Track your visitors effortlessly.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg",
|
||||
},
|
||||
{
|
||||
title: "Secure Hosting",
|
||||
description: "Deploy to Vercel in seconds.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fast Loading",
|
||||
description: "Optimized images and clean code.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-with-gradient-style_23-2147887302.jpg",
|
||||
},
|
||||
{
|
||||
title: "Custom Branding",
|
||||
description: "Styled to match your Instagram.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimalistic-technology-landing-page_23-2149107139.jpg",
|
||||
},
|
||||
{
|
||||
title: "Easy Updates",
|
||||
description: "Easily manage your content.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/orange-white-stock-trading-infographic-template-design_53876-100720.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Setup.tsx
Normal file
37
src/pages/HomePage/sections/Setup.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "setup" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SetupSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="setup" data-section="setup">
|
||||
<SectionErrorBoundary name="setup">
|
||||
<FeaturesRevealCards
|
||||
tag="Part 1"
|
||||
title="Getting You Ready"
|
||||
description="A quick 3-step process to prepare your local environment."
|
||||
items={[
|
||||
{
|
||||
title: "Create Folder",
|
||||
description: "Make an empty folder on your desktop for your project files.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
|
||||
},
|
||||
{
|
||||
title: "Open Claude",
|
||||
description: "Launch the Claude Desktop app and navigate to the Code section.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colon-punctuation-mark-front-side_187299-47193.jpg",
|
||||
},
|
||||
{
|
||||
title: "Configure Apify",
|
||||
description: "Obtain your Personal API token from Apify to enable data scraping.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/Testimonials.tsx
Normal file
64
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Community"
|
||||
title="Built for Founders"
|
||||
description="See what others have created."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah",
|
||||
role: "Shop Owner",
|
||||
quote: "I never thought I could have a pro site. Claude built it for me in minutes.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-student-smiling-confident-standing-library-university_839833-29769.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike",
|
||||
role: "Designer",
|
||||
quote: "The setup was seamless and the results are incredibly polished.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-office_23-2148452664.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena",
|
||||
role: "Creative",
|
||||
quote: "This changed how I view web development. Absolute game changer.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg",
|
||||
},
|
||||
{
|
||||
name: "David",
|
||||
role: "Developer",
|
||||
quote: "Perfect for small businesses wanting a fast, clean professional site.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/developer-drinking-coffee-updating-artificial-intelligence-machine-learning_482257-104327.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica",
|
||||
role: "Founder",
|
||||
quote: "Highly recommended for any Instagram-first business.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
|
||||
},
|
||||
{
|
||||
name: "Tom",
|
||||
role: "Innovator",
|
||||
quote: "Fast, reliable, and looks fantastic on mobile.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bike-shop-with-shop-assistant_23-2148138822.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user