Skip to content

Commit ad25fe9

Browse files
Saza-devSaza-dev
committed
Guide Section
1 parent 813dca8 commit ad25fe9

File tree

6 files changed

+236
-8
lines changed

6 files changed

+236
-8
lines changed

‎frontend/src/app/guide/page.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import GuidePage from "@/src/pages/GuidePage";
2+
3+
export default async function Home() {
4+
await new Promise((res) => setTimeout(res, 1500)); // fake delay
5+
return <GuidePage/>
6+
}

‎frontend/src/components/Footer.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client';
1+
"use client";
22

33
const Footer = () => {
44
return (
@@ -7,20 +7,36 @@ const Footer = () => {
77
{/* Left: Branding */}
88
<div className="text-center md:text-left">
99
<h2 className="text-2xl font-bold text-blue-400">SoftSight</h2>
10-
<p className="text-sm text-gray-400 mt-1">© {new Date().getFullYear()} All rights reserved.</p>
10+
<p className="text-sm text-gray-400 mt-1">
11+
© {new Date().getFullYear()} All rights reserved.
12+
</p>
1113
</div>
1214

1315
{/* Center: Links */}
1416
<div className="flex gap-6 text-sm">
15-
<a href="/" className="hover:text-blue-400 transition">Home</a>
16-
<a href="/forecast" className="hover:text-blue-400 transition">Forecast</a>
17-
<a href="/about-us" className="hover:text-blue-400 transition">About Us</a>
17+
<a href="/" className="hover:text-blue-400 transition">
18+
Home
19+
</a>
20+
<a href="/guide" className="hover:text-blue-400 transition">
21+
Guide
22+
</a>
23+
<a href="/forecast" className="hover:text-blue-400 transition">
24+
Forecast
25+
</a>
26+
<a href="/about-us" className="hover:text-blue-400 transition">
27+
About Us
28+
</a>
1829
</div>
1930

2031
{/* Right: Call to Action */}
2132
<div className="text-center md:text-right">
22-
<p className="text-sm mb-5 text-gray-400 ">Ready to forecast your project?</p>
23-
<a href="/forecast" className="bg-blue-500 hover:bg-blue-600 text-white text-sm px-5 py-2 rounded-lg transition">
33+
<p className="text-sm mb-5 text-gray-400 ">
34+
Ready to forecast your project?
35+
</p>
36+
<a
37+
href="/forecast"
38+
className="bg-blue-500 hover:bg-blue-600 text-white text-sm px-5 py-2 rounded-lg transition"
39+
>
2440
Get Started
2541
</a>
2642
</div>

‎frontend/src/components/ForecastPage/ForecastingForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const ForecastingForm = () => {
9393
>
9494
<motion.form
9595
onSubmit={handleSubmit}
96-
className="bg-white shadow-lg rounded-3xl px-12 py-14 w-full max-w-7xl border border-slate-200"
96+
className="bg-white shadow-lg rounded-3xl px-6 py-14 w-full max-w-7xl border border-slate-200"
9797
initial={{ scale: 0.98 }}
9898
animate={{ scale: 1 }}
9999
transition={{ duration: 0.5 }}

‎frontend/src/components/GuidePage/CriteriaGrid.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
"use client";
2+
import React from "react";
3+
import { motion } from "framer-motion";
4+
5+
const criteria = [
6+
{
7+
category: "Project-Specific Inputs",
8+
items: [
9+
{
10+
label: "project_complexity",
11+
description: "Complexity of features and integrations",
12+
example:
13+
"Example: Low: Simple CRUD, few users, known tech, Medium: Multiple modules, external API, High: High concurrency, AI/ML, microservices",
14+
howToGet: "Self-assessment or PM judgment",
15+
},
16+
17+
{
18+
label: "scope_clarity",
19+
description: "Clarity and completeness of the requirements",
20+
example:
21+
"Example: Clear: Detailed requirements documented, Medium: Partial clarity, Vague: No detailed specs or frequent changes",
22+
howToGet: "Ask PM/stakeholders during planning",
23+
},
24+
{
25+
label: "urgency_level",
26+
description: "Time pressure or critical deadlines",
27+
example:
28+
"Example: Low: Flexible timeline, Medium: Moderate pressure, High: Time-critical, regulatory deadline",
29+
howToGet: "Ask client/business team",
30+
},
31+
32+
{
33+
label: "on_schedule",
34+
description: "Delivered within planned timeline",
35+
example: "Example: First release completed 2 days early.",
36+
howToGet: "Compare timeline with actual delivery",
37+
},
38+
{
39+
label: "budget_estimation",
40+
description: "Total allocated project budget (USD)",
41+
example: "Example: The project has a budget of $75,000.",
42+
howToGet: "From project documentation or finance team",
43+
},
44+
],
45+
},
46+
{
47+
category: "Organizational Structure",
48+
items: [
49+
{
50+
label: "org_structure_type",
51+
description: "Functional, Matrix, or Projectized",
52+
example: "Example: Matrix structure with dual reporting.",
53+
howToGet: "Ask HR or management",
54+
},
55+
{
56+
label: "client_priority",
57+
description: "Whether time, cost, or quality is top priority",
58+
example: 'Example: Client prioritizes "Time to Market".',
59+
howToGet: "Ask the client or PM",
60+
},
61+
{
62+
label: "control_mechanism",
63+
description: "Monitoring tools and decision mechanisms used",
64+
example: "Example: Progress tracked via Jira sprint board.",
65+
howToGet: "Ask team or check tools used for governance",
66+
},
67+
{
68+
label: "risk_management_score",
69+
description: "Preparedness for and response to risks",
70+
example:
71+
"Example: - Low: No planning, Medium: Identified but not tracked, High: Tracked & mitigated",
72+
howToGet: "Ask PM or review risk documentation",
73+
},
74+
],
75+
},
76+
{
77+
category: "Team Experience & Collaboration",
78+
items: [
79+
{
80+
label: "avg_dev_experience",
81+
description: "Average years of experience among developers",
82+
example:
83+
"Example: A team with members having 3, 5, and 7 years experience averages 5 years.",
84+
howToGet:
85+
"Ask HR/project manager for average years of experience of developers on the project",
86+
},
87+
{
88+
label: "pm_experience",
89+
description: "Project manager’s experience in years",
90+
example:
91+
"Example: The PM has 8 years of project management experience.",
92+
howToGet: "Ask project manager or HR for PM’s experience in years",
93+
},
94+
95+
{
96+
label: "team_sdlc_knowledge",
97+
description: "Familiarity with software development lifecycle",
98+
example:
99+
"Example: Low: No formal training, Medium: Aware of SDLC steps, High: Experienced with multiple SDLCs",
100+
howToGet: "Interview or check training records",
101+
},
102+
{
103+
label: "user_involvement",
104+
description: "End-user participation in project phases",
105+
example:
106+
"Example: Low: No user input, Medium: Periodic reviews, High: Users in every phase",
107+
howToGet: "Observe or ask about user engagement",
108+
},
109+
110+
{
111+
label: "communication_quality",
112+
description: "How effective team communication was",
113+
example: "Example: Daily standups and retrospectives held.",
114+
howToGet: "Survey team or check communication logs",
115+
},
116+
],
117+
},
118+
{
119+
category: "Technology & Tools",
120+
items: [
121+
{
122+
label: "tool_familiarity",
123+
description: "Familiarity with tools like Git, Jira, CI/CD",
124+
example: "Example: Team uses GitHub, Jenkins, and Jira daily.",
125+
howToGet: "Ask team members directly",
126+
},
127+
{
128+
label: "legacy_system_involved",
129+
description: "Whether integration with old systems was required",
130+
example: "Example: Integrated with Oracle 2008 system.",
131+
howToGet: "Ask technical lead or review system dependencies",
132+
},
133+
{
134+
label: "tech_stack_familiarity",
135+
description: "Whether team is comfortable with the tech stack",
136+
example: "Example: Prior experience with React and Node.js.",
137+
howToGet: "Ask developers if stack is familiar or new",
138+
},
139+
{
140+
label: "testing_strategy",
141+
description: "Manual or automated testing approaches",
142+
example: "Example: Automated tests with Jest and Cypress.",
143+
howToGet: "Ask QA team or review test plans",
144+
},
145+
],
146+
},
147+
];
148+
149+
export const CriteriaGrid = () => {
150+
return (
151+
<section className="grid w-[1200px] mt-[150px] gap-8 md:grid-cols-2 ">
152+
{criteria.map((block, index) => (
153+
<motion.div
154+
key={index}
155+
className="rounded-2xl shadow-lg flex flex-col items-center p-6 bg-white hover:shadow-xl transition-shadow"
156+
initial={{ opacity: 0, y: 30 }}
157+
whileInView={{ opacity: 1, y: 0 }}
158+
transition={{ duration: 0.5, delay: index * 0.1 }}
159+
viewport={{ once: true }}
160+
>
161+
<h3 className="text-xl font-semibold mb-4 text-indigo-600">
162+
{block.category}
163+
</h3>
164+
<ul className="space-y-4">
165+
{block.items.map((item, idx) => (
166+
<li key={idx}>
167+
<div className="font-medium text-gray-700">{item.label}:</div>
168+
<div className="text-gray-600 mb-1">{item.description}</div>
169+
<div className="text-sm text-gray-500 italic">
170+
{item.example}
171+
</div>
172+
{item.howToGet && (
173+
<div className="text-xs text-gray-400 mt-1">
174+
How to get: {item.howToGet}
175+
</div>
176+
)}
177+
</li>
178+
))}
179+
</ul>
180+
</motion.div>
181+
))}
182+
</section>
183+
);
184+
};

‎frontend/src/components/NavBar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,16 @@ const Navbar = () => {
2424
<a href="/" className="hover:text-blue-600 transition duration-300">
2525
Home
2626
</a>
27+
<a href="/guide" className="hover:text-blue-600 transition duration-300">
28+
Guide
29+
</a>
2730
<a href="/forecast" className="hover:text-blue-600 transition duration-300">
2831
Forecast
2932
</a>
3033
<a href="/about-us" className="hover:text-blue-600 transition duration-300">
3134
About Us
3235
</a>
36+
3337
</div>
3438

3539
{/* Mobile Menu Button */}

‎frontend/src/pages/GuidePage.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Footer from "../components/Footer";
2+
import { CriteriaGrid } from "../components/GuidePage/CriteriaGrid";
3+
import Navbar from "../components/NavBar";
4+
5+
const GuidePage = () => {
6+
return (
7+
<div>
8+
<Navbar />
9+
<div className="w-full flex justify-center items-center">
10+
<CriteriaGrid />
11+
</div>
12+
13+
<Footer />
14+
</div>
15+
);
16+
};
17+
18+
export default GuidePage;

0 commit comments

Comments
 (0)