Feature/theme redesign

[saadamir3180]

Redesign the landing page, re-structure the services pages

EDITED by @njmulsqb

For your ease @saadamir3180 here are the pending items:

• Development of services page as per the defined layout
• Development of sub-services page as per the defined layout
• Removal of centralized portfolio and creation of specialized portfolios
• Addition of drop-down filters in blog and removal of tags and categories from side-bar
• Ability to add static files in service offerings, e.g. a link to download sample report (PDF format)
• Testimonial fixes
• Modularity in services/sub-services pages at code level
• Responsiveness
• Markdown support in site.

[netlify]

✅ Deploy Preview for loquacious-pastelito-9eaca0 ready!

Name	Link
🔨 Latest commit	10ef7fe
🔍 Latest deploy log	https://app.netlify.com/sites/loquacious-pastelito-9eaca0/deploys/681b9afa53a0c40008ab833b
😎 Deploy Preview	https://deploy-preview-110--loquacious-pastelito-9eaca0.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[njmulsqb]

@saadamir3180 what changes are done in the service pages?

[saadamir3180]

@saadamir3180 what changes are done in the service pages?

The main change is how they link to each other. I created three parent services, as displayed on the landing page (can be changed). For now, each parent has two sub-services (more can be added). I also changed the behavior of the navigation bar for services. Now, the actual our-services route isn't there, only the sub-services are

[njmulsqb]

@saadamir3180 what about layout of the services page? That's a work pending, right?

[njmulsqb]

Testimonial section even though is a slider but buttons in the bottom are not showing? The user should have someway to move forward/back the testimonials

[njmulsqb]

• The black-space under the testimonials section doesn't make sense.
• There's no section for video testimonial in the main page
• The slider of text testimonials should work on the image to the right side as well so that we can add images of the clients for each testimonial

[njmulsqb]

We dont need these buttons, it will be just a simple comparison table.

[njmulsqb]

Remove the "Book a free call" button, and use "View our works" button for "Book a free call". There will be no button that takes to portfolio and only one button will be there in hero section

[njmulsqb]

Text is colliding with arrow.

[njmulsqb]

Portfolio should've the same drop-down as that of "Our services". There won't be a combined portfolio in the site e.g. /our-portfolio

[tayyubA]

Reduce navbar logo size by 40%

[njmulsqb]

The comparison table isn't responsive on smaller screens i.e. mobile.

[tayyubA]

Services Page:

**Portfolio** - full screen slideshow ( for design ), Showcase Carousel ( for others )
**Testimonial** - Same as landing page
**Hero Section** - Same as landing page ( background image & copy will vary )
**Sub Services** - Personal Portfolio
**Client Logos** - Personal Portfolio ( will be placed after testimonials )
**CTA/Footer** - Same as landing page but with colors inverted ( background image yellow, button color black )

The flow will be:

Hero section > Services > Portfolio > Testimonials > Client Logos > CTA/Footer

[saadamir3180]

@saadamir3180 what about layout of the services page? That's a work pending, right?

are you talking about shifting services page to markdown? if yes markdown is already being implemented and is on the separate branch

[saadamir3180]

• The black-space under the testimonials section doesn't make sense.
• There's no section for video testimonial in the main page
• The slider of text testimonials should work on the image to the right side as well so that we can add images of the clients for each testimonial

The testimonial length varies, so black spaces appear. We can either fix the card size to match the tallest card. If that's the case, let me know

I was unable to implement the video testimonial thing even though i spend so much time, i'll give it one more try

I'll add the slider for the images as well

[saadamir3180]

We dont need these buttons, it will be just a simple comparison table.

The comparison table isn't responsive on smaller screens i.e. mobile.

can you give me some idea how it should look on smaller screens

[saadamir3180]

Services Page:

**Portfolio** - full screen slideshow ( for design ), Showcase Carousel ( for others )
**Testimonial** - Same as landing page
**Hero Section** - Same as landing page ( background image & copy will vary )
**Sub Services** - Personal Portfolio
**Client Logos** - Personal Portfolio ( will be placed after testimonials )
**CTA/Footer** - Same as landing page but with colors inverted ( background image yellow, button color black )

The flow will be:

