Merge version_2_1781407843903 into main #2

Merged
bender merged 1 commits from version_2_1781407843903 into main 2026-06-14 03:32:28 +00:00
10 changed files with 395 additions and 290 deletions

View File

@@ -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"
/>

View File

@@ -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 />
</>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}