Skip to content

Commit

Permalink
Fix Responsive Hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanerengiiin
tanerengiiin committed Dec 10, 2023
1 parent 41fb637 commit 47a0305
Show file tree
Hide file tree
Showing 16 changed files with 399 additions and 334 deletions.
3 changes: 1 addition & 2 deletions components/templates/TemplateConfiguration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React from 'react'
const TemplateConfiguration = ({
title = "",
description = "",
configType = "ANGULAR"
}) => {
return (
<div className='template-configuration-outer'>
Expand All @@ -19,7 +18,7 @@ const TemplateConfiguration = ({
<p>&gt; ng new my-apollo-app</p>
<p>&gt; cd my-apollo-app</p>
<p>&gt; ng serve</p>
<img className='template-configuration-screen-bottom-logo' src={configType==="VUE"?'/images/templates/vue-3d-logo.png':configType==="REACT"? '/images/templates/react-3d-logo.png':'/images/templates/angular-3d-logo.png'} alt='Angular 3D Logo' />
<img className='template-configuration-screen-bottom-logo' src={'/images/templates/react-3d-logo.png'} alt='Angular 3D Logo' />
</div>
</div>
<h3 className='template-configuration-title'>{title}</h3>
Expand Down
71 changes: 35 additions & 36 deletions components/templates/templateHero/TemplateHeroLight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,62 @@ import React from 'react'

const TemplateHeroLight = () => {
return (
<svg width="490" height="77" viewBox="0 0 490 77" fill="none" xmlns="http://www.w3.org/2000/svg" className='template-hero-light'>
<g filter="url(#filter0_f_956_39218)">
<g filter="url(#filter1_f_956_39218)">
<rect x="43.0005" y="-23" width="404" height="10" rx="5" fill="var(--primary-50)" />
<rect x="38.5005" y="-27.5" width="413" height="19" rx="9.5" stroke="var(--primary-100)" stroke-width="9" />
<svg width="490" height="143" viewBox="0 0 490 143" fill="none" xmlns="http://www.w3.org/2000/svg" className='template-hero-light'>
<g filter="url(#filter0_f_1970_42395)">
<g filter="url(#filter1_f_1970_42395)">
<rect x="43" y="43" width="404" height="10" rx="5" fill="var(--primary-100)" />
<rect x="38.5" y="38.5" width="413" height="19" rx="9.5" stroke="var(--primary-200)" strokeWidth="9" />
</g>
<g filter="url(#filter2_f_956_39218)">
<rect x="98.0005" y="-14" width="294" height="10" rx="5" fill="var(--primary-50)" />
<rect x="93.5005" y="-18.5" width="303" height="19" rx="9.5" stroke="var(--primary-100)" stroke-width="9" />
<g filter="url(#filter2_f_1970_42395)">
<rect x="98" y="52" width="294" height="10" rx="5" fill="var(--primary-100)" />
<rect x="93.5" y="47.5" width="303" height="19" rx="9.5" stroke="var(--primary-200)" strokeWidth="9" />
</g>
<g filter="url(#filter3_f_956_39218)">
<rect x="144" y="-6" width="202" height="10" rx="5" fill="var(--primary-50)" />
<rect x="139.5" y="-10.5" width="211" height="19" rx="9.5" stroke="var(--primary-100)" stroke-width="9" />
<g filter="url(#filter3_f_1970_42395)">
<rect x="144" y="60" width="202" height="10" rx="5" fill="var(--primary-100)" />
<rect x="139.5" y="55.5" width="211" height="19" rx="9.5" stroke="var(--primary-200)" strokeWidth="9" />
</g>
<g filter="url(#filter4_f_956_39218)">
<rect x="182" y="9" width="126" height="10" rx="5" fill="var(--primary-50)" />
<rect x="177.5" y="4.5" width="135" height="19" rx="9.5" stroke="var(--primary-100)" stroke-width="9" />
<g filter="url(#filter4_f_1970_42395)">
<rect x="182" y="75" width="126" height="10" rx="5" fill="var(--primary-100)" />
<rect x="177.5" y="70.5" width="135" height="19" rx="9.5" stroke="var(--primary-200)" strokeWidth="9" />
</g>
<g filter="url(#filter5_f_956_39218)">
<rect x="212" y="24" width="66" height="10" rx="5" fill="var(--primary-50)" />
<rect x="207.5" y="19.5" width="75" height="19" rx="9.5" stroke="var(--primary-100)" stroke-width="9" />
<g filter="url(#filter5_f_1970_42395)">
<rect x="212" y="90" width="66" height="10" rx="5" fill="var(--primary-100)" />
<rect x="207.5" y="85.5" width="75" height="19" rx="9.5" stroke="var(--primary-200)" strokeWidth="9" />
</g>
</g>
<defs>
<filter id="filter0_f_956_39218" x="0.000488281" y="-66" width="490" height="143" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter0_f_1970_42395" x="0" y="0" width="490" height="143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter1_f_956_39218" x="14.0005" y="-52" width="462" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter1_f_1970_42395" x="14" y="14" width="462" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter2_f_956_39218" x="69.0005" y="-43" width="352" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter2_f_1970_42395" x="69" y="23" width="352" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter3_f_956_39218" x="115" y="-35" width="260" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter3_f_1970_42395" x="115" y="31" width="260" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter4_f_956_39218" x="153" y="-20" width="184" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter4_f_1970_42395" x="153" y="46" width="184" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
<filter id="filter5_f_956_39218" x="183" y="-5" width="124" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<filter id="filter5_f_1970_42395" x="183" y="61" width="124" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_956_39218" />
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
</filter>
</defs>
</svg>

)
}

Expand Down
34 changes: 18 additions & 16 deletions components/templates/templateHero/TemplateHeroRectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,25 @@ import React from 'react'

const TemplateHeroRectangle = () => {
return (
<svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" className='template-hero-rectangle'>
<g style={{mixBlendMode:"screen"}} filter="url(#filter0_f_956_37561)">
<path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
</g>
<defs>
<filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters='sRGB'>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
</filter>
<linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
<stop stopColor="var(--primary-600)" />
<stop offset="1" stopColor="var(--primary-600)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<>
<svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" className='template-hero-rectangle'>
<g style={{mixBlendMode:"overlay"}} filter="url(#filter0_f_956_37561)">
<path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
</g>
<defs>
<filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
</filter>
<linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
<stop stopColor="var(--primary-400)" />
<stop offset="1" stopColor="var(--primary-100)" stopOpacity="0" />
</linearGradient>
</defs>
</svg>

</>
)
}

Expand Down
2 changes: 1 addition & 1 deletion pages/templates/atlantis/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const AtlantisPage = () => {
<AtlantisSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={["Features that the","Apolla template gives you"]}/>
<AtlantisSeperator />
<TemplateConfiguration title='Vue.js App with No Configuration' configType='VUE' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<TemplateConfiguration title='Vue.js App with No Configuration' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<AtlantisSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
<AtlantisSeperator />
Expand Down
2 changes: 1 addition & 1 deletion pages/templates/diamond/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ const DiamondPage = () => {
<DiamondSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={["Features that the","Apolla template gives you"]}/>
<DiamondSeperator />
<TemplateConfiguration title='Vue.js App with No Configuration' configType='VUE' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<TemplateConfiguration title='Vue.js App with No Configuration' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<DiamondSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
<DiamondSeperator />
Expand Down
2 changes: 1 addition & 1 deletion pages/templates/freya/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const FreyaPage = () => {
<FreyaSeparator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={["Features that the","Apolla template gives you"]}/>
<FreyaSeparator />
<TemplateConfiguration title='Vue.js App with No Configuration' configType='VUE' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<TemplateConfiguration title='Vue.js App with No Configuration' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<FreyaSeparator />
<TemplateFeaturesType2 featuresData={apolloFeatures2Data} />
<FreyaSeparator />
Expand Down
2 changes: 1 addition & 1 deletion pages/templates/ultima/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const UltimaPage = () => {
<UltimaSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={["Features that the","Apolla template gives you"]}/>
<UltimaSeperator />
<TemplateConfiguration title='Vue.js App with No Configuration' configType='VUE' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<TemplateConfiguration title='Vue.js App with No Configuration' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<UltimaSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
<UltimaSeperator />
Expand Down
2 changes: 1 addition & 1 deletion pages/templates/verona/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ const UltimaPage = () => {
<VeronaSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={["Features that the","Apolla template gives you"]} animationSeconds={4000}/>
<VeronaSeperator />
<TemplateConfiguration title='Vue.js App with No Configuration' configType='VUE' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<TemplateConfiguration title='Vue.js App with No Configuration' description='Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support' />
<VeronaSeperator />
<TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
<VeronaSeperator />
Expand Down
Binary file modified public/images/templates/ultima/ultima-hero-dashboard2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 2 additions & 40 deletions styles/layout/templates/_apollo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,24 @@
.template {
&-hero {

&-card {
// border: 1px solid rgba(255, 255, 255, 0.24);
// background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, rgba(170, 140, 255, 0.80) 100%), rgba(255, 255, 255, 0.10);
// box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset;
// backdrop-filter: blur(2px);

}

&-dashboard1 {
z-index: 7;
position: absolute;
top: 2.02rem;
left: 60rem;
width: 37.875rem;
box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
}

&-dashboard2 {
z-index: 6;
position: absolute;
top: 2.02rem;
left: 42rem;
width: 37.875rem;
box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
}

&-pattern {
width: 96rem;
height: auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
z-index: 6;
mix-blend-mode: overlay;
}
}
}

}

@include mobile {
@media only screen and (max-width: 768px) {
.apollo {
.template {
&-hero {
&-dashboard1 {
top: 28.5rem;
left: 12rem;
width: 28rem;
}

&-dashboard2 {
top: 28.5rem;
left: 1.5rem;
width: 28rem;
}

&-pattern {
width: 90rem;
}
Expand Down
48 changes: 16 additions & 32 deletions styles/layout/templates/_atlantis.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,39 @@

.template {
&-hero {

&-dashboard1 {
z-index: 3;
position: absolute;
top: 2.02rem;
left: 60rem;
width: 37.875rem;
box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
}

&-dashboard2 {
z-index: 2;
position: absolute;
top: 2.02rem;
left: 42rem;
width: 37.875rem;
box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
}

&-pattern {
width: 98rem;
height: 36rem;
position: absolute;
bottom: -0.75rem;
left: 2rem;
z-index: 12;
z-index: 6;
mix-blend-mode: overlay;
}
}
}

}

@include mobile {
@media only screen and (max-width: 1200px) {
.atlantis {
.template{
&-hero {
&-dashboard1 {
top: 28.5rem;
left: 12rem;
width: 28rem;
}

&-dashboard2 {
top: 28.5rem;
left: 1.5rem;
width: 28rem;
&-pattern {
width: 90rem;
bottom: -5.75rem;
left: 0.5rem;
}

}
}

}
}

@media only screen and (max-width: 768px) {
.atlantis {
.template{
&-hero {
&-pattern {
width: 90rem;
bottom: 14.75rem;
Expand Down
Loading

0 comments on commit 47a0305

Please sign in to comment.