-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #386 from Anshikapal05/main
Added Success Stories and Inspiration Board
- Loading branch information
Showing
5 changed files
with
202 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /* Dark mode colors */ | ||
| body.dark { | ||
| --background-color: #2c2a2a; | ||
| --text-color: #000000; | ||
| --card-background: #3a3a3a; | ||
| --heading-color: #363636; | ||
| --button-background: #3d8b3d; | ||
| --button-hover: #317532; | ||
| transition: background-color 0.25s, color 0.25s; | ||
| } | ||
| .story-container { | ||
| max-width: 800px; | ||
| margin: auto; | ||
| padding: 20px; | ||
| background-color: var(--background-color); | ||
| color: var(--text-color); | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| h1, h2 { | ||
| text-align: center; | ||
| color: var(--heading-color); | ||
| margin-bottom: 80px; /* Add space below each heading */ | ||
| margin-top: 80px; /* Add space above each heading */ | ||
| } | ||
| .story-form h3{ | ||
| text-align: center; | ||
| } | ||
| .story-form { | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| input, textarea { | ||
| width: 100%; | ||
| padding: 10px; | ||
| margin-bottom: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| button { | ||
| width: 100%; | ||
| padding: 10px; | ||
| background-color: #28a745; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #218838; | ||
| } | ||
|
|
||
| .stories { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 20px; | ||
| margin-bottom: 30px; /* Add space below each story section */ | ||
| } | ||
|
|
||
| .story { | ||
| background-color: var(--card-background); | ||
| flex: 1 1 calc(50% - 20px); | ||
| color: var(--text-color); | ||
| padding: 15px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .story h3 { | ||
| color: var(--heading-color); | ||
| margin: 0 0 10px; | ||
| } | ||
|
|
||
| /* Initial stories (great minds) */ | ||
| .story.initial { | ||
| background: #e7f3ff; /* Light blue */ | ||
| border-left: 4px solid #1e90ff; | ||
| } | ||
|
|
||
| /* Personal stories */ | ||
| .story.personal { | ||
| background: #fff7e6; /* Light orange */ | ||
| border-left: 4px solid #ff9800; | ||
| } | ||
|
|
||
| /* User-submitted stories */ | ||
| .story.user-submitted { | ||
| background: #f0f9e9; /* Light green */ | ||
| border-left: 4px solid #28a745; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import '../css/SuccessStories.css'; // Import CSS for styling | ||
|
|
||
| const SuccessStories = () => { | ||
| const [name, setName] = useState(''); | ||
| const [story, setStory] = useState(''); | ||
| const [stories, setStories] = useState([]); | ||
|
|
||
| // Load initial stories and saved stories from local storage | ||
| useEffect(() => { | ||
| const savedStories = JSON.parse(localStorage.getItem('stories')) || []; | ||
| const initialStories = [ | ||
| { name: "Chanakya", story: "Known as the father of Indian economics and political science, Chanakya's teachings on governance and strategy in the Arthashastra have shaped political thinking and leadership for centuries.", type: 'initial' }, | ||
| { name: "Confucius", story: "Confucius emphasized family, respect, and ethical governance, creating a system of thought that influenced East Asian culture, philosophy, and political systems for over two millennia.", type: 'initial' }, | ||
| { name: "Plato", story: "Plato, one of the foundational figures in Western philosophy, wrote works like 'The Republic,' which explores justice, morality, and the ideal state, laying the groundwork for modern philosophy and political theory.", type: 'initial' }, | ||
| { name: "Sun Tzu", story: "Author of 'The Art of War,' Sun Tzu's timeless insights on strategy and warfare remain relevant in business, sports, and personal success, advocating for knowledge, preparation, and adaptability.", type: 'initial' }, | ||
|
|
||
| // Personal stories inspired by these great minds | ||
| { name: "Aditi", story: "Inspired by Chanakya, I've learned to approach my career with a strategic mindset, always planning ahead and thinking about the bigger picture. His teachings have helped me navigate office politics gracefully.", type: 'personal' }, | ||
| { name: "Rahul", story: "Confucius's emphasis on respect and family has transformed the way I communicate with my parents and colleagues. His philosophy reminds me daily to prioritize harmony and respect in my relationships.", type: 'personal' }, | ||
| { name: "Sneha", story: "Reading Plato’s ideas on justice and morality made me rethink my role in society. I now volunteer regularly, and I've become more conscious of how my actions impact others.", type: 'personal' }, | ||
| { name: "Vikram", story: "Sun Tzu's 'Art of War' inspired me to approach challenges in my startup with patience and a focus on adaptability. I’ve learned that preparation and understanding my competitors is crucial.", type: 'personal' }, | ||
| ]; | ||
| setStories([...initialStories, ...savedStories]); | ||
| }, []); | ||
|
|
||
| // Save stories to local storage whenever they update | ||
| useEffect(() => { | ||
| localStorage.setItem('stories', JSON.stringify(stories.filter(s => s.type === 'user-submitted'))); | ||
| }, [stories]); | ||
|
|
||
| const handleSubmit = () => { | ||
| if (name.trim() && story.trim()) { | ||
| setStories([...stories, { name, story, type: 'user-submitted' }]); | ||
| setName(''); | ||
| setStory(''); | ||
| alert("Your story has been submitted successfully!"); | ||
| } else { | ||
| alert("Please fill out both fields."); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="container"> | ||
| <h1>Success Stories and Inspiration Board</h1> | ||
| <div className="story-form"> | ||
| <h3>Share Your Story!</h3> | ||
| <input | ||
| type="text" | ||
| placeholder="Your Name" | ||
| value={name} | ||
| onChange={(e) => setName(e.target.value)} | ||
| required | ||
| /> | ||
| <textarea | ||
| placeholder="Your Success Story" | ||
| value={story} | ||
| onChange={(e) => setStory(e.target.value)} | ||
| required | ||
| /> | ||
| <button onClick={handleSubmit}>Submit</button> | ||
| </div> | ||
|
|
||
| <h2>Inspiration from Great Minds</h2> | ||
| <div className="stories"> | ||
| {stories.filter(s => s.type === 'initial').map((s, index) => ( | ||
| <div key={index} className="story initial"> | ||
| <h3>{s.name}</h3> | ||
| <p>{s.story}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <h2>Personal Stories Inspired by Great Minds</h2> | ||
| <div className="stories"> | ||
| {stories.filter(s => s.type === 'personal').map((s, index) => ( | ||
| <div key={index} className="story personal"> | ||
| <h3>{s.name}</h3> | ||
| <p>{s.story}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <h2>Stories from Our Community</h2> | ||
| <div className="stories"> | ||
| {stories.filter(s => s.type === 'user-submitted').map((s, index) => ( | ||
| <div key={index} className="story user-submitted"> | ||
| <h3>{s.name}</h3> | ||
| <p>{s.story}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SuccessStories; |