Skip to content

Commit 22d65ec

Browse files
mticklemtickle
committed
Refactor Columns component: integrate ColumnData for dynamic content and enhance layout styling
1 parent 185b89f commit 22d65ec

4 files changed

Lines changed: 68 additions & 64 deletions

File tree

‎src/App.jsx‎

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -156,50 +156,7 @@ export default function LiturgyMapper() {
156156
</div>
157157
</div>
158158

159-
{/* Right Column: How This Works (Aligns under Narrative) */}
160-
<div className="w-full lg:w-2/5 bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200">
161-
<h3 className="text-xl font-bold text-slate-800 mb-4">How This Works</h3>
162-
<p className="text-slate-600 mb-6 leading-relaxed text-md">
163-
We map worship songs using two liturgical axes to visualize the <strong>emotional and theological arc</strong> of our service. This helps us ensure our setlists are balanced, biblically-rooted, and moving the congregation through the four pillars of worship.
164-
</p>
165159

166-
<blockquote className="mb-6 border-l-4 border-slate-300 bg-slate-50 pl-4 py-3 italic text-slate-600 text-sm rounded-r-lg">
167-
<span className="font-semibold text-slate-500 block">Geography Reminder:</span>
168-
The Y axis is vertical. It goes up and down, north and south.
169-
The X axis is horizontal. It goes left and right, east and west.
170-
</blockquote>
171-
172-
<div className="space-y-6">
173-
{/* Axes Definition */}
174-
175-
<h4 className="font-bold text-slate-800 text-md uppercase tracking-wider mb-1">Focus (Y-Axis)</h4>
176-
<p className="text-md text-slate-600"><strong>Divine</strong> vs. <strong>Human</strong>:<br />
177-
Are we focusing on God's attributes or our condition?
178-
God's attributes land higher in the grid, while our human condition lies lower.</p>
179-
180-
181-
182-
<h4 className="font-bold text-slate-800 text-md uppercase tracking-wider mb-1">Posture (X-Axis)</h4>
183-
<p className="text-md text-slate-500"><strong>External</strong> vs. <strong>Internal</strong>:<br />
184-
Is the song a public declaration or a quiet meditation?</p>
185-
186-
187-
188-
{/* Quadrant Definitions */}
189-
<div className="space-y-3">
190-
<h4 className="font-bold text-slate-800 text-md">The Quadrants</h4>
191-
<div className="space-y-2 text-md">
192-
<p><strong className="text-blue-600">Q1: FAITH</strong> – <em>The Story of God.</em> Telling the biblical narrative of who He is and what He has done.</p>
193-
<p><strong className="text-yellow-600">Q2: PRAISE</strong> – <em>The Awe of God.</em> Active, external response to His majesty and holiness.</p>
194-
<p><strong className="text-slate-600">Q3: HOPE</strong> – <em>The Confession.</em> Reflecting on our need, our weakness, and our dependence on Him.</p>
195-
<p><strong className="text-red-600">Q4: LOVE</strong> – <em>The Gospel.</em> Pointing back to the Cross and the victory of Christ’s sacrifice.</p>
196-
</div>
197-
</div>
198-
</div>
199-
200-
201-
202-
</div>
203160

204161
</div>
205162

‎src/components/Columns.jsx‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,36 @@
1+
import { ColumnData } from '@data/ColumnData';
2+
13
export default function Columns() {
2-
const columns = [
3-
{ name: "Praise", movement: "Gathering", message: "The Awe", color: "border-t-blue-300", imagePath: "/quadrants/images/praise_pro.png" },
4-
{ name: "Faith", movement: "Word", message: "The Story of God", color: "border-t-blue-500", imagePath: "/quadrants/images/faith_pro.png" },
5-
{ name: "Love", movement: "Table", message: "The Gospel & Sacrifice", color: "border-t-blue-700", imagePath: "/quadrants/images/love_pro.png" },
6-
{ name: "Hope", movement: "Sending", message: "The Confession", color: "border-t-blue-900", imagePath: "/quadrants/images/hope_pro.png" },
7-
];
4+
5+
86

97
return (
108
<div className="flex gap-6 p-8 bg-slate-50 ">
119
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
12-
{columns.map((q) => (
13-
<div key={q.name} className={`bg-white rounded-2xl shadow-sm border-t-4 ${q.color} flex flex-col min-h-[500px]`}>
10+
{ColumnData.map((q) => (
11+
<div key={q.name} className={`bg-white overflow-hidden border-slate-500 rounded-2xl shadow-sm border-l border-r border-t-4 ${q.color} flex flex-col min-h-[500px]`}>
1412

1513
{/* Header Section */}
16-
<div className="p-6 border-b border-slate-100">
17-
<h2 className="text-2xl font-black text-slate-800 tracking-tight">{q.name}</h2>
14+
<div className="p-4 border-b border-slate-500 bg-slate-200">
15+
<h2 className="text-2xl font-black text-slate-800 ">{q.name}</h2>
1816
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{q.movement}</p>
1917
</div>
2018

21-
{/* Middle Content: Where the service building happens */}
22-
<div className="p-6 flex-1 flex flex-col">
23-
<p className="text-sm font-bold text-slate-500 mb-4">{q.message}</p>
24-
25-
{/* The "Service Slot" - This will hold your future song components */}
26-
{/* <div className="border-2 border-dashed border-slate-200 rounded-xl flex-1 flex items-center justify-center bg-slate-50/30 hover:bg-slate-50 transition-colors">
27-
<span className="text-slate-400 text-xs uppercase tracking-wider font-semibold">Add Content</span>
28-
</div> */}
19+
<div className="pt-2 pb-2 pl-4 border-b bg-slate-100">
20+
<p className="text-sm font-bold text-slate-500">{q.message}</p>
21+
</div>
22+
<div className="p-4 flex-1 flex flex-col">
23+
<p className="text-sm text-slate-500 mb-4">{q.narrative.join(" ")}</p>
2924
</div>
3025

3126
{/* Bottom Graphic Section */}
32-
<div className="w-full pt-4 flex justify-center bg-slate-50/30 rounded-b-2xl overflow-hidden">
27+
{/* <div className="w-full pt-4 flex justify-center bg-slate-50/30 rounded-b-2xl overflow-hidden">
3328
<img
3429
src={q.imagePath}
3530
alt={`${q.movement} illustration`}
3631
className="w-full h-full object-contain object-bottom"
3732
/>
38-
</div>
33+
</div> */}
3934
</div>
4035
))}
4136
</div>

‎src/data/ColumnData.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
export const ColumnData = [
2+
{
3+
"name": "Praise",
4+
"movement": "Gathering",
5+
"message": "The Awe",
6+
"color": "border-t-blue-300",
7+
"imagePath": "/quadrants/images/praise_pro.png",
8+
"narrative": [
9+
"The focus is entirely upward on the Divine, in a state of ",
10+
"active declaration.The congregation, filled with AWE, actively reflects God's glory back to Him. ",
11+
"This is pure adoration, worship, and exalting His name for who He is, fulfilling the GATHERING phase."
12+
]
13+
},
14+
{
15+
"name": "Faith",
16+
"movement": "Word",
17+
"message": "The Story of God",
18+
"color": "border-t-blue-500",
19+
"imagePath": "/quadrants/images/faith_pro.png",
20+
"narrative": [
21+
"God reaches down to His people, and the congregation positions themselves to listen, learn, and receive. ",
22+
"By focusing on the biblical Story of God, His character, and His attributes, the congregation receives the ",
23+
"bedrock of their FAITH. Here, the WORD, as in, the truth of Scripture, is poured into human hearts."
24+
]
25+
},
26+
{
27+
"name": "Love",
28+
"movement": "Table",
29+
"message": "The Gospel & Sacrifice",
30+
"color": "border-t-blue-700",
31+
"imagePath": "/quadrants/images/love_pro.png",
32+
"narrative": [
33+
"This is where human need meets the ultimate Divine answer: the cross. By declaring the Gospel and the ",
34+
"sacrifice of Jesus, the church proclaims the greatest act of LOVE in human history. It relates to the ",
35+
"TABLE phase, where Christ’s sacrifice is actively remembered, celebrated, and proclaimed by the body of believers."
36+
]
37+
},
38+
{
39+
"name": "Hope",
40+
"movement": "Sending",
41+
"message": "The Confession",
42+
"color": "border-t-blue-900",
43+
"imagePath": "/quadrants/images/hope_pro.png",
44+
"narrative": [
45+
"By receiving God's grace through the call to repentance, the congregation experiences the profound hope of a renewed life in Christ, ",
46+
"by reflecting on our need for a savior. ",
47+
"This beautifully handles the confession and repentance dynamics and fuels the SENDING phase, where humans are transformed and ",
48+
"mobilized to go out into the world with HOPE."
49+
]
50+
}
51+
];

‎vite.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export default defineConfig({
2020
'@pages': path.resolve(__dirname, 'src/pages'),
2121
'@routes': path.resolve(__dirname, 'src/routes'),
2222
'@contexts': path.resolve(__dirname, 'src/contexts'),
23-
'@assets': path.resolve(__dirname, 'src/assets')
23+
'@assets': path.resolve(__dirname, 'src/assets'),
24+
'@data': path.resolve(__dirname, 'src/data')
2425

2526

2627
},

0 commit comments

Comments
 (0)