Skip to content

Commit

Permalink
Merge pull request #229 from gruz0/ui/refine-concept-pages
Browse files Browse the repository at this point in the history 
Refine concept pages
  • Loading branch information
@gruz0
gruz0 authored Jan 17, 2025
2 parents c761eea + 5690263 commit 123ced8
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 131 deletions.
42 changes: 25 additions & 17 deletions src/app/concepts/[id]/NotWellDefinedProblem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'
import React from 'react'
import ConceptForm from '@/components/ConceptForm'
import Paragraph from '@/components/Paragraph'

import Section from '@/components/Section'

interface TargetAudience {
Expand All @@ -26,22 +26,19 @@ interface Props {

const NotWellDefinedProblem = ({ problem, evaluation }: Props) => (
<div>
<Section header="Oops! We Need a Bit More Information 🤔">
<Paragraph>
It seems that the problem you&apos;ve shared is a bit too unclear for us
to analyze the market effectively.
</Paragraph>

<Paragraph>
To provide you with the best insights, could you please give us more
details about the specific challenges your product aims to solve? The
clearer you can be about the problem, the better we can assist you in
understanding the potential market for your idea. Feel free to give it
another shot in the form below!
</Paragraph>
</Section>
<h1 className="mb-6 text-3xl font-bold text-red-600 md:text-4xl">
Hmm, We Need More Clarity! 🤔
</h1>

<p className="mb-6 text-lg md:text-2xl">
No worries—sometimes ideas need a bit more detail. Let&apos;s make sure we
fully capture what you&apos;re trying to build, so we can offer the best
insights.
</p>

<hr className="my-6 md:my-8" />

<Section header="This Is How You Can Improve Your Problem Statement:">
<Section header="✍️ Try These Steps to Sharpen Your Idea:">
<div className="grid grid-cols-1 gap-4 md:gap-6">
{evaluation.suggestions.map((item, index) => (
<div
Expand All @@ -56,7 +53,18 @@ const NotWellDefinedProblem = ({ problem, evaluation }: Props) => (

<hr className="my-6 md:my-8" />

<ConceptForm problem={problem} />
<Section header="💡 Example of a Clear Problem Statement:">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900/50">
I&apos;m building a mobile app that connects local freelancers with
small businesses needing short-term services. My goal is to reduce the
time freelancers spend searching for gigs and provide businesses with a
quick hiring tool.
</div>
</Section>

<hr className="my-6 md:my-8" />

<ConceptForm problem={problem} cta="Give It Another Shot" />
</div>
)

Expand Down
186 changes: 113 additions & 73 deletions src/app/concepts/[id]/ProblemRequiresChanges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,46 +76,57 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {

return (
<div>
<h1 className="mb-6 text-3xl font-bold text-orange-600 md:text-4xl">
Looks Good, But Let&apos;s Polish It Up
</h1>

{evaluation.marketExistence ? (
<Section header="Market Existence:">
<Paragraph>
{evaluation.marketExistence.split('\n').map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
</Paragraph>
</Section>
<>
<p className="mb-6 text-lg md:text-2xl">
Your idea is off to a great start. We can either dive into the full
analysis now, or you can refine your problem statement for even more
accurate insights.
</p>

<hr className="my-6 md:my-8" />

<Section header="🔎 How Big Could This Get?">
<Paragraph>
{evaluation.marketExistence.split('\n').map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
</Paragraph>
</Section>
</>
) : (
<Section header="Oops! We Need a Bit More Information 🤔">
<Paragraph>
It looks like the problem you&apos;ve provided is a little too vague
for us to figure out the market landscape. To give you the best
insights, could you please add more details about the specific
challenges your product addresses? The clearer your problem
definition, the better we can help you understand the potential
market for your idea.
</Paragraph>

<Section header="Hmm, We Need More Clarity! 🤔">
<Paragraph>
Feel free to give it another shot in the form below!
No worries—sometimes ideas need a bit more detail. Let&apos;s make
sure we fully capture what you&apos;re trying to build, so we can
offer the best insights.
</Paragraph>
</Section>
)}

<Section header="How You Described a Problem:">
<Paragraph>
<hr className="my-6 md:my-8" />

<Section header="📝 Your Original Statement:">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 md:px-6 md:text-lg dark:bg-gray-900/50">
{problem.split('\n').map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
</Paragraph>
</div>
</Section>

<Section header="How To Improve Your Problem Statement:">
<hr className="my-6 md:my-8" />

<Section header="✍️ Try These Steps to Sharpen Your Idea:">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
{evaluation.suggestions.map((item, index) => (
<div
Expand All @@ -131,56 +142,81 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
</Section>

{evaluation.recommendations.length > 0 && (
<Section header="Alternative Problem Statements That Might Fit Better:">
<div className="mb-6 grid grid-cols-1 gap-4 md:gap-6">
{evaluation.recommendations.map((item, index) => (
<div
key={index}
className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900/50"
>
<p className="grow md:text-lg">{item}</p>

<div className="mt-6">
<Link
href={{
pathname: '/start',
query: { problem: item },
}}
target="_blank"
className="rounded bg-gray-500 px-4 py-2 text-white transition duration-300 hover:bg-blue-700"
>
Validate This Problem Instead
</Link>
<>
<hr className="my-6 md:my-8" />

<Section header="💡 Or Try These Auto-Generated Rewrites and Tweaks:">
<div className="mb-6 grid grid-cols-1 gap-4 md:gap-6">
{evaluation.recommendations.map((item, index) => (
<div
key={index}
className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 md:p-6 dark:bg-gray-900/50"
>
<p className="grow md:text-lg">{item}</p>

<div className="mt-6">
<Link
href={{
pathname: '/start',
query: { problem: item },
}}
target="_blank"
className="inline-flex items-center gap-2 rounded bg-gray-500 px-4 py-2 text-white transition duration-300 hover:bg-blue-700"
>
Validate This Problem Instead
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
clipRule="evenodd"
/>
</svg>
</Link>
</div>
</div>
</div>
))}
</div>
</Section>
))}
</div>
</Section>
</>
)}

{evaluation.targetAudience.length > 0 && (
<Section header="Target Audiences:">
<div className="grid grid-cols-1 gap-6">
{evaluation.targetAudience.map((item, index) => (
<div
key={index}
className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900/50"
>
<p className="mb-4 text-lg font-bold md:text-xl">
{item.segment}
</p>

<p className="mb-4 md:text-lg">{item.description}</p>

<p className="mb-4 font-semibold md:text-lg">
Their Challenges:
</p>

<SimpleUnorderedList items={item.challenges} />
</div>
))}
</div>
</Section>
<>
<hr className="my-6 md:my-8" />

<Section header="👥 Who's This Really For?">
<div className="grid grid-cols-1 gap-6">
{evaluation.targetAudience.map((item, index) => (
<div
key={index}
className="flex flex-col rounded-lg border border-gray-200 bg-gray-50 p-4 pb-0 md:p-6 md:pb-0 dark:bg-gray-900/50"
>
<p className="mb-4 text-lg font-bold md:text-xl">
{item.segment}
</p>

<p className="mb-4 md:text-lg">{item.description}</p>

<p className="mb-4 font-semibold md:text-lg">
Their Challenges:
</p>

<SimpleUnorderedList items={item.challenges} />
</div>
))}
</div>
</Section>
</>
)}

<hr className="my-6 md:my-8" />
Expand All @@ -192,7 +228,11 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
)}

{evaluation.marketExistence && evaluation.targetAudience.length > 0 ? (
<div className="py-2 text-center md:py-4">
<Section header="Ready for a Full Breakdown?">
<p className="mb-6 text-lg md:text-xl">
Explore complete competitor breakdowns, marketing angles, and more.
</p>

<button
type="button"
onClick={handleSubmit}
Expand All @@ -201,7 +241,7 @@ const ProblemRequiresChanges = ({ conceptId, problem, evaluation }: Props) => {
>
{status === 'loading' ? 'Saving...' : 'Go To Detailed Analysis'}
</button>
</div>
</Section>
) : (
<ConceptForm problem={problem} hideExamples />
)}
Expand Down
41 changes: 8 additions & 33 deletions src/app/concepts/[id]/ReportPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,40 +37,15 @@ const ReportPage = ({ concept }: Props) => {

return (
<div className="p-4 md:p-6 lg:p-8">
<h1 className="mb-6 text-3xl font-bold md:text-4xl">
Concept Evaluation:{' '}
{concept.evaluation ? (
<span
className={
concept.evaluation.status === 'well-defined'
? 'text-green-600'
: concept.evaluation.status === 'requires_changes'
? 'text-orange-600'
: 'text-red-600'
}
>
{concept.evaluation.status === 'well-defined'
? 'Well-defined'
: concept.evaluation.status === 'requires_changes'
? 'Requires changes'
: 'Not well-defined'}
</span>
) : (
<span>Loading...</span>
)}
</h1>

{concept.evaluation ? (
<>
<hr className="my-6 md:my-8" />
{concept.evaluation && (
<ProblemEvaluationPage
conceptId={concept.id}
problem={concept.problem}
evaluation={concept.evaluation}
/>
)}

<ProblemEvaluationPage
conceptId={concept.id}
problem={concept.problem}
evaluation={concept.evaluation}
/>
</>
) : (
{!concept.evaluation && (
<>
<FetchingDataMessage />

Expand Down
Loading

0 comments on commit 123ced8

Please sign in to comment.