Basic Structure of assigned components created

src/components/app.js

@@ -15,6 +15,7 @@ import Team from '../containers/team/teamPageLoader'
 import TeamIndividualView from './team-individual-view'
 
 import Alumni from '../containers/alumni/alumniPageLoader'
+import LifeAtImg from './lift-at-img/life-at-img-page'
 import AddMemberDetails from './team/add-member-details'
 import AddProjectDetails from './projects/add-project-details'
 import Blog from '../containers/blog/blogPageLoader'
@@ -41,6 +42,7 @@ import {
   urlAppBlog,
   urlAppProjects,
   urlAppTeam,
+  urlLifeAtImg,
 } from '../urls'
 
 import blocks from '../css/app.css'
@@ -99,6 +101,7 @@ class App extends Component {
           <Route exact path={urlAppProjects()} component={Projects} />
           <Route exact path={urlAppTeam()} component={Team} />
           <Route exact path={urlAppAlumni()} component={Alumni} />
+          <Route exact path={urlLifeAtImg()} component={LifeAtImg} />
           <Route
             exact
             path={`${urlAppProjects()}/:slug`}

src/components/lift-at-img/life-at-img-page.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+
+import VideoSection from './sections/video/video-section'
+
+import InterestsSection from './sections/interest/interest-section'
+import GallerySection from './sections/gallery/gallery-section'
+import JourneySection from './sections/journey/journey-section'
+import AchievementSection from './sections/acheivement/achievement-section'
+import BlogSection from './sections/blogs/blog-section'
+import JoinUsSection from './sections/join-us/join-us-section'
+import DoAndDontSection from './sections/do-and-dont/do-and-dont-section'
+class LifeAtImg extends Component {
+    constructor(props) {
+      super(props)
+    }
+
+    render(){
+        const {apiInfoData} = this.props
+        return(
+            <div>
+                <VideoSection/>
+                <DoAndDontSection/>
+                <InterestsSection/>
+                <GallerySection/>
+                <JourneySection/>
+                <AchievementSection/>
+                <BlogSection/>
+                <JoinUsSection/>
+            </div>
+        )
+    }
+}
+
+export default LifeAtImg;

src/components/lift-at-img/sections/acheivement/achievement-section.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import styles from '../../../../css/life_at_img/sections/achievement.css'
+import { Container, Header,Grid } from 'semantic-ui-react'
+
+
+const AchievementSection=()=>{
+    return(
+        <div styleName="styles.container">
+            <Container >
+                <div styleName="styles.achievement-heading">Achievements</div>
+                <div styleName="styles.card-container">
+                    <div styleName="styles.achievement-card">
+                        <div styleName="styles.achievement-card-heading">
+                            50+
+                        </div>
+                        <div styleName="styles.achievement-card-text">
+                            Number of GSOC selections
+                        </div>
+                    </div>
+                    <div styleName="styles.achievement-card">
+                        <div styleName="styles.achievement-card-heading">
+                            7+
+                        </div>
+                        <div styleName="styles.achievement-card-text">
+                            Number of Startups
+                        </div>
+                    </div>
+                    <div styleName="styles.achievement-card">
+                        <div styleName="styles.achievement-card-heading">
+                            3+
+                        </div>
+                        <div styleName="styles.achievement-card-text">
+                            Number of times in ICPC final
+                        </div>
+                    </div>
+                </div>
+                </Container>
+        </div>
+    )
+}
+
+export default AchievementSection

src/components/lift-at-img/sections/blogs/blog-section.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import styles from '../../../../css/life_at_img/sections/blog.css'
+import { Container,Image } from 'semantic-ui-react'
+const BlogSection=()=>{
+    return(
+        <div styleName="styles.container">
+            <Container styles="styles.sub-container">
+            <h1 styleName="styles.heading">Experience blogs</h1>
+            </Container>
+
+        </div>
+    )
+}
+
+export default BlogSection

src/components/lift-at-img/sections/do-and-dont/do-and-dont-section.js

@@ -0,0 +1,79 @@
+import React, { Component, useEffect } from 'react'
+import styles from '../../../../css/life_at_img/sections/do-and-dont.css'
+import { Container } from 'semantic-ui-react'
+
+
+const DoAndDontSection=()=>{
+    const weAreJson =[
+        "One team, One family",
+        "Make a Difference Every Day",
+        "Stay humble and learn together",
+        "Word hard, Party harder",
+        "Do the right thing",
+        "Lead by institute, driven by IITR junta"
+    ]
+
+    const weAreNotJson=[
+        "One team, One family",
+        "Make a Difference Every Day",
+        "Stay humble and learn together",
+        "Word hard, Party harder",
+        "Do the right thing",
+        "Hello"
+    ]
+    const [activeOption,setActiveOption]= React.useState(0);
+    const [displayJson,setDisplayJson]=React.useState(weAreJson);
+    const handleClick=(value)=>{
+        if(value==activeOption){}
+        else{
+            if(value==0){
+                setDisplayJson(weAreJson)
+            }else if(value==1){
+                setDisplayJson(weAreNotJson)
+            }
+            setActiveOption(value)
+
+        }
+    }
+    return(
+        <div styleName="styles.container">
+            <div>
+                <Container>
+                {activeOption==0 ? <h1 styleName="styles.heading styles.we-are-active-heading" onClick={()=>{handleClick(0)}}>
+                            We Are
+                            </h1>  : <h1  styleName="styles.heading styles.we-are-heading" onClick={()=>{handleClick(0)}}>
+                            We Are
+                            </h1>
+                            }
+                </Container>
+            </div>
+            <div styleName="styles.content">
+
+                {displayJson.map((value,index)=>{
+                        return(
+                        <div styleName="styles.gradient-border styles.content" key={activeOption+value}>
+                    <h2 styleName="styles.sub-heading styles.sub-heading-animation">
+                            {value}
+                    </h2>
+                </div>
+                        )
+
+                })}
+            </div>
+            <div>
+                <Container>
+                    <div styleName="styles.right-align">
+                    {activeOption==1 ? <h1  styleName="styles.heading styles.we-are-not-active-heading" onClick={()=>{handleClick(1)}}>
+                            We Aren't
+                            </h1> : <h1  styleName="styles.heading styles.we-are-not-heading" onClick={()=>{handleClick(1)}}>
+                            We Aren't
+                            </h1>
+                            }
+                    </div>
+                </Container>
+            </div>
+        </div>
+    )
+}
+
+export default DoAndDontSection

src/components/lift-at-img/sections/gallery/gallery-section.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import styles from '../../../../css/life_at_img/sections/gallery.css'
+import { Container, Image } from 'semantic-ui-react'
+
+const GallerySection=()=>{
+    return(
+        <div styleName="styles.container">
+            <Container styles="styles.sub-container">
+            <h1 styleName="styles.heading">Happy Faces</h1>
+            <Image src="http://localhost:61000/static/maintainer_site/life_at_img/gallery.svg"/>
+            </Container>
+
+        </div>
+    )
+}
+
+export default GallerySection

src/components/lift-at-img/sections/interest/interest-section.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import styles from '../../../../css/life_at_img/sections/interests.css'
+import { Container } from 'semantic-ui-react'
+
+const json =[
+    {
+        name: "Web Development",
+        text: "Building a better web for IITR, one line of code at a time.",
+
+},
+
+]
+
+const InterestsSection=()=>{
+    return(
+        <div styleName="styles.container">
+            <Container styleName="styles.sub-container">
+                <div styleName="styles.heading">Our interests</div>
+                <div>
+                    <div styleName="styles.card">
+                        <div>
+
+                        </div>
+                        <div>
+                            Web Development
+                        </div>
+                        <div>
+                            Building a better web for IITR, oneline of code at a time.
+                        </div>
+                    </div>
+
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default InterestsSection

src/components/lift-at-img/sections/join-us/join-us-section.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import styles from '../../../../css/life_at_img/sections/join_us.css'
+import { Grid, Container, Icon, Header, Responsive,Image,Button } from 'semantic-ui-react'
+const JoinUsSection=()=>{
+    return(
+        <div styleName="styles.container">
+            <Container styleName="styles.sub-container">
+            <div styleName="styles.joinus">
+            Join Us</div>
+            <Grid columns={2}>
+                <Grid.Column verticalAlign='middle'>
+                <Image src="http://localhost:61000/static/maintainer_site/life_at_img/avengers.svg" size="large" alt="recruitment-poster"/>
+                </Grid.Column>
+                <Grid.Column>
+                <Grid.Row>
+                <h2 styleName="styles.recruitment-text-heading">
+                    Recruitment Drive 2023
+                </h2>
+                <p styleName="styles.recruitment-text-description">
+                Recruitments will be conducted on the basis of performance in the assignments/tests followed by the personal interview. The dates for the same will be notified via our social media pages and institute emails.
+                </p>
+                </Grid.Row>
+                <Grid.Row>
+                    <div styleName="styles.follow-us-section">
+                    <h4 styleName="styles.announcement-text">
+                        Follow us on
+                    </h4>
+                    <div>
+                    <img  styleName="styles.social-media-icons" src='http://localhost:61000/static/maintainer_site/life_at_img/instagram-white-icon.svg' />
+                    <img  styleName="styles.social-media-icons" src='http://localhost:61000/static/maintainer_site/life_at_img/facebook-icon-white.svg' />
+                    <img  styleName="styles.social-media-icons" src='http://localhost:61000/static/maintainer_site/life_at_img/youtube-icon-white.svg' />
+                    </div>
+                    </div>
+                </Grid.Row>
+                <Grid.Row>
+                    <h4 styleName="styles.announcement-text">
+                        Summer Assignments are out!
+                    </h4>
+                    <button styleName="hello-channeli-button">
+                        <span styleName="hello-channeli-text">Visit Website</span>
+                        <Icon name='arrow right'></Icon>
+                    </button>
+                </Grid.Row>
+                </Grid.Column>
+            </Grid>
+            </Container>
+        </div>
+    )
+}
+
+export default JoinUsSection