Hero section > Services > Portfolio > Testimonials > Client Logos > CTA/Footer

I didn't get your point. do we have a services page?

[njmulsqb]

are you talking about shifting services page to markdown? if yes markdown is already being implemented and is on the separate branch

No, I am talking about the layout of services page, that Tayyub has explained in his comment: #110 (comment)

[njmulsqb]

The testimonial length varies, so black spaces appear. We can either fix the card size to match the tallest card. If that's the case, let me know

I am open to solutions, it should look uniform. May-be we can alter font-size to fit in a fixed-size card?

I was unable to implement the video testimonial thing even though i spend so much time, i'll give it one more try

That's required

I'll add the slider for the images as well

A separate slider isn't needed. Single slider will be used that will tackle both text and image of testimonial

[njmulsqb]

can you give me some idea how it should look on smaller screens

Check comparison table of https://www.persuasionexperience.com/ on mobile screen, you'll get the idea.

[saadamir3180]

I think a single slider will look weird when they slide, I suggest using separate sliders for the image and testimonial and synchronizing them, let me know your thoughts on this

[tayyubA]

Services Page:

**Portfolio** - full screen slideshow ( for design ), Showcase Carousel ( for others )
**Testimonial** - Same as landing page
**Hero Section** - Same as landing page ( background image & copy will vary )
**Sub Services** - Personal Portfolio
**Client Logos** - Personal Portfolio ( will be placed after testimonials )
**CTA/Footer** - Same as landing page but with colors inverted ( background image yellow, button color black )

The flow will be:

Hero section > Services > Portfolio > Testimonials > Client Logos > CTA/Footer

I didn't get your point. do we have a services page?

As Discussed before we'll have one main landing page and each service will have it's own landing page as well, the structure I have shared with you is for the landing page of each service

[njmulsqb]

I think a single slider will look weird when they slide, I suggest using separate sliders for the image and testimonial and synchronizing them, let me know your thoughts on this

The whole purpose is to show testimonial text along with the image of client, how will that be achieved in different sliders?

[saadamir3180]

I think a single slider will look weird when they slide, I suggest using separate sliders for the image and testimonial and synchronizing them, let me know your thoughts on this

The whole purpose is to show testimonial text along with the image of client, how will that be achieved in different sliders?

currently only the testimonial text is in the slider, we can add a slider to the image also. By this the design will be the same, but when the testimonial slide changes the image also changes and vice versa

[tayyubA]

@saadamir3180 Pause working on Testimonial section for now, I'll provide the Figma design for implementation.

[tayyubA]

7. In the dedicated portfolio page of service I'm seeing the old layout of projects, please use the "Full Screen Slideshow"

are you talking about the layout of portfolio page in general, if not kindly share the link of page you are referring to

This is the current portfolio page:

This is what I want it to be:
https://html.themegenix.com/frisk/home-12.html

For now only change the "Design" service portfolio page to what I've provided.

[tayyubA]

3. In the testimonial section, text based feedback cards are too long in length

We can either reduce the font size or limit the testimonial length. If you want to reduce the font size, what should it be?

See this, there is a lot of free space

[tayyubA]

6. In the service landing page, there should be atleast 3 projects rather than 2

We can add as many as needed by just changing the relevant object in the data directory, the portfolio used are just place holders

Noted

[saadamir3180]

See this, there is a lot of free space

what should be the solution?

[tayyubA]

See this, there is a lot of free space

what should be the solution?

The spacing should be consistent, the size of the cards should be consistent, for scenarios when then feedback exceeds the limit cut it off and have a button to expand it in case someone wants to read the full feedback

[tayyubA]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

[saadamir3180]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

[tayyubA]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

Options - Multiple comparison table styles to choose from

[saadamir3180]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

Options - Multiple comparison table styles to choose from

Are you asking to design 2-3 comparison tables with different styling?

[tayyubA]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

Options - Multiple comparison table styles to choose from

Are you asking to design 2-3 comparison tables with different styling?

Have you designed the comparison table by yourself or have used a pre-made one?

[saadamir3180]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

Options - Multiple comparison table styles to choose from

Are you asking to design 2-3 comparison tables with different styling?

Have you designed the comparison table by yourself or have used a pre-made one?

Designed it by myself buddy :)

[tayyubA]

@saadamir3180 For the comparison table, I mentioned earlier to show some options as the current one is too simple, any update on that?

what do you mean by options?

Options - Multiple comparison table styles to choose from

Are you asking to design 2-3 comparison tables with different styling?

Have you designed the comparison table by yourself or have used a pre-made one?

Designed it by myself buddy :)

Do confirm if we have the option of using pre-built ones

[tayyubA]

@saadamir3180 Do let me know when the updates are done

[saadamir3180]

Do confirm if we have the option of using pre-built ones

No, we don't

[saadamir3180]

Do confirm if we have the option of using pre-built ones

See this, there is a lot of free space

what should be the solution?

The spacing should be consistent, the size of the cards should be consistent, for scenarios when then feedback exceeds the limit cut it off and have a button to expand it in case someone wants to read the full feedback

This will again be a custom solution, we don't already have this behavior in template. If you want me to do so kindly share some sample designs

[saadamir3180]

I think I'm not getting your point. Are you talking about just the submenu under the Portfolio navigation item, or is it something else?

Just the sub-menu.

does this looks fine?

@njmulsqb confirm please!

[tayyubA]

I think I'm not getting your point. Are you talking about just the submenu under the Portfolio navigation item, or is it something else?

Just the sub-menu.

does this looks fine?

@njmulsqb confirm please!

He is busy, let's pause this for now and complete the rest

[njmulsqb]

does this looks fine?

The execution is okay but the idea isn't

Drop-down will look something like this

• Cybersecurity
  • Penetration Testing
  • Cloud Security
  • Blue Teaming
• Graphic Design
  • Logo Design
  • Brand Identity
• Developement
  • Web Dev
  • Mobile Dev

[tayyubA]

does this looks fine?

The execution is okay but the idea isn't

Drop-down will look something like this

* Cybersecurity
  
  * Penetration Testing
  * Cloud Security
  * Blue Teaming

* Graphic Design
  
  * Logo Design
  * Brand Identity

* Developement
  
  * Web Dev
  * Mobile Dev

@saadamir3180 Can't see this implementation on the website

[saadamir3180]

does this looks fine?

The execution is okay but the idea isn't

Drop-down will look something like this

* Cybersecurity
  
  * Penetration Testing
  * Cloud Security
  * Blue Teaming

* Graphic Design
  
  * Logo Design
  * Brand Identity

* Developement
  
  * Web Dev
  * Mobile Dev

@saadamir3180 Can't see this implementation on the website
i think najam was referring to the list of menus and submenus, I've provided the implementation, this can be adjusted by modification in data as i don't - exactly know which project belongs to which category

[tayyubA]

does this looks fine?

The execution is okay but the idea isn't
Drop-down will look something like this

* Cybersecurity
  
  * Penetration Testing
  * Cloud Security
  * Blue Teaming

* Graphic Design
  
  * Logo Design
  * Brand Identity

* Developement
  
  * Web Dev
  * Mobile Dev

@saadamir3180 Can't see this implementation on the website
i think najam was referring to the list of menus and submenus, I've provided the implementation, this can be adjusted by modification in data as i don't - exactly know which project belongs to which category

See this, it's not in the format Najam asked for

[njmulsqb]

We're not going to list individual portfolio items in the menu, there will be main menu and a sub-menu, each sub menu entry will lead to its dedicated portfolio page that will list the portfolio items.

[saadamir3180]

We're not going to list individual portfolio items in the menu, there will be main menu and a sub-menu, each sub menu entry will lead to its dedicated portfolio page that will list the portfolio items.

and i hope there aren't additional pages for parent portfolios like Development, Cybersecurity...

[njmulsqb]

and i hope there aren't additional pages for parent portfolios like Development, Cybersecurity...

There won't be any. Check #110 (comment)

Please read comments carefully.

[njmulsqb]

Why is this show projects button greyed out on services page?

It should redirect to that service's portfolio page, see #110 (comment)

[saadamir3180]

Why is this show projects button greyed out on services page?

It should redirect to that service's portfolio page, see #110 (comment)

Najam for this service we don't have any portfolio link, attached with it. We can update that particular service portfolioLink attribute and it will work fine like the rest of the